Table of Contents

How to display row details in expanded panes in a repeating grid

Summary

Using PRPC 6.3, you can display the details of one or more grid rows in an expanded pane. You can configure the expanded pane to display when an event occurs on a row or when the user interacts with an actionable control, such as an icon or link, placed anywhere in the row.

This article describes how to configure grids to expand:

Note: Expand Pane and Embedded Pane Edit Modes are different. Repeat grids using Expand Pane display row details underneath the selected row and can display single or multiple expanded panes. Repeating layouts using Embedded Pane can display row details in other locations, such as outside of a row, and can display only the details of a single row. This article describes Expand Pane. For information on embedded panes, see How to present repeating rows as an embedded pane.

To interact with a sample, select Pega Button> User Interface User Interface> UI Gallery UI Gallery, and select Expand Pane in the Repeating Layouts group.

Suggested Approach

The Expand Pane Edit Mode enables users to view additional details of a row in a grid, as necessary. You may want to enable multiple expanded panes when users need to compare the details of two or more rows of data.

Displaying Multiple Expanded Panes (Expand/Collapse Column)

You can enable users to view details of multiple rows simultaneously by clicking the expand/collapse icon in the far-left column, as shown:

Expand icon

You can specify the Expand and Collapse icons that you want to display in this column in the Skin rule (Layouts>Repeat Tree/Grids>Rows>Expand Pane Icons).
Expand and Collapse icons in Skin rule

To enable users to view details of multiple rows simultaneously by clicking in the expand/collapse column:

  1. Open the section containing the repeating layout and click magnifying glass to open the Repeat Grid panel.
    Repeat Grid
  2. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
    Specify Expand Pane Edit Mode
  3. Specify the flow action that you want to display in the expanded pane.
    Specify Flow Action
  4. Select the Expand/Collapse Column and Expand Multiple Rows checkboxes.
    Select Expand/Collapse Column and Expand Multiple Rows
      • Expand/Collapse Column: displays an expand/collapse icon in the left-most column of the repeating area. You can specify this icon in the Skin rule.

        Expand Icon
         
      • Expand Multiple Rows: enables users to view the details of more than one row at a time. (This option is not available for Work- or Assign- classes.)
  5. Save the section.
  6. Test your configuration by running the flow and clicking an item in the grid. Row details display in an expanded pane underneath the selected row. Click another item in the grid. A second detail pane opens.

    Multiple Panes Expanded

Tip: You may want to configure keyboard navigation within the repeating grid. To do this, click magnifying glass beside the Edit Mode, and then add the following Keyboard events:
Configure Keyboard Navigation

To add a Keyboard event, click insert row, select Keyboard in the Event drop-down, and then select the desired action.
Configure Keyboard Event 

back to top

Displaying Multiple Expanded Panes Using a Custom Link or Icon

You can enable users to view details of multiple rows simultaneously by clicking a custom link or icon, located anywhere in the row. For example, a custom show/hide link displays in the far-left column of the following grid:

Custom Show/Hide Link

Note: In this example, a custom show/hide link is positioned in the far-left column of the grid. If you want to position an icon in the far-left column, an alternative to custom configuration is to select the Expand/Collapse Column checkbox and specify the custom expand and collapse icons in the Skin rule. If you want to position an icon in a column other than the far left, you must configure a custom icon as described below.

To enable users to expand multiple panes by clicking a custom link or icon:

  1. Create a section containing two layouts: one for the custom expand link and another for the collapse link.
  2. For the layout containing the expand link, set the Visible When condition to .pyExpanded!=true.
    Expand Icon Visible When
  3. For the layout containing the collapse link, set the Visible When condition to .pyExpanded=true.
    Collapse Icon Visible When
  4. Add a column to the repeating grid and include the section containing the expand and collapse links, in this case, pxExpandPaneLink.
    Add Column to Repeat Grid
  5. Set the Refresh When condition to .pyExpanded Changes.
    Refresh When
  6. Click magnifying glass to open the Repeat Grid panel.
    Repeat Grid
  7. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
    Specify Expand Pane Edit Mode
  8. Specify the flow action that you want to display in the expanded pane.
    Specify Flow Action
  9. Clear the Expand/Collapse Column checkbox. (This setting determines if the expand and collapse icons specified in the Skin rule display in the far left column of the grid. Since you specified a custom link, clear this checkbox.)
  10. Select the Expand Multiple Rows checkbox.
    Select Expand Multiple Rows
  11. Click the magnifying glass beside the Expand Pane Edit Mode to view and configure grid events and actions. The following events are set automatically; click insert row to configure keyboard events, if desired.
    Add Keyboard Events
  12. Save the rule and run the process. Click a link in the grid to view the details of the selected row. Click another link. The row details display in an additional expanded pane.

back to top

Displaying a Single Expanded Pane

You can restrict users to expanding the details of only a single row at a time by clicking the expand/collapse icon in the far-left column, as shown:

Expand Icon

You can specify the Expand and Collapse icons that you want to display in this column in the Skin rule (Layouts>Repeat Tree/Grids>Rows>Expand Pane Icons).

To enable users to view the details of a single row by clicking in the expand/collapse column:

  1. Open the section containing the repeating layout and click magnifying glass to open the Repeat Grid panel.
    Repeat Grid
  2. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
    Specify Expand Pane Edit Mode
  3. Specify the flow action that you want to display in the expanded pane.
    Specify Flow Action
  4. Select the Expand/Collapse Column checkbox. Make sure that the Expand Multiple Rows checkbox is not selected.
    Select Expand/Collapse Column
  5. Save your changes and run the process. Click an icon in the grid to view the row details in an expanded pane. Click the icon again to collapse the expanded pane, or click an icon in another row to collapse the current expanded pane and open the details of the selected row in a new pane. Only one detail pane is visible at a time.
    Example of expanding a single pane using the Expand/Collapse Column

back to top

Displaying a Single Expanded Pane Using a Custom Icon

You can enable users to view the details of a single row by clicking a custom icon, located anywhere in the row, as shown:

Custom Icon in right column

To enable users to view the details of a single row by clicking a custom icon:

  1. Create a section containing two layouts: one for the custom expand icon and another for the collapse icon. In this case, the section is named pxExpandPaneIcon.
    Create section containing custom icons
  2. For the layout containing the expand icon, set the Visible When condition to .pyExpanded!=true.
    Expand Icon Visible When
  3. For the layout containing the collapse icon, set the Visible When condition to .pyExpanded=true.
    Collapse Icon Visible When
  4. Save the section.
  5. Add a column to the repeating grid and include the section containing the expand and collapse icons, in this case, pxExpandPaneIcon.
    Include custom icon section
  6. Set the Refresh When condition to .pyExpanded Changes.
    Refresh When
  7. Click magnifying glass to open the Repeat Grid panel.
    Repeat Grid
  8. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
    Specify Expand Pane Edit Mode
  9. Specify the flow action that you want to display in the expanded pane.
    Specify Flow Action
  10. Clear the Expand/Collapse Column checkbox. (This setting determines if the expand/collapse icons specified in the Skin rule display in the far left column of the grid. Since you specified a custom icon, clear this checkbox.)
  11. Clear the Expand Multiple Rows checkbox.
    Clear checkboxes
  12. In the Repeat Grid panel, click Open Rule beside the Flow Action field to open the flow action rule.
    Open Flow Action
  13. On the Action tab of the flow action, create a pre-processing data transform to set .pyExpanded to "true". To do this, click Open, and then specify the following on the Definition tab of the Data Transform:
    Pre-Processing data transform
  14. Configure a post-processing data transform to set .pyExpanded to "false". This data transform runs when the user clicks on the row to collapse an expanded pane or when the user clicks on another row, to expand it. Define the data transform as follows:
    Post-Processing data transform

    The Action tab is now configured as follows:
    Action tab configuration
  15. Save your changes and run the process. Click an icon in the grid to view the row details in an expanded pane. Click the icon again to collapse the expanded pane, or click an icon in another row to collapse the current expanded pane and open the details of the selected row in a new pane. Only one detail pane is visible at a time.
    Example of expanding a single pane using a custom icon 

back to top

You can now display the details of a grid row in single or multiple expanded panes, indicate expand and collapse functionality with custom icons or links placed anywhere in the row, and configure events and actions to expand and collapse row details. For additional information on displaying data in grids, see the PRPC Developer Help.

Additional information

About repeating layout edit modes
How to add a grid layout to a section
How to refresh another area when a grid row changes
Introducing the User Interface Gallery of examples

Suggest Edit

Have a question? Get answers now.

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