Skip to main content


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

Working with dynamic layouts

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

A new set of standards-based layouts enable you to provide an optimal user experience on a desktop, tablet, and phone.

The following layouts, available to applications rendered in HTML 5 document type (standards mode) are styled entirely in the skin. Since presentation, including responsive breakpoints, is defined in the skin, you can separate content from presentation, ensuring greater consistency and promoting reuse.

  • Screen layouts
  • Dynamic layouts
  • Column layouts

You can also define responsive behaviors for these layouts that adjust the layout based on screen size and/or device type.

Note: Dynamic layouts are available only to user interfaces rendered in HTML 5 document type (standards mode). For more information, see Upgrading an application to render in HTML5 document type.

Selecting a screen layout

Select a screen layout format to determine the overall structure of your harness.

For example, you may choose the Header Footer Left format, which provides a header, a left column, a center panel, and a footer. There are multiple screen layout formats available in the skin.

Screen layouts adjust to the available screen space and replace the deprecated panel set layout.

See Adding a screen layout.

Building sections using dynamic layouts and column layouts

Populate your screen layout with sections. As a best practice, build sections using dynamic layouts and column layouts. Add content such as properties, controls and other sections to a dynamic layout and to column layouts within a section. Set the presentation of that content using formats specified in the skin.

The formats in the skin determine the width of the layout and the arrangement of items in the layout; for example, inline, stacked, or inline within a grid. They define placement and alignment of items and labels, including spacing between items.

Dynamic, column, and screen layout formats also specify responsive breakpoints-screen widths that trigger a change to the presentation of the content. For example, at a certain width, a layout displays as stacked rather than inline, or is hidden and is accessible via an icon.

See Adding a Dynamic Layout and Adding a Column Layout.

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