Skip to main content
LinkedIn
Copied!

Table of Contents

Creating a dynamic layout group

Applicable to Theme UI-Kit applications

To optimize the screen area, use 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 flexible display of content. Because the data is sourced form a Property or Data Page, the output changes when the source changes, which ensures that the information on the page is current.
  1. Search for and open an existing Section form.

  2. On the Design tab, expand the Structural list, and then drag the Dynamic layout group onto the work area.

  3. To include elements in the group, expand the Structural list, and then drag any number of dynamic layout, column, or section elements onto the layout group.

  4. Click the Dynamic layout group, and then click the View properties icon.

  5. In the 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 by pressing the Down arrow key.

      To reference nested page lists or page groups, use the following syntax: page1.page2.myArray

      If you are only prototyping, accept the placeholder property .pyTemplatePagelist.
    • To access data from a range of sources on a clipboard, select Data Page and then in the Data Page field specify the name of the page by pressing the Down arrow key.

      Use the following syntax: the name of the data page, followed by a full stop and then a property name; for example D_Products.pxResults.

  6. In the Display type field, select a format for the dynamic layout group:

    • To display layouts in collapsible headers, such as Account and Transaction Details, select Accordion.
      Only one layout from the layout group is displayed at a time. Because accordions take up less horizontal space than tabs, this option is the preferred format for tablets.
    • To display layouts as options in a menu, one at a time, select Menu.
    • To display all layouts at the same time in a list, with the layouts on top of one another, select Stacked.
    • To display a tab for each layout, one at a time, select Tab.
    • To display the layouts in a custom format that is defined in the skin, select Other, and then select the format in the adjacent field.
  7. In the Visibility field, select when you want to display the group layout:

    • Select one of the default options.
    • To create your own condition, select Condition (expression) and click the Open condition builder icon.
  8. To specify the size of headers of the items that you included inside the Dynamic layout group, select an option in the Heading Level list under Container settings for layout group items.

  9. Click Submit.

The UI Gallery landing page contains a working example of the Dynamic layout group. For more information, see UI Gallery landing page.
Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community 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
Contact us