Skip to main content


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

Adaptive and responsive mobile interfaces

Updated on February 7, 2022

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.

For example:

In this example, users can see the layout only on mobile devices. You can configure adaptive settings in sections or layouts.

Sample adaptive setting
Layout visibility is set to visible when the app is used on a mobile device.

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.

For example:

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.

Sample responsive setting
Responsive settings are set to cause a UI component to become invisible when a breakpoint is reached.

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.

  • 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.

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