Table of Contents

Article

How to allow users to pick a value from a list in an overlay pop-up

Published August 15, 2012 — Updated February 19, 2016

Summary

You can configure buttons, icons, links, and text input controls to launch local actions in an overlay, a panel that overlays the current window. Overlays can display lists, charts, and reports. Users can set and change values in an overlay. Overlays do not require user input — the user can dismiss an overlay by clicking outside the overlay area or through an explicit Close action.

This article describes how to configure overlays to filter a list of colleges as the user types and enable a user to select a value from the list using the keyboard or mouse.

Select College from list

To interact with a sample, select Pega Button> User InterfaceUser Interface> UI GalleryUI Gallery, and select Combinations > Search And Select > Using Overlay.

Suggested Approach

In a student loan application, you may want to enable a user to select a college from a list. You may want to include multiple columns in this list; for example, the university name, logo, state, etc., and filter this list as the user types.

To do this, follow these steps:

  1. Create a report definition rule containing the data that you want to display in the overlay.
  2. Create a section containing a repeating grid sourced from the report definition.
  3. Create a flow action that includes the section you created.
  4. Configure the text input control to launch the flow action in an overlay.

Create a Report Definition

Create a Report Definition rule that contains the data you want to display in the overlay. For information and videos that demonstrate creating report definitions, see Reporting in V6.2 — Nine tutorial videos.

  1. Define a report definition containing the properties, functions, or expressions that you want to include as columns in the report. In this case, the report definition, Universities, contains properties such as .Name, .InStateTution, .OutofStateTuition, .LocationState, .Logo, and .Website.
    Report Definition rule
  2. Define filtering conditions that determine which class instances are to be included as rows in the report. (In this case, the report definition is filtered on the .CollegeName parameter.)
    Report Definition filter
  3. Save the Report Definition rule.

Create a Section Containing a Repeating Grid Sourced from the Report Definition

Create a section containing the information that you want to display in the overlay. In this case, the section contains a repeat grid sourced from the Universities report definition rule. This grid is configured to display two columns, one column containing the name of the university and another displaying the university logo. See How to add a Grid layout to a section.

  1. Create a new section. On the Pages & Classes tab, add pyWorkPage of your application class, in this case, StudentLoanApplication-Work-StudentLoanApplication.
    Pages and Classes
  2. Add a repeating grid bound to the Report Definition rule, in this case, Universities. See How to add a Grid layout to a section.
    Repeat Grid panel
  3. Specify the value of the Report Definition parameter as .SelectCollegeName. The report definition is filtered on the .CollegeName parameter.
    Report Definition Parameters
  4. In the Repeat Grid, add columns for .Name and .Logo.
    Add columns to the Repeat Grid
  5. Remove the column heading and clear the Make Header? checkbox setting on the first row of the grid.
    Remove the column header
  6. Delete the Add/Delete row from the Action Top area of the grid and delete all empty columns in the grid.
    Delete Action Top
  7. Click the magnifying glass to open the Repeat Grid panel and then click the magnifying glass beside the Read Only Edit Mode to configure the following grid events and actions:
    Keyboard Events
  8. Click Add Row and add the following Click events:
    Event Action Behavior dialog
    Click Handle List Items > Set Focus
    Current Item
    Set Focus Current
    Click

    Display > Set Value

    Set Value
    Click Advanced > Run Data Transform Run Data Transform
    Click Display > Close Close
  9. Add the following Keyboard events:
    Event Action Behavior dialog
    Keyboard - Up Handle List Items ->Set Focus
    Previous Item
    Set Focus Previous Item
    Keyboard - Down

    Handle List Items ->Set Focus
    Next Item

    Set Focus Next Item
    Keyboard - Enter Display > Set Value Set Value
    Keyboard - Enter Advanced > Run Data Transform Run Data Transform
    Keyboard - Enter Display > Close Close
  10. Click OK on the Parameters dialog and then save the section rule.

Create the Flow Action

  1. Create a new flow action that references the section that you just created, in this case, UniversityCompactList.
    Create Flow Action
  2. On the Action tab of the flow action, clear the Hide the default Action section buttons? checkbox in the Action Buttons area. This hides the OK and Cancel buttons; they do not display in the overlay.
    Action buttons area
  3. Save the flow action.

Configure the Text Input Control to Launch the Flow Action in an Overlay

  1. In the section in which you want to add the overlay, add a SmartLayout.
  2. Add the .SelectCollegeName property to the layout as a Text Input control.
    Layout
  3. Click the magnifying glass beside the Control field, and then click Add Row to add a Keyboard event that launches the local action, UniversityCompactList, in an overlay.
    Behavior dialog
  4. To enable keyboard navigation within the overlay, set focus from the Text Input control to the first row within the overlay. To do this, you need to know the system-generated clipboard name of the Report Definition bound to the grid displayed in the overlay. You can find this name in the Pages and Classes tab of the section you created containing the repeat grid, in this case, pgRepPgSubSectionUniversityCompactListB.
    Pages & Classes tab
  5. Add the Page Name and Class in the Pages and Classes tab of the section containing the Text Input control configured with the overlay.
    Pages & Classes tab
  6. Click the magnifying glass beside the Text Input Control field, and then click Add Row to add another Keyboard event.
  7. Specify the Target as the page name, pgRepPgSubSectionUniversityCompactListB.pxResults, and the set the Focus On the First Row.
    Behavior dialog
  8. Set the final event to refresh the current section on Change.
    Change event

    The Behaviors area should now appears as follows.
    Behaviors area
  9. Click OK on the Parameters dialog and then save your changes.
  10. Run the flow. Type a letter in the text input box to display the overlay. The list in the overlay is filtered as you type, displaying the university name and logo. Focus is set to the first row of the overlay and keyboard navigation is enabled.
    Select college from list
  11. Double-click or press Enter to select a university from the list.
    Selected college  

Additional Information

How to add a Grid layout to a section
Reporting in V6.2 — Nine tutorial videos


50% found this useful

Have a question? Get answers now.

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