Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Authoring mobile case pages for Cosmos React apps

Updated on March 3, 2022

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.

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

Before you begin: 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 Building forms 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:
    ChoicesActions
    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.
      For example: Add an expense summary to the Details tab by selecting AddViewsExpense 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.
      For example: Add the Pulse widget to an Activity tab by selecting AddWidgetsPulse.
    4. Click Submit.
    Remove a tabIn the row that corresponds to the tab, click the Remove icon.
    Change the order of tabsDrag the row that corresponds to the tab up or down the tab list.
    Note: 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.
Result: After users select an item from the corresponding list page, the app opens the item in the case page view that you configured.
For example: 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.

What to do next: 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 for Theme Cosmos and UI Kit mobile apps

    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 an 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 Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us