Skip to main content


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

Creating a dynamic layout group

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Optimize the window area by using a Dynamic layout group. In this way, you can modularize closely related information and present all the relevant data to the application users at run time.

Dynamic layout groups provide a flexible display of content. Because the data is sourced from a property or data page, the output changes when the source changes, which ensures that the information on the page is current.

For example, you want to create a tabbed interface that displays the employees in your company, in which each tab represents a different department. For this purpose, you create a D_Employees data page.

Note: The UI Gallery landing page contains a working example of the Dynamic layout group, which you can use as a reference or copy directly to the application. For more information, see Accessing the UI Gallery.
Before you begin: Create or identify a section in which to nest your layout. For more information, see Creating sections.
  1. Search for and open an existing section.
  2. If the section is based on a template, in the section editor header, 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 group item onto the work area.
  4. In the Dynamic layout group header, click the View properties icon.
  5. In the Layout group properties window, in the Source field, specify the source of the data for the dynamic layout group:
    • To source the data from a page list or page group, select Property, and then, in the List/Group field, specify the name of the property.
    • To access data from a range of sources in a clipboard, select Data Page and then, in the Data Page field specify the name of the page.
    For example: Select Data page, and then, in the Data page field, enter D_Employees.
  6. On the General tab, specify the layout settings:
    1. In the Display type field, select a format for the dynamic layout group.
      For example: Group content into tabs by selecting Tab.
    2. In the Container format list, define the look of the layout.
      For example: Apply the default formatting that you defined in the skin by setting Container format to Default. For more information, see Styling a layout.
    3. In the Visibility field, select when you want to display the Layout group.
      For example: Make the layout visible to all users by setting Visibility to Always.
    4. In the Caption section, select what kind of text you want to use, and then complete the Settings section.
      For example: In the Caption field, select Label, and then, in the Label field, enter Employees by department.
    5. In the Heading level field, define the type of the header that you want to use for the layout.
    6. Optional: To define additional layout behavior, select the check boxes that represent specific personalization settings.
      For example: To enable the tabs to adjust their size to content, select Enable stretch for tabs.
  7. Optional: To specify custom CSS behavior, on the Presentation tab, select the Display advanced presentation options check box, and then define the settings by performing any number of the following actions:
    • To display the layout group below other floated layout groups within the container in which the group is hosted, select the Clear floated layouts check box.
    • To define the inline style for the layout, in the Inline style (not for production use) field, enter CSS code.
      Note: Entering inline style produces a guardrail warning. For maintainability and reuse, use a custom CSS class. For more information, see CSS helper classes.
    • To specify the styling of the layout container, in the Content CSS class list, select a predefined class or click the Open class editor icon to see a list of available helper classes.
  8. Click Submit.
  9. On the section form, click Save.

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