Table of Contents

Article

How to use grid actions to build a list (6.2 SP2)

Summary

PRPC V6.2 SP2 provides many ways to use actions and events within grids to build powerful, dynamic user interfaces that can improve user productivity and accuracy. For example, you can use grids to enable users to sort, filter, select, and build a list of multiple items.

You may choose to use a grid layout if you have advanced requirements, such as displaying more than one value in a column, requiring grid actions, such as Run Data Transform, Refresh Section, or Run Flow in Modal, or if you want to take advantage of the flexibility inherent in grids, for example, including a section within a grid row.

To interact with a sample, select Pega Button> User InterfaceUser Interface> UI GalleryUI Gallery, and select Build A List in the Combinations group.

This sample demonstrates configuring a grid so that users can click items in one list and automatically move them to another.

Click a row to move it to the list

This article shows you how the Build A List sample is configured using the following features:

Viewing Data in the Grid
  • Progressive Paging
  • Filtering
  • Sorting
Building Dynamic UI: Actions and Events
  • Run Data Transform
  • Refresh Section
  • Delete Item
Formatting the Grid
  • Row Hover
  • Fixed Height
  • Freeze Row Pane

 

 

-->Building Dynamic UI: Actions and Events
  • Run Data Transform
  • Refresh Section
  • Delete Item

Formatting the Grid

  • Row Hover
  • Fixed Height
  • Freeze Row Pane

Viewing Data in the Grid

  • Progressive Paging
  • Filtering
  • Sorting

Suggested Approach

Overview

In the Build A List sample, make sure that Click A Row is selected, as shown here. Users click a row in the grid on the left to move the item to the grid on the right.

Select Click A Row

The row background color changes to light blue, based on the cursor’s position, to indicate the row to be clicked. You can set the text and background color that is applied on Row Hover in the Branding Wizard.
Sort, Filter, and Row Hover

Users can also filter and sort the lists by clicking the icons at the top of the columns. Note that the Available column filter displays only the search box because each employee name, the value of the .pyEmployee property, is a unique text string. The Role column filter displays both checkboxes for selecting individual .pyRole property list values and a search box for searching the text values.

Range/Search only Property and Range/Search

Note: The Build A List sample demonstrates two ways for users to build a list: by clicking a row in a grid or selecting from an AutoComplete. A Visible When condition indicates which sample to display: Click A Row or Using AutoComplete. This article describes the Click A Row configuration. For information on using AutoComplete to build a list, see How to use the AutoComplete control to build a list.

 

Configuration

Configuring the Repeating Grid

This sample uses a Repeat Grid with an Edit Mode configured to execute three actions in sequence: run a data transform, refresh another section, and delete an item. To view the configuration of the grid on the left:

  1. In the Build A List sample, click open.
    Select Click A Row
  2. The pxBuildList section rule opens. On the Layout tab, click Wireframes icon to display the wireframe.
  3. Click the magnifying glass magnifying glass in the Section Include to open the Section Include panel, and then click Click open to open the pxBuildListRow section.
    Open Section
  4. In the pxBuildListRow section, click the magnifying glass magnifying glass in the Available cell to open the Cell Properties panel, and then click Click open to open the pxBuildListRowAvail section.
    Open Section
  5. Notice that this section contains a Repeat Grid. Repeat grids provide options to resize, reorder, sort, and filter, as well as specify row hover and row numbering. Click the magnifying glass magnifying glass in the Repeat Grid. This repeating grid, the source of which is a page list property, is configured with Row Hover, Sorting, and Filtering.
    Repeat Grid
    Open Section
  6. Click the magnifying glass magnifying glass beside the Edit Modeto view the click actions configured for this grid. Each grid has an edit mode that sets the default presentation and behavior configuration for the grid, determining how users view and edit properties. Each of the six edit modes is configured with grid actions — click and double-click actions. You can add, delete, or edit grid actions as desired. This grid edit mode is configured to execute three click actions in sequential order:

     

    • Run Data Transform. This pre-processing data transform appends the selected employee name to the grid on the right.
    • Refresh Section. Refreshes another section, the grid on the right, pxBuildListRowTarget.
    • Delete Item. Deletes the item from the grid on the left.
    Click Actions
  7. In the Behaviors area, double-click Run Data Transform.
    Run Data Transform
  8. The data transform runs in the context of the selected row, so this data transform copies the current page (which is the currently selected row in the grid), the Primary Source, to the Target, the Employee Grid, EmpGrid.pyEmployeeSelect. It then runs a function which sorts the results in alphabetical order.
    Data Transform
  9. Close the data transform and double-click Refresh Section.
    Refresh Section
  10. This Refresh Section click action refreshes another section, the grid on the right, pxBuildListRowTarget.
    Refresh Other Section
  11. Close the Refresh Section and double-click Delete Item. The Delete Item click action deletes the selected item from the grid on the left.
    Delete Item

 

This sample also contains links to add or remove the entire list, Add All and Remove All.

Configuring the Add All/Remove All Links

Add All and Remove All are links that add or remove all the items from one grid and move them to the other grid.
Add All Link

To view the configuration of these links:

  1. In the Build A List sample, click open.
    Click open
  2. The pxBuildList section rule opens. On the Layout tab, click Wireframes icon to display the wireframe.
  3. Click the magnifying glass magnifying glass beside Add All to open the Properties panel.
    magnifying glass
  4. Click the magnifying glass magnifying glass beside the Control field. Add All is a pxLink Control configured with a click event to refresh a section.
    Configure pxLink
  5. Double-click Refresh Section. In the Behavior dialog, notice that clicking Add All refreshes another section, the parent section that includes both the Available and Selected Grids, pxBuildList.
    Refresh Other Section
     

    This Control is also configured to run a data transform, prior to refreshing the section.
    Pre-processing Data Transform

    The data transform appends all the employees in the Available Grid (EmpGrid.pyEmployeeAvailable) to the Selected Grid (EmpGrid.pyEmployeeSelect), sorts them in alphabetical order, and then removes all employees from the Available Grid. Note that because this data transform is operating outside the context of the grid, each grid is specified explicitly as a Target.
    Data Transform

 

Additional Information

The UI Gallery contains additional samples of many features available in grids, including: Paging, Filtering, Click Actions, Row Editing, and Expand Pane. To access these and other samples, select  Pega Button> User InterfaceUser Interface> UI GalleryUI Gallery > Repeating Layouts.

Published February 23, 2012 — Updated February 17, 2016


100% found this useful

Have a question? Get answers now.

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