Configuring the bottom bar

Enhance the usability of your mobile app by configuring the bottom bar, for example, to enable instant navigation between application screens, so that users can switch between multiple open cases without reloading the content or losing unsaved changes. Also, modify the bottom bar to let users create a case, display a menu, or log out of the application directly from the bottom bar.

Pega Platform stores bottom bar definitions in navigation rules, where you add or modify screens and actions by adding or editing navigation rule nodes.

When you create a new navigation rule with a bottom bar definition and save a mobile channel with the new navigation rule, the bottom bar definition is created as a new portal with the same name as the mobile channel. Each new bottom bar definition appears in the portal record as a new portal instance with a duplicate. Do not delete the duplicate.

Note: Mobile apps that are based on the Pega Mobile Client do not support the navigation rule definition for the bottom bar.
Before you begin: Ensure that you have performed the following tasks:
  1. When the navigation rule opens, you can modify its settings or create a new navigation rule instance:
    • To create a new navigation rule, go to the next step.
    • To modify the existing rule, go to step 3.
  2. Create a new navigation rule:
    1. In the navigation rule tab, click Save as.
    2. On the New form, enter a name and identifier for the navigation rule.
    3. In the Context area, select your application, and then click Create and open.
  3. On the Editor tab, select the Validate for mobile bottom menu usage check box, and then select the nodes that you want to display on the bottom bar:
    • To edit the node, in the Label column, double-click the node.
    • To delete the node, click the node, and then click Delete, and then go to step 10.
    • To add a node, click Add above or Add below.
  4. On the General tab, in the Label field, enter a label for the node.
  5. In the Image Source field, select Icon Class, and then choose an icon for the node.
  6. In the Badge Format field, select Standard (label for field).
  7. On the Actions tab, click Add an action, and then click All actions.
  8. Choose and configure an action that you want to occur when the user taps the bottom bar button:
    • To display a harness, choose Harness, in the Target field, select New document, and then enter the tab name and the harness name.
    • To create work, choose Create work, in the Target field, select Default, and then enter the class name and the flow name.
    • To get next work, choose Get next work, and then in the Target field, select Default.
    • To open an assignment, choose Open assignment, in the Target field, select Default, and then enter the key that uniquely identifies the work item.
    • To open work by handle, choose Open work by handle, in the Target field, select Default, and then enter the handle of a work item, beginning with the class name.
    • To open a work item, choose Open work item, in the Target field, select Default, and then enter the full identifier of a work item.
    • To display a menu, choose Menu, in the Content field, select the menu that you want to display, ant then in the Format field, select Mobile menu.
    • To log out the user, choose Log off.
    • To run a script, choose Run script, in the Function Name field, enter the property or literal reference that contains the function that you want to run. Optionally, in the Parameters section, define the properties of the Run script action.
    Note: Every time that the user taps a bottom bar button, Pega Mobile Client initiates the action that is configured for the navigation rule node.
  9. Define additional parameters for the action, for example, define a transition to display a skeleton before a work item is displayed.
    For more information about the meaning of parameters that you configure for each of the actions, see Available actions and conditions.
  10. Save your changes by clicking OK in the node configuration section.
  11. Click Save.
What to do next: Make the bottom bar portal available to application users: open the User access group for the application, and then add the new portal to the Available portals list.