Creating a hierarchical table layout

A Hierarchical table shows the data in an embedded Page List or a Report Definition. The layout combines the navigation strengths of a tree control with the quick-access data display of a grid and it can be styled with a custom skin; is cross-browser compatible; is sortable by column and fields; can be configured to be editable and localizable.

How to use the properties panels

You configure many elements in a Tree Grid layout using properties panels. To display the panels, turn on the wireframe, select an element, and click the Gear icon. To select an element, click the following:

  • Sections — a header label on a wire frame
  • Rows and columns — a circle next to or on top of a cell
  • Cells — inside a cell

Property fields may appear at the top of the panel, or in one or more tabs. If the panel is pinned, click Apply to apply your changes. Click the red x at the top right of the panel to close it. If the panel is not pinned, click Apply to apply your changes and continue editing, or OK to apply your changes and close the panel.

Parts of a Tree Grid layout

The layout has three areas:

  • Layout area — The framework that contains the action and repeating areas. You define the header format, header type, and overall width.
  • Action areas — The top and bottom areas in which you can place buttons or other controls linked to actions, such as Add Item, Add Child, Delete, or Refresh. The default Grid actions are stored in the template rule, pzPegaDefaultGridIcons, which you can copy and modify to create your own configurations. To remove the default actions, clear the cell.
  • Repeating area — Between the action areas the system displays information dynamically created from the data source. The first row in this area holds column headers representing the fields in the data source. The second row repeats as needed to display the requested data. The leftmost column in this row contains the hierarchy control cell, which contains controls that allow the user to display or hide data below the first display layer (for example, tasks within task groups). The right column contains the repeating data.

    You can add or remove columns, specify what fields of the data source to include in what columns, or configure the appearance of data. You can place action buttons in a repeat row to provide quick access to actions that do not require further user input such as "Quick Approve" or "Flag for Review." You can insert radio buttons or check box controls in fields in the repeating area to simplify data entry or selection of multiple rows for a bulk action

    If the source is a Report Definition, the parent nodes show the aggregated data. When the user clicks on a title or count, the Report Viewer displays details for that item. You cannot add, modify, or delete the columns. You can use a control in a cell to modify a property's appearance.
  1. Search for and open an existing Section form.
  2. On the Design tab, expand the Structural list, and then drag Hierarchical table onto the work area.
  3. In the Hierarchical table header, click the View properties icon.
  4. 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, select Property and then in the List field specify the name of the property by pressing the Down arrow key.

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

      Note: If you are only prototyping, accept the placeholder property .pyTemplatePagelist.
    • To source structured data from a report, select Report Definition and then in the Applies To field specify the class that the report applies to by pressing the Down arrow key and in the Report definition field enter the name of the report by pressing the Down arrow key.
  5. Click Submit.
Example: The UI Gallery landing page contains a working example of the Hierarchical table layout. For more information, see UI Gallery landing page.