Skip to main content
LinkedIn
Copied!

Table of Contents

Previewing a portal

Applicable to Cosmos React and Theme Cosmos applications

Preview a portal that you develop to verify that different types of devices, such as a desktop computer or a tablet, correctly display the user interface.

Device preview is not a substitute for application tests on an actual device.
  1. In App Studio, click Preview, and then select a portal that you want to preview by clicking the portal list next to the application name.

  2. In the navigation pane of App Studio, check the preview size by hovering over the monitor and tablet icons.

    Different preview shapes indicate the screen size for every device.
  3. Display the application preview for a device by clicking that device icon.

    When you preview a web portal on a mobile device, App Studio displays it in a mobile browser. The browser interface is different from a Mobile Client channel, which is a separate, mobile-native interface.
  4. For tablets, toggle the viewing modes:

    1. Switch between landscape and portrait modes by clicking the device icon again.

    2. Preview the app for a specific mobile device, in the drop-down list next to the device icons, select a device model.

      You can edit the list of devices in Dev Studio. For more information, see Adding, editing, and deleting a preview device.

Adding, editing, and deleting a preview device

Applicable to Cosmos React and Theme Cosmos applications

To preview how a specific device, such as a phone or a tablet, displays your application, modify the list of devices for which you can generate a preview. If you have access to Dev Studio, you can add a new device to the list, edit an existing device in the list, or delete a device from the list.

Ensure you have access to Dev Studio.
  1. In the navigation pane of Dev Studio, click Data types.

  2. Click Options Add data type .

  3. In the Add data type dialog box, click Existing data type.

  4. In the Label field, enter Device, and then select the Pega-DevicePreview-Device rule.

  5. Click Submit.

  6. In the Pega-DevicePreview-Device rule, click the Records tab, and then update the device list:

    • To add a device, click Add record at the bottom of the list, enter the device details, and specify the user-agent string for the device browser.
    • To edit an existing device, select and edit the fields that you want to change.
    • To delete a device, click the Delete icon next to the device that you want to remove from the list.
    The device information is saved automatically when you navigate away from the editable fields.
The device list for app previews shows the changes that you made.

Related Content

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