Skip to main content


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

Creating a dynamic layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Reduce UI maintenance and development efforts by using dynamic layouts, which display content flexibly while separating content and presentation. When you add UI elements to a dynamic layout, the layout's format automates the alignment of fields and labels, and saves you manual work.

For example, you want to create a footer for your application that holds general information about your company. You want the footer to have two columns, a header, and use a custom Footer container style format. You also want the footer to disappear on mobile devices. For this purpose, you create a custom IsMobile condition. You can now use the style and the condition to create and configure a dynamic layout to build this interface element with less effort.

Note: The UI Gallery landing page contains a working example of the Dynamic layout, which you can use as a reference or copy directly to your application. For more information, see Accessing the UI Gallery.
Sample dynamic layout – inline grid double
An example of a dynamic layout that is grouped into two columns
Before you begin: Create or identify a section in which to nest your layout. For more information, see Creating sections.
Dynamic layouts are DIV-based. If your section uses a template, the template that you select controls the layouts for you. However, if you build your UI with the full section editor, you need to configure the dynamic layout manually. This approach provides more flexibility, but might require more experience during updates.
  1. Search for and open an existing section.
  2. If the section is based on a template, in the header of the section editor, click convert to full section editor, and then confirm the conversion.
  3. On the Design tab, expand the Structural list, and then drag the Dynamic layout onto the work area.
  4. In the Dynamic layout header, click the View properties icon.
  5. In the Dynamic layout properties window, on the General tab, specify the layout settings:
    1. In the Layout format list, select how the layout arranges its contents.
      For example: Group content into two columns by selecting Inline grid double.
    2. In the Container format list, define the look of the layout.
      For example: Apply a custom format by setting Container format to Other, and then selecting Footer in the adjacent field. For more information, see Styling a layout.
    3. Optional: To define when the layout contents are refreshed, next to the Refresh condition field, click the Open condition builder icon, and then build a conditional expression.
    4. In the Visibility field, select when you want to display the Dynamic layout.
      For example: Set Visibility to Condition (expression), and then select IsMobile in the adjacent field.
    5. Optional: To prevent the layout from loading its content on initialization of the page, select Defer load contents.
    6. Select Display header and title, and then complete the Container settings section.
      For example: In the Title field, select Text, and then enter About the Company in the adjacent field.
    7. Click Submit.
  6. On the section form, click Save.
What to do next: Depending on your business needs, you can now further customize the look of the layout. For more information, see Modifying the presentation options of the dynamic 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