LinkedIn
Copied!

Table of Contents

Adaptive and responsive mobile interfaces

Version:

Only available versions of this content are shown in the dropdown

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.

Sample adaptive setting

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.

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.

Related Content

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.