Adaptive interfaces change how they display UI components in a view depending on the user's device. For example, if your application uses a complex chart that cannot fit on a mobile screen, the system hides the chart to save screen space and prevent a frustrating experience.
Pega Platform offers various out-of-the-box conditions that you can use to build adaptive logic, such as pyIsMobile, which evaluates to true on mobile devices.
In this example, users can see the layout only on mobile devices. You can configure adaptive settings in sections or layouts.
Responsive interfaces change the visual representation of a view based on the form factor, and do not require any additional conditions. While you set up adaptive interfaces by defining view rendering logic, you configure responsive interface behaviors in the CSS file of your application.
In this example, when the interface reaches a certain breakpoint, for example a minimum screen size, the UI component becomes invisible. You can configure responsive settings in the skin of the application.
Configuring an adaptive user interface
- Open the view that you want to edit.For more information, see Accessing views in your application.
- 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.
- In the Visibility list, select Condition (when rule).
- 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.
- In the configuration pane, click Apply.
Configuring a responsive user interface
- In the header of Dev Studio, click the name of the application, and then click Skin.
- On the Component styles tab, on the left side of the Dynamic Layouts header, click the More icon.
- In the Layouts list, click the layout that you want to edit.
- In the layout pane, in the list of available formats, select the format that
you want to edit:
- To select a custom format, on the My Formats tab, click the target format.
- To select an inherited format, on the Inherited tab, click the target format.
- In the format settings panel, expand the Responsive breakpoints node, and then select the Enable support for responsive breakpoints checkbox.
- If no breakpoints are defined for the layout, click Add breakpoint.
- Under the breakpoint header, select the behavior that you want to trigger with
the breakpoint:The available settings depend on the type of layout.
- To hide columns with importance that is set to Other, select Drop columns with importance 'other'.
- To transform the layout to a list, select Transform to list.
- To hide the layout, select Hide this component.
- To transform the layout, in the At the settings below switch layout to list, select the alternative layout that you want to use.
- To transform the layout to another format, select Transform to other format, and then select the format that you want to use.
- In the Media type list, select the type of display to which you want to attach the breakpoint.
- In the max-width field, define the maximum screen width
that triggers the breakpoint behavior.For mobile apps, define the trigger width in percent.
- Optional: To define the minimum screen width that triggers the breakpoint behavior,
complete the min-width field.For mobile apps, define the trigger width in percent.
- Click Save.