Table of Contents

Article

Repeating grid and repeating dynamic layouts

The Pega 7 UI Gallery provides repeating grid and repeating dynamic layouts. These layouts help in displaying content in a grid or in a dynamic section.

The following sections explain these layouts in more detail:

Repeating grid layouts

The repeating grid layout is useful for presenting linear content (such as a report), regardless of the screen size. Users must scroll to view the complete content.

A repeating grid typically contains a certain set of elements that are displayed repeatedly based on a condition or a rule.

Image shows a report using repeating grid layout for displaying the records

An example of a repeating grid layout

Creating a page with a repeating grid layout

  1. Click Application Explorer and expand the application tree.
  2. Expand User Interface and click Section.
  3. Click Createto add a new section.
  4. On the Design tab, select expand Layout.
    Design tab of the repeating grid layout.
  5. Drag Layout to the design area.
  6. Select Grid as the layout type.
    The layout type menu displaying the list of layout options
  7. Click the Gear icon to open the layout properties.
    Grid repeat layout panel embedded in a dynamic layout.
  8. Set the Source, Applies To, Report definition, and other properties, and then click Submit.
    Layout properties for the repeating grid element

Repeating dynamic layouts

The repeating dynamic layout is useful when you want to present content that is in nonlinear format. It automatically adjusts the layout elements with respect to the screen size. This layout helps developers when creating an interface for displaying data that can be viewed on a tablet, monitor, or smartphone.

A repeating dynamic layout used to display book titles.

An example of a repeating dynamic layout

Creating a page with a repeating dynamic layout

  1. Click Application Explorer and expand the application tree.
  2. Expand User Interface and click Section.
  3. Click Create to add a new section.
  4. On the Design tab, expand Layout.
    Adding a layout to the form
  5. Drag Layout to the design area.
  6. Select Repeating Layout as the layout type.
    Layout type set to Repeating Dynamic Layout
  7. Drag Section to the repeating dynamic layout.
    Section being added for the repeating dynamic layout
  8. Click the Gear icon for the section and set the section source to any data source (page list or data page), and click OK.
    Setting values to the properties of the section

Published June 10, 2015 — Updated February 12, 2016


58% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.