Skip to main content

Table of Contents

Authoring mobile case pages for Cosmos React applications

Customize case pages in the low-code authoring environment to highlight the most relevant information in one, user-friendly mobile view. This way, you ensure that users can efficiently view and edit cases on their mobile devices.

In Pega Platform version 8.6, mobile features in Cosmos React applications are available only as a preview, with limited support for various interface elements and features, such as offline mode. The recommended production design system for Pega Mobile in Pega Platform is Theme Cosmos.

For more information, see Cosmos React (early adopter) and UI architecture comparison.

After you create a mobile channel for a Cosmos React application, Pega Platform automatically generates case pages that ensure a smooth and modern experience for your mobile users. You can then customize the case pages by adding views and organizing views into tabs, to best address user needs specific to your business.

Pega Platform provides several predefined views and widgets that you can add to your case page, for example, a To do view that displays a list of tasks associated with the case, or the Pulse widget that provides users with a space for exchanging case-related information. You can also add your own custom views to the case page.

Prepare the framework for your mobile case 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 content. For example, create a case type for expense reporting. For more information, see Case types.
  • If you want to add a custom view to the case page, create a view for your case type. For more information, see Creating views for case types.

The mobile channel automatically generates case pages for your app. You can configure case pages to highlight the information that best supports case workers in their tasks.

  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 Case pages category.

  3. Optional:

    To change the default case page header and subheader, in the Edit page section, select the corresponding values.

  4. In the Tabs section, configure the case page:

    Choices Actions
    Configure an existing tab
    1. In the row that corresponds to the tab, click the Edit configuration icon.

    2. In the Edit tab dialog box, configure the tab by changing the tab name or by adding or removing content.

      Add an expense summary to the Details tab by selecting Add Views Expense summary .
    3. Click Submit.

    Add a new tab
    1. Click Add.

    2. In the Add tab dialog box, enter a name for the tab.

    3. In the Content section, click Add, and then select the view or widget that you want to add to the tab.

      Add the Pulse widget to an Activity tab by selecting Add Widgets Pulse .
    4. Click Submit.

    Remove a tab In the row that corresponds to the tab, click the Remove icon.
    Change the order of tabs Drag the row that corresponds to the tab up or down the tab list.
    By placing the row as the first one on the tab list, you set that row as the default tab. You cannot remove default tabs.
  5. Optional:

    To display the Edit floating action button in the case page view, select the Show the Edit button check box.

    If you select the check box, at run time, users can edit case details from the case page view by selecting the Edit floating action button.
  6. In the upper-right corner of the page, confirm your settings by clicking Save.

After users select an item from the corresponding list page, the app opens the item in the case page view that you configured.
A mobile app developer for the uPlus company adds an expense summary and a receipt view to the default tab of an expense claim case page. This way, managers can efficiently analyze the relevant data upon opening a selected case, and then accept or reject the expense claim.

Configuration of an expense claim case page
The image shows the low-code mobile channel with configuration
                                settings for an expense report case. The case page contains the
                                following tabs: Details, Activity, and Utilities. On the right, the
                                preview displays the case page with the Details tab that contain an
                                Expense Summary and Receipt views.

Preview and test the case page on a mobile device by opening a case from the corresponding list page. For more information, see Previewing mobile apps.
  • Authoring mobile list pages

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

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

Suggest Edit
Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community 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
Contact us