Skip to main content
close Search
Close search

Responsive user interface

Responsive behavior

 

Responsive behavior provides an optimal user experience of the elements in a view regardless of screen size — minimizing horizontal scrolling and maximizing data presentation in the available display space.

responsive-behavior-gif

Responsive behavior options include the design layout of the form and the column importance in tables.

Advanced customizations to responsive behavior, such as configuring custom breakpoints and modifying column importance, are performed in Dev Studio.

Responsive breakpoints

A breakpoint defines a display width. Pega responsive breakpoints are set automatically by default. When the display width crosses a breakpoint, the responsive behavior is applied to the layout. With a dynamic layout, responsive breakpoint behavior changes the layout of the fields based on the width of the display area. 

For example, the default breakpoints automatically display four columns as two columns on a tablet, and as a single column on a mobile phone — making the form readable on smaller screen widths and eliminating the need for horizontal scrolling.

responsive-ui-loop-gif

Layout templates

In App Studio, the layout of the fields is limited to the available design templates. The design template determines how the user interface changes. You can change the layout template by configuring the view at run time. 

For example, you can configure a view to use a 2 column design template instead of a 1 column design template. 

template-change

Check your knowledge with the following interaction.

Did you find this content helpful?

Want to help us improve this content?

Suggest an edit

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice