Adaptive and responsive mobile interfaces
Adaptive and responsive interfaces help your application successfully reach users through a variety of channels. By using Pega Platform features to build an adaptive and responsive interface, you can ensure that your application displays correctly on any mobile device.
Adaptive interfaces
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
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.
Best practices
Using design templates and dynamic layouts is a best practice for building adaptive, mobile-ready interfaces. For more information, see Creating views for case types and Creating a dynamic layout.
Configuring an adaptive user interface
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.- 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
Improve the clarity and usability of your application on mobile devices by defining how the user interface behaves on smaller screens.
In a responsive layout, how much content is displayed depends on the screen size. For example, you can configure a product image to appear in full size on a desktop computer, but reduce its size for tablets and hide the image completely on mobile phones. This way, you can save screen space and ensure that users with smaller devices do not have to scroll through unnecessary information. To define the screen size range for each interface configuration, you set up responsive breakpoints.
- 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 check box.
- 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.
Previous topic Designing the user interface of mobile apps Next topic Developing mobile apps