Customizing a user portal in the phone preview

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:
    Choices Actions
    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.