Close popover

Table of Contents

Designing a new mobile list page

Version:

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 with all lodging expenses of that employee.

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 that handles expense reporting. For more information, see Creating a top-level case type.
  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 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 icon.

    2. In the Icon class picker window, select the icon that you want to use.

  6. In the Case type field, select the case type that supports your business process.

    For a mobile list page where users submit expenses in different categories, such as Lodging, select the expense reporting case type.
  7. In the Data view field, enter the list data source that you want to use to populate the page screen.

    Select the data view that stores all expense reports from the Lodging category.

    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:

    Choices Actions
    Add a field to the work item
    1. In the List item information section, click Add field.

    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 item In the List item information section, next to the field that you want to remove, click the Delete this row icon.
    You can use the following field and property configuration to display the page with expense reports:
    • For the Primary field, add the Label property that defines the report name.
    • For the Secondary field, add the Amount property that defines the total amount of the expense.
    • For the next Secondary field, add the Create Date/Time property that defines the date and time when the expense was submitted.
    • For the next Secondary field, add a custom property that defines the category of the expense, such as Lodging.
    • For the Status field, add the Work status property that defines the status of the report.
  9. In the Swipe actions section, configure the swipe actions that users can perform on the work items at run time:

    Choices Actions
    Remove a swipe action Next to the action that you want to remove, click the Delete this row icon.
    Add a swipe action Click Add action, and then select the action that you want to add.

    You can use only the following default swipe actions in mobile list pages:

    Follow
    Subscribes for updates that are related to the work item, such as status changes or Pulse messages.
    Edit
    Opens the work item so that users can edit it.
    Change the swipe direction
    1. Next to the action for which you want to change the swipe direction, click the Switch to edit mode icon.

    2. In the Edit settings window, in the Swipe direction section, select the swipe direction that you want to use for the action.

    3. Click Submit.

      If you set the same swipe direction for both actions, ensure that the more important action for your page is displayed closest to the edge of the screen to make it more accessible to the users of your mobile app.
    Change the icon of a swipe action
    1. Next to the action for which you want to change the icon, click the Switch to edit mode icon.

    2. Next to the Icon field, click Change.

    3. In the Icon class picker window, select the icon that you want to use.

    4. Click Submit.

  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.

    For the mobile list page with a list of expense reports, the floating action button creates a new expense report.

    Floating action button is a button that appears at the bottom of the page in the mobile app.

  11. Click Save.

Design of a custom expense list page with swipe actions and a floating action button

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 the speed of the search by limiting the scope of the search 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 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.

Have a question? Get answers now.

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