Skip to main content


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

Authoring mobile list pages

Updated on February 23, 2022

Improve the responsiveness and load time of the user interface in your mobile app by displaying the content of your app as a mobile list page. This way you enhance your mobile app with a native screen that has fluent transitions and a search bar in the header by default.

For example, you can create a native mobile list page that displays all expenses in the Lodging category. A manager who uses your mobile app can search for a specific employee name to get results that include all the lodging expenses of that employee.

Before you begin: Prepare the framework for your mobile list page:
  • Create a mobile channel for your mobile app. For more information, see Setting up mobile apps.
  • Ensure that you have a case type that you can use to populate the page screen. For example, create a case type for expense reporting. For more information, see Case types.
  • If you want to add custom swipe actions for the users to perform on list items, configure a case-wide action first. For more information, see Adding optional actions to cases.
  1. Open your mobile channel:
    1. In the navigation pane of App Studio, click Channels.
    2. In the Current channel interfaces section, click the tile that represents a mobile channel for your app.
  2. On the mobile channel page, on the Content tab, click the Mobile list pages category.
  3. Create a new mobile list page by clicking Add.
  4. In the New page settings section, in the Page name field, enter the name of the mobile list page.
  5. Optional: To change the default icon of the mobile list page, select an icon from the image catalog:
    1. Next to the Page name field, click the current icon.
    2. In the Icon class picker window, select the icon that you want to use.
  6. In the Case type list, select the case type that supports your business process.
    For example: For a mobile list page where users submit expenses in different categories, such as the Lodging category, select the expense reporting case type.
  7. In the Data view list, select the list data source that you want to use to populate the page screen.
    For example: Select the data view that stores all expense reports from the Lodging category.
    Note: When you create a case type, Pega Platform automatically creates a list data source, which you can use in mobile list pages.
  8. In the List item information section, configure how the page displays the work items:
    ChoicesActions
    Add a field to the work item
    1. In the List item information section, click Add field, and then select a field type.
    2. In the list next to the field, select the property that you want to use to populate the field at run time.
    Remove a field from the work itemIn the List item information section, next to the field that you want to remove, click the Delete this row icon.
    For example: You can use the following field and property configuration to display the page with expense reports:
    • For the Primary field, select the Label property that defines the report name.
    • For the Secondary field, select the Amount property that defines the total amount of the expense.
    • For the next Secondary field, select the Create Date/Time property that defines the date and time when the expense is submitted.
    • For the next Secondary field, add a custom property that defines the category of the expense, such as Lodging.
    • For the Status field, select the Work status property that defines the status of the report.
  9. In the Swipe actions section, specify what happens when users swipe across selected work items at run time:
    ChoicesActions
    Add a right-to-left swipe actionIn the Right side actions category, click Add action, and then select the action that you want to add.
    Add a left-to-right swipe actionIn the Left side actions category, click Add action, and then select the action that you want to add.
    Remove a swipe actionNext to the action that you want to remove, click the Remove icon.
    Change the name of the swipe action
    1. Next to the action for which you want to change the name, click the Click to edit configuration icon.
    2. In the Name field, enter a new name for the action.
    3. Click Submit.
    Change the icon of a swipe action
    1. Next to the action for which you want to change the icon, click the Click to edit configuration icon.
    2. In the Icon section, click Change.
    3. In the Icon class picker window, select the icon that you want to use.
    4. Click Submit.
    Change the swipe direction for the actionDrag the selected action to the corresponding swipe direction category.

    For example, to change the swipe direction to right-to-left, drag the action to the Right side actions category.

    Change the order of the swipe actions
    Note: This option is available if you add more than one action for a swipe direction.
    Drag the selected action up or down the swipe direction list.
    Tip: Ensure that the more important action for your page is displayed closest to the edge of the screen to make the item more accessible to the users of your mobile app.
    For example: For a page with expense reports, you can configure the following swipe actions:
    • In the Right side actions category, add an Edit details action so that users can edit selected expense reports by swiping left.
    • In the Right side actions category, add an Attach file case-wide action so that users can attach files, such as an invoice, to selected expense reports by swiping left.
    • In the Left side actions category, add a Follow action so that users can start receiving notifications about a selected expense report by swiping right.
  10. Optional: To add a floating action button that creates a new work item when users tap the button, select the Show create item button check box.
    The floating action button is a button that appears at the bottom of the page in the mobile app.
    For example: For the mobile list page with a list of expense reports, the floating action button creates a new expense report.
  11. Click Save.
For example: A mobile app developer designs a list page for the uPlus expense reporting app that enables users to scroll through expenses and examine the most relevant information, such as expense label and type.
Design of a custom expense list page with swipe actions and a floating action button
Configuration of the source, display of list items, swipe actions, and a floating action button for a mobile list page.
What to do next: Add your mobile list page to the menu bar, and then verify the changes to your mobile app. For more information, see Adding items to the menu bar and Previewing mobile apps.
  • Adding a search gadget

    Improve the usability of your mobile app by configuring and enabling the search functionality. You can guarantee more meaningful search results and increase search speed by limiting the scope of searches to specific case types.

  • Adding a floating action button

    Promote the most important action on a page by adding a floating action button to your mobile app. For example, you can add a floating action button that starts a case flow for creating a new expense report in your Expenses mobile app.

  • Adding items to the menu bar

    Create an effective navigation experience in your mobile app by adding pages and actions to the menu bar. For example, you can add a custom profile page to the menu bar of your Expenses app so that users can conveniently access the screen with their basic contact information.

Tags

Pega Platform 8.5 Mobile

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