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.
  • Create a template-based section with swipe areas to include the available actions:
    1. In the header of Dev Studio, click Create > User Interface > Section.
    2. On the Create Section form, specify the label, Applies To class, and ruleset for the section, and then click Create and open.
    3. On the Design tab, click Change, and then click the List item with left and right swipe actions design template.
    4. Add elements in the swipe areas by completing the following tasks in the template element list at the right of the screen.
      1. 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.
      2. To add an embedded section, click the Add new icon, select Embedded section in the Data display list.
      3. 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.
    5. Optional: To configure other options for the section, follow the steps in Creating a section based on a design template.
    6. Click Save.
  • Create a repeating dynamic layout to include the section with swipe actions:
    1. In the header of Dev Studio, click Create > User Interface > Section.
    2. At the top of section, click Convert to full section editor and in the popup click Submit.
    3. On the Design tab, expand the Structural list, and then drag the Repeating dynamic layout onto the work area.
    4. In the Repeating dynamic layout header, click the View properties icon.
    5. 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

        Note: If you are only prototyping, accept the placeholder property .pyTemplatePagelist.
      • 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.

    6. 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.
    7. Click Submit.
    8. On the Design tab, expand the Structural list, and then drag the Embedded section onto the repeating dynamic layout.
    9. 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.
    10. To configure other options for the layout, follow the steps in Creating a repeating dynamic layout
    11. Click Submit.
    Result: You have created a repeating dynamic layout with an embedded section that includes a content area and two side menus with actions.