Skip to main content

Adding items to the menu bar

Pega Community-Logo

Hinweis: Der folgende Inhalt, der von Pega Community stammt, ist hier enthalten, damit Sie die Lernziele des Moduls einfacher erreichen können.

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.

Bevor Sie anfangen: Create a mobile channel for your mobile app. For more information, see Setting up mobile apps.
  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 Navigation category.

  3. In the Navigation section, manage the items that appear on the menu bar of your mobile app:

    Hinweis: The menu bar in your mobile app displays icons and labels for up to five items. When you add a sixth item, the fifth icon and label change to the More button that groups all subsequent items.
    • To add a mobile list page, click Add items Mobile list pages , and then select the list page that you want to display on the menu bar.
    • To add a user interface page, click Add items Pages , and then select the page that you want to display on the menu bar.
    • To add an action, click Add items Actions , and then select the action that you want to display on the menu bar.
    • To remove an item, click the Remove icon on the rightmost side of the row.
    • To reorder items on the menu bar, drag the items up or down the list.
    Beispiel: To give your users an overview of their work items, you can enhance the menu bar with the Expense reports mobile list page that lists the submitted expense reports and their statuses. Additionally, you can improve the way users log out of the mobile app by adding the Log out action to the menu bar.
  4. Click Save.

Hinweis: You can see the updated menu bar on the preview in your mobile channel. At run time, your mobile app displays the items that you added on the menu bar. When users tap the icon of an item, the app displays the content of the page on the screen or triggers an action.

Navigation of the menu bar for an expense reporting app

Hinweis: Verify the changes to your mobile app with the Pega Mobile Preview app. For more information, see Previewing mobile apps.

  • Designing a new mobile list page

    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.

  • 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.

  • Learning about user interface design guidelines for mobile apps

    Ensure that your application dynamically adapts to the screen of a mobile device by following the UI design guidelines for mobile apps. This way, you can build an application with a responsive and adaptive design that works on a range of devices.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Fanden Sie diesen Inhalt hilfreich?

Möchten Sie uns dabei helfen, diesen Inhalt zu verbessern?

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

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice