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.
Open your mobile channel:
In the navigation pane of
App Studio, click Channels.
In the Current channel interfaces section, click
the tile that represents a mobile channel for your app.
On the mobile channel page, on the Content tab, click
the Mobile list pages category.
Create a new mobile list page by clicking Add.
In the New page settings section, in the Page
name field, enter the name of the mobile list page.
Optional: To change the default icon of the mobile list page, select an icon from the
image catalog:
Next to the Page name field, click the current
icon.
In the Icon class picker window, select the icon
that you want to use.
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.
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.
In the List item information section, configure how the
page displays the work items:
Choices
Actions
Add a field to the work item
In the List item information section,
click Add field, and then select a
field type.
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.
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.
In the Swipe actions section, specify what happens when
users swipe across selected work items at run time:
Choices
Actions
Add a right-to-left swipe action
In the Right side actions category, click
Add action, and then select the action that
you want to add.
Add a left-to-right swipe action
In the Left side actions category, click
Add action, and then select the action that
you want to add.
Remove a swipe action
Next to the action that you want to remove, click the
Remove icon.
Change the name of the swipe action
Next to the action for which you want to change the name,
click the Click to edit configuration
icon.
In the Name field, enter a new name
for the action.
Click Submit.
Change the icon of a swipe action
Next to the action for which you want to change the icon,
click the Click to edit configuration
icon.
In the Icon section, click
Change.
In the Icon class picker window,
select the icon that you want to use.
Click Submit.
Change the swipe direction for the action
Drag 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.
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.
Click Save.
Example:
Figure: Design of a custom expense list page with swipe actions and a
floating action button
