Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring swipe actions for a mobile app

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

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 CreateUser InterfaceSection.
  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 sections.
  6. Click Save.

    7. Create a repeating dynamic layout to include the section with swipe actions:

  7. In the header of Dev Studio, click CreateUser InterfaceSection.
  8. At the top of section, click Convert to full section editor and in the popup click Submit.
  9. On the Design tab, expand the Structural list, and then drag the Repeating dynamic layout onto the work area.
  10. In the Repeating dynamic layout header, click the View properties icon.
  11. 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.

  12. 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.
  13. Click Submit.
  14. On the Design tab, expand the Structural list, and then drag the Embedded section onto the repeating dynamic layout.
  15. 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.
  16. To configure other options for the layout, follow the steps in Creating a repeating dynamic layout
  17. 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.

Related articles

Standard controlsSections

Tags

Pega Platform 8.6 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us