Skip to main content


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

Configuring an adaptive user interface

Updated on February 7, 2022

Ensure that your application offers a consistent user experience even on small mobile screens by configuring an adaptive UI. Adaptive interfaces change what they display depending on the user's device.

For example, the interface in a takeout service application might include a large map showing all restaurants in the area. With an adaptive UI, you can choose to hide the map on mobile devices to save screen space and reduce scrolling. The adaptive logic can be applied to both entire views (layouts) and individual UI components, such as controls.
  1. Open the view that you want to edit.

    For more information, see Accessing views in your application.
  2. Open the settings for the target UI area:

    • To configure a view, in the configuration pane on the right side of the screen, click Settings.
    • To configure a control, in the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
  3. In the Visibility list, select Condition (when rule).

  4. In the Condition for visibility field, define how the component behaves in a mobile interface:

    • To make the component visible only on mobile interfaces, enter pyIsMobile.
    • To hide the component on mobile interfaces, enter !pyIsMobile.
  5. In the configuration pane, click Apply.

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