Configuring swipe actions for a mobile app
To help users complete their tasks quickly without leaving the main screen of a mobile app, configure swipe actions for repeating dynamic layouts. Swiping in a row in a mobile app opens a menu of available actions, such as Edit or Delete.
Configure a swipe action by a template-based section, them creating a repeating dynamic layout and embedding the section within it. The section consists of three areas:
- A Left Swipe Area with items that users see when they swipe from right to left.
- A Right Swipe Area with items that users see when they swipe from left to right.
- A Content area with the main items that are always visible on the screen.
In the header of Dev Studio, click
.On the Create Section form, specify the label, Applies To class, and ruleset for the section, and then click Create and open.
On the Design tab, click Change, and then click the List item with left and right swipe actions design template.
Add elements in the swipe areas by completing the following tasks in the template element list at the right of the screen.
To add a control or field, click the Add new icon and select an element from the Action or Data display lists.
You can use:
- Button
- Image
- Link
- Menu – when you use Menu, it must be the only element within a Swipe Area. You can include two items in the menu and configure them to have the icon on top and text on the bottom or the text on top and icon on the bottom. The Menu type on the Presentation tab must be set to Horizontal.
To add an embedded section, click the Add new icon, select Embedded section in the Data display list.
In the Section Include Modal dialog box, specify the page context, class, and section.
Embedded sections are displayed with shading in the section preview.
If you do not configure any action for the Left and Right Swipe Areas, the swipe gesture is disabled.
If you need to configure more than three items for any of the swipe areas, one of the items must be a link with menu actions to show the rest of the items.
- Optional:
To configure other options for the section, follow the steps in Creating sections.
Click Save.
In the header of Dev Studio, click
.At the top of section, click Convert to full section editor and in the popup click Submit.
On the Design tab, expand the Structural list, and then drag the Repeating dynamic layout onto the work area.
In the Repeating dynamic layout header, click the View properties icon.
In the Properties window, in the Source field, specify the source of the data for the dynamic layout group:
- To source the data from a page list or page group, select
Property, and then in the
List/Group field specify the name of the property
by pressing the Down arrow key.
To reference nested page lists or page groups, use the following syntax: page1.page2.myArray
- To access data from a range of sources on a clipboard, select
Data Page, and then in the Data
Page field, specify the name of the page by pressing the
Down arrow key.
Use the following syntax: the name of the data page, followed by a full stop and then a property name; for example, D_Products.pxResults.
- To source the data from a page list or page group, select
Property, and then in the
List/Group field specify the name of the property
by pressing the Down arrow key.
In the Properties window, click the Operations tab, and then select the Enable Swipe check box.
When you enable swipe actions, the layout format defaults to Stacked.
Click Submit.
On the Design tab, expand the Structural list, and then drag the Embedded section onto the repeating dynamic layout.
In the Section Include window, in the empty field next to Section options, specify the name of the section you created by pressing the Down arrow key.
To configure other options for the layout, follow the steps in Creating a repeating dynamic layout
Click Submit.
Create a template-based section with swipe areas to include the available actions:
Create a repeating dynamic layout to include the section with swipe actions:
- Standard controls
As you build forms, use standard controls to bring consistency and predictability to the look and feel of your application. Use the Records Explorer to see a complete list of the standard controls available to you.
- Sections
Sections are the building blocks of your user interface. You can populate a section with components, such as fields and controls, to create a functional chunk of user interface that can be reused in different contexts for improved consistency and efficient development.
- Modifying the presentation options of the repeating dynamic layout
- Skin form — Components tab — Layouts — Dynamic layouts
Previous topic Configuring drag-and-drop functionality for list items Next topic Creating a dynamic layout group