Skip to main content


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

Previewing a portal

Updated on December 13, 2022
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.

Note: 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.
    Result: Different preview shapes indicate the screen size for every device.
  3. Display the application preview for a device by clicking that device icon.
    Note: 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.
For example: The following visualization shows how to preview a portal at run time.
Sample visualization that shows how the portal looks on different types of devices.
  • 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.

  • Adding, editing, and deleting a preview device

    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.

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