Skip to main content


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

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Customizing a user portal in the phone preview

Updated on April 5, 2022

Customize the look and feel of your application by editing the sections of various pages directly from the phone preview of a user portal.

You can change the settings of all sections and add, edit, or reorder fields and buttons.
Before you begin: Ensure that your application is upgraded with the Cosmos Design System to customize a portal in the phone preview.

When you preview a user portal on a mobile device, App Studio displays it in a mobile browser.

Note: The browser interface is different from a Mobile Client channel, which is a separate, mobile-native interface.

Most modifications to a user portal from the preview mode for desktop and mobile devices carry over to the mobile app. The following features are fully native to mobile apps and are separately configured:

  • Global search
  • Navigation UI
  • The My Work list page
  1. In the header of App Studio, prepare the phone preview:

    1. In the portal list next to the application name, click User Portal.

    2. Click the Phone preview icon.

    3. Optional:

      To choose a specific phone model, select the model from the list of phones next to the phone preview icon.

  2. Customize your portal:

    ChoicesActions
    Customize the case details
    1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.

    2. Enter the design mode by clicking Design in the upper-right corner.

    3. Customize the case details.

      For more information, see Customizing the case details section.

    Customize the Home page
    1. In the bottom navigation bar of the phone preview, click Home.

    2. Enter the design mode by clicking Design in the upper-right corner.

    3. Hover over a Home page section, and then click the Edit this section icon.

      For example: You can perform the following actions:
      • Modify the settings of a given section.
      • Add more fields or buttons to the available sections. For more information, see Adding buttons to the case action header.
      • Edit the existing fields and buttons.
      • Reorder the displayed fields or buttons.
    Customize other available pages
    1. In the bottom navigation bar, click More.

    2. From the list of pages, select a page.

    3. Enter the design mode by clicking Design in the upper-right corner.

    4. Hover over the required section of the selected page, and then click the Edit this section icon.

      For example: You can perform the following actions:
      • Modify the settings of a given section.
      • Add more fields or buttons to the available sections. For more information, see Adding buttons to the case action header.
      • Edit the existing fields and buttons.
      • Reorder the displayed fields or buttons.

  • Designing your user interface

    Before you start creating the user interface in your application, learn about the available tools, best practices, and basic principles that drive user experience design.

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