Skip to main content

Dynamic layouts

Dynamic layouts are a type of layout that arranges items you designate, such as fields and controls, in a flexible format that automatically adjusts to screen size. Dynamic layouts support responsive behavior on various devices such as computers, tablets, and phones. As screen sizes change, dynamic layouts shift on-screen content by wrapping elements to the next line. Wrapping eliminates the need for horizontal scrolling on smaller screens.

Note: Dynamic layouts are available only to user interfaces rendered in the HTML5 document type. Applications created before Pega 7.0 might not be using the latest dynamic features of the Pega PlatformTM user interface. You can use the HTML5 Application Readiness landing page to update your application. For more information on the HTML5 Application Readiness landing page, see the help topic HTML5 Application Readiness landing page.

Check your knowledge with the following interaction.

Design templates for dynamic layouts

Design templates are pre-formatted layouts. Many design templates provide common formatting for dynamic layouts, such as organizing content into one, two, or three columns. Each design template divides a layout into one or more regions. A developer can place fields into each region to quickly organize the content of a view. When the design template is based on a dynamic layout, a change to the screen size can rearrange the contents of the view.

Note: A small number of design templates provide formatting for layouts other than dynamic layouts.

The following image contains some examples of design templates provided by Pega.

out-of-the-box layout templates

Each view can contain one design template. You can combine smaller, modular views into one larger view to mimic the use of multiple templates in a single view.

For example, a customer information view contains home and invoice address information. The default template for the view is 1 Column but the stakeholders say they want to see two columns — one column for the home address and the other column for the invoice address.

Later, stakeholders decide that the customer information should be broken up to prevent the need to scroll to access all the fields. They request an additional change — show the customer state or province and telephone number grouped in a separate column with the other home address information. A developer creates a view for the home address using the 2 Column template, then references this view in the first column of the original view, which also uses the 2 Column template. The result is a template within a template.

In the center of the following image, slide the vertical line to see the transition from a 2 Column template to a 2 Column template with a 2 Column template inserted into the first column.

 

Check your knowledge with the following interaction.

If you are having problems with your training, please review the Pega Academy Support FAQs.

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