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.

To interact with a sample, select > User Interface> UI 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.
   
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.)
   
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.
   
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.
   
3. Specify the value of the Report Definition parameter as .SelectCollegeName. The report definition is filtered on the .CollegeName parameter.
   
4. In the Repeat Grid, add columns for .Name and .Logo.
   
5. Remove the column heading and clear the Make Header? checkbox setting on the first row of the grid.
   
6. Delete the Add/Delete row from the Action Top area of the grid and delete all empty columns in the grid.
   
7. Click the to open the Repeat Grid panel and then click the beside the Read Only Edit Mode to configure the following grid events and actions:
   
8. Click and add the following Click events:

   Event	Action	Behavior dialog
   Click	Handle List Items > Set Focus Current Item
   Click	Display > Set Value
   Click	Advanced > Run Data Transform
   Click	Display > Close

9. Add the following Keyboard events:

   Event	Action	Behavior dialog
   Keyboard - Up	Handle List Items ->Set Focus Previous Item
   Keyboard - Down	Handle List Items ->Set Focus Next Item
   Keyboard - Enter	Display > Set Value
   Keyboard - Enter	Advanced > Run Data Transform
   Keyboard - Enter	Display > 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.
   
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.
   
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.
   
3. Click the beside the Control field, and then click to add a Keyboard event that launches the local action, UniversityCompactList, in an overlay.
   
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.
   
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.
   
6. Click the beside the Text Input Control field, and then click to add another Keyboard event.
7. Specify the Target as the page name, pgRepPgSubSectionUniversityCompactListB.pxResults, and the set the Focus On the First Row.
   
8. Set the final event to refresh the current section on Change.
   
   
   The Behaviors area should now appears as follows.
   
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.
    
11. Double-click or press Enter to select a university from the list.
    

Additional Information

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