Skuid SFX is now Nintex Apps!
Legacy terminology may appear as we update our documentation.
Components¶
Warning
As of November 2016, the mobile composer has been deprecated. What does this mean?
- App builders with deployed mobile apps will continue to have access to the mobile composer and able to update pages in those mobile apps.
- With Skuid v11, new users (and those with no mobile pages) will have no access to the mobile composer. Unpacking a page pack containing Skuid Mobile pages will re-enable the Mobile Composer option.
Skuid strongly advises using the unified Composer.
Return to mobile composer index.
Decks and Cards¶
In Skuid Mobile the deck component is how you show multiple records. It takes the place of both the Skuid table and field editor. Think of a deck of cards, where the deck is a Salesforce object, and each card is a record. Because a card can contain many different components, a variety of information displays can be created.
Properties¶
Basic Properties¶
- Model: Each Deck is associated with a model.
- Title: Text you would like to appear in your deck title bar (see All Contacts below)
- Allow Inline Record Creation: Do you want new cards to be created inline? If selected, a “plus” sign appears at the left of the title bar.
- Show Save/Cancel: Do you want cards to be editable? If selected the save and cancel icons appear at the left of the title bar. They are shown in grey until some change has been made - and they are activated.
Responsive Properties¶
The deck has a responsive grid system built in automatically. Define the max number of columns and a minimum column width. This allows a large screen to arrange 3 or 4 columns of cards, but as the window is squeezed, rearrange down until only 1 columns is shown.
Large Display¶
Narrow Display¶
Card Properties¶
For each card you determine the following:
- Title: Which can be a field from your model like {{name}}
- Default View: How the data will appear when the user first gets to the page (Read only, Edit, Read with inline editing)
Designing cards¶
Like panels, cards can take a large variety of Skuid Mobile components. These include:
- Grids,
- Divisions
- A second deck
- Fields
- Titles
- Informational Text
- Templates
- Action buttons
The available components are found by expanding the “Add Components” link and double clicking or dragging them into the page.
Context¶
A deck is associated with one model. In order for more than one model to be incorporated into your display - you need to nest decks and ensure that the two decks are related using conditions.
Grids and Divisions¶
Skuid Mobile pages adjust to display effectively as the window size adjusts from device to device. Understanding how this works is critical before digging into other aspects of the page. This responsive adjustment is made to various components in Skuid including Grids, Panels, Decks, etc.
- Grids tell components how to flow appropriately as they are viewed on different size windows.
- Divisions allow components to have different column widths on the page.
Introducing a Grid into the components of your page¶
Add Grids to a page panel from the properties panel of the builder. Double click on the grid to add it to the active area, or drag it into a specific area where you want it located.
Grids can be nested inside each other, or inside page components to achieve sophisticated responsive design.
Introducing Divisions into a Grid¶
After placing a Grid on your page, click on it to expose the properties panel. Add divisions from the property panels. Divisions are where contents will be displayed.
Properties of the Grid¶
The appearance and function of the grid depends on the following properties of the grid. Once you have added a grid to a panel, click on it in the workspace to expose the properties panel.
- Max Columns: This property determines how many vertical sections the available space will be divided into, when displayed at maximum screen widths. As the screen size gets smaller, the columns will be adjusted. Adjustments may include wrapping columns to a second row, resizing images, etc.
- Min Width: This property determines how narrow a column can become (in pixels) before an adjustment is made to the page layout. Columns will always extend to take the full width of the space available for them, and will flex as the screen size changes. When the columns get narrower than the Min Width, something has to change in the layout.
Properties of Grid Divisions¶
Grid divisions can span across multiple columns. This allows a page to have sections with different widths in the same grid.
- Size: Set this property for each grid division. It determines how many columns it spans in the grid. Make a button occupy 1 column, while the field next to it occupies 3 columns. Build a pleasing detail page by using the golden mean; Dividing the page into two grid divisions, with one spanning 2 columns and a second one spanning 3 columns.
Responsive behavior¶
Page adjustments will begin when the available screen space is smaller than the number of columns multiplied by the minimum column width. When this happens, Skuid will place as many divisions as possible into the row using their minimum width. The division that extends beyond the available width will be moved to the next row. The divisions that were already placed on the first row will be widened to take 100% of the available width. Remaining divisions will be placed on this second row, as space permits.
Page Panel¶
The Page Panel is the primary building block of the mobile page.
There are three basic states a panel can exist in.
- Main: A panel that is in the view, occupying the available window.
- Temporary: A panel that is hidden - and will slide from the left to partially cover the main panel.
- Popup: A panel that will appear as a popup and overlay other page contents.
Transitions¶
There are various ways that panels can transition. This is defined by the action generating the transition (see Actions, below). The transition can lead to a replacement of the main panel, or the appearance of a temporary panel.
Properties¶
Unique ID¶
This ID is what we use to call specific panels in transitions. Note: We enforce panel name uniqueness.
Min Width: Responsive behavior¶
A page panel accepts a property of minimum width. If the available space is less than indicated in this value, a second panel transitioning from the left will push this first panel off the page rather than attempt to fit both panes in the page.
The cases panel shrinks to fit when the temporary navigation panel is pushed over it from the left. Space is available before the min width of the panel is reached.
The accounts panel is pushed off the right of the screen as the nav panel opens. The min width for this panel is higher than the space now available.
Adding components¶
Most of the components in Skuid Mobile can be added to the panel. To add a component to the panel double click, or drag it into the panel.
Header and Footer¶
The Header and Footer components are fixed sections that appear glued to the top or bottom of the screen. Page panels appear and scroll underneath them.
The header and footer here are shown in blue.
A page will start with a header and a footer. These can be removed, or additional ones can be added.
Configuring Headers and Footers¶
Headers and footers can be customized by adding decks and grids, buttons and text elements.
Actions, Interactions, Buttons and Swipes¶
The features described below use the Action Framework to trigger actions on the Skuid page. These actions (or groups of actions) are initiated by user input (for example, clicking a button or swiping an image).
Actions can perform an extensive number of items¶
Actions fit into a number of categories:
Model data¶
- Save Model(s): Apply unsaved changes to selected models.
- Cancel Model(s): Discard changes and return to original values in selected models.
- Create new row in Model: Open a new row on a model.
- Set value of Model Condition: Send a value to a model condition.
- Re-query Model: Update model so that changes that may have been made elsewhere, or model conditions that have been set, are now displayed.
- Re-query Models: Same as above, but allows selection of multiple models.
Note
A sophisticated “List / Detail” application can be built with two panels. A first panel has a deck of records, say Leads. A tap interaction is enabled on the cards of that deck. It performs three actions.
- Set value of model condition: To send the Lead ID field to another model that has lead detail information and a waiting Lead ID condition.
- Requery the lead detail model
- Set left panel with the panel that contains the lead detail information
Advanced¶
- Run a Skuid JavaScript snippet: Execute a snippet that has been added to the resources section of the builder.
Actions are triggered by gestures (or interactions)¶
The Gestures currently supported by Mobile Skuid are:
- tap
- doubletap
- drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
- swipe, swipeup, swipedown, swipeleft, swiperight
- transform, transformstart, transformend
- rotate
- pinch, pinchin, pinchout
- touch (gesture detection starts)
- release (gesture detection ends)
Actions can be connected to most components¶
- Actions can either be connected to buttons (the gesture of tapping a button triggers an action)
- or.. actions can be connected directly to touch interactions on components (the gesture of swiping left over a panel hides it). Look for actions or interaction properties on Panels, Decks (for individual cards), Divisions, Wrappers, etc.
Additional Notes¶
Gestures will not bubble down. In other words, if a popup has an action connected with a double finger swipe. That gesture will not be attempted by the Panel that is still present, but is below the popup (Even though it might have its own actions connected with the gesture).
Warning
About touch interactions: If an application is intended to be used on devices that does not support touch interactions (like old PC’s), you should make sure the actions connected to gestures also have buttons that can be clicked. The Gestures will be a convenient affordance on a mobile phone, but cannot be the only way to perform particular actions.
Buttons are also responsive¶
Each button allows the definition of a label and an icon. If the division into which the button has been placed shrinks, the text of the button will be eliminated and only the icon will show
Defining Actions and Interactions¶
Most components properties panels have an “Interactions” section. First define the gesture (interaction) and then define what that gesture should do (its action