LinkedIn
Copied!

Table of Contents

Configuring an adaptive user interface

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

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.

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.