Skip to main content

Creating a repeating dynamic layout

Pega Community logo

Note: The following content, referenced from Pega Community, is included here to help you better achieve the module learning objectives.

Applicable to Theme Cosmos applications

Save development time by automating the display of repetitive data records with a Repeating dynamic layout.

For example, you can use a Repeating dynamic layout to arrange data about company employees into a series of standardized cards that display the name, position, and an ID image of each employee. The Repeating dynamic layout format is very flexible and supports sorting, editable fields, and progressive data load.
Before you begin: Create a list-based data source to reference from the layout. The Repeating dynamic layout can use a data page, a page list, or a page group as a data source. For more information, see Creating a data page and Properties.
  1. In the navigation pane of Dev Studio, click Case types, and then click the case type that you want to open.
  2. Run a new case by clicking Save and run.
  3. In the new case, navigate to the layout that you want to edit.
  4. In the footer of Dev Studio, click the Live UI icon. Result: The Live UI tool is activated. You can now inspect user interface components in real time.
  5. Click the layout that you want to edit, and then click the Open in Dev Studio icon.
  6. If your section is based on a template and cannot be edited, click Convert to full section editor.
  7. On the Design tab, expand the Structural list, and then drag the Repeating dynamic layout onto the work area.
  8. In the Repeating dynamic layout header, click the View properties icon.
  9. In the Repeating dynamic layout 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 on a clipboard, select Data Page, and then in the Data Page field specify the name of the page that you want to reference.
  10. Specify the look and behavior of the layout:
    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 the name of the format 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.
    5. Optional: To prevent the layout from loading its content on initialization of the page, select Defer load contents.
    6. In the Caption row, select the type of text you want to display above the layout, and then complete the Settings section.
  11. In the Pagination section, define when the application loads new rows of the layout. For example: Select Progressively load on scroll, and then set the Page size to 20 to load 20 rows of new data whenever the user scrolls to the end of the list.
  12. In the Accessibility node, define settings that help users with different levels of abilities to navigate the layout:
    1. In the Label field, enter the name of the layout for the screen reader.
    2. Optional: To switch to Tab-key navigation, select the Use form navigation (by tab) check box.
      By default, users navigate a Repeating dynamic layout by using the arrow keys.
  13. Click Submit, and then click Save.
  • Repeating dynamic layout - Operations tab

    Click the View properties icon in a repeating dynamic layout header to display the Properties panel, and then select the Operations tab. The Operations tab sets the default behavior configuration for a dynamic layout, determining how users view the properties displayed in the layout.

  • Configuring drag-and-drop functionality for list items

    Configure repeating dynamic layouts so that users can reorder items within and between lists. By adding drag-and-drop functionality to your lists, you create an interactive user interface where users can modify content to match their business needs.

  • Configuring swipe actions for a mobile app

    To help users complete their tasks quickly without leaving the main screen of a mobile app, configure swipe actions for repeating dynamic layouts. Swiping in a row in a mobile app opens a menu of available actions, such as Edit or Delete.

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