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.
- 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. - To add a control or field, click the Add new
icon and select an element from the Action
or Data display lists.
- 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 checkbox.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:
Previous topic Configuring drag-and-drop functionality for list items Next topic Navigation patterns in Repeating dynamic layouts