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:

• multiple panes at one time
• multiple panes using a custom icon or link
• a single pane
• a single pane using a custom icon or link

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 > User Interface> 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:

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 details of multiple rows simultaneously by clicking in the expand/collapse column:

1. Open the section containing the repeating layout and click to open the Repeat Grid panel.
   
2. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
   
3. Specify the flow action that you want to display in the expanded pane.
   
4. Select the Expand/Collapse Column and Expand Multiple Rows checkboxes.

   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 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.

   

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


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

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:

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.
   
3. For the layout containing the collapse link, set the Visible When condition to .pyExpanded=true.
   
4. Add a column to the repeating grid and include the section containing the expand and collapse links, in this case, pxExpandPaneLink.
   
5. Set the Refresh When condition to .pyExpanded Changes.
   
6. Click  to open the Repeat Grid panel.
   
7. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
   
8. Specify the flow action that you want to display in the expanded pane.
   
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.
    
11. Click the  beside the Expand Pane Edit Mode to view and configure grid events and actions. The following events are set automatically; click  to configure keyboard events, if desired.
    
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:

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  to open the Repeat Grid panel.
   
2. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
   
3. Specify the flow action that you want to display in the expanded pane.
   
4. Select the Expand/Collapse Column checkbox. Make sure that the Expand Multiple Rows checkbox is not selected.
   
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.
   

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:

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.
   
2. For the layout containing the expand icon, set the Visible When condition to .pyExpanded!=true.
   
3. For the layout containing the collapse icon, set the Visible When condition to .pyExpanded=true.
   
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.
   
6. Set the Refresh When condition to .pyExpanded Changes.
   
7. Click  to open the Repeat Grid panel.
   
8. In the Repeat Grid panel, select Expand Pane as the Edit Mode. The Flow Action field appears.
   
9. Specify the flow action that you want to display in the expanded pane.
   
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.
    
12. In the Repeat Grid panel, click beside the Flow Action field to open the flow action rule.
    
13. On the Action tab of the flow action, create a pre-processing data transform to set .pyExpanded to "true". To do this, click , and then specify the following on the Definition tab of the 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:
    
    
    The Action tab is now configured as follows:
    
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.
    

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