How to allow users to pick a value from a list in an overlay pop-up
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:
- Create a report definition rule containing the data that you want to display in the overlay.
- Create a section containing a repeating grid sourced from the report definition.
- Create a flow action that includes the section you created.
- 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.
- 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
. - 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.) - 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.
- Create a new section. On the Pages & Classes tab, add
pyWorkPage
of your application class, in this case,StudentLoanApplication-Work-StudentLoanApplication
. - Add a repeating grid bound to the Report Definition rule, in this case,
Universities
. See How to add a Grid layout to a section. - Specify the value of the Report Definition parameter as
.SelectCollegeName
. The report definition is filtered on the.CollegeName
parameter. - In the Repeat Grid, add columns for
.Name
and.Logo
. - Remove the column heading and clear the Make Header? checkbox setting on the first row of the grid.
- Delete the Add/Delete row from the Action Top area of the grid and delete all empty columns in the grid.
- 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:
- Click
and add the following Click events:
Event Action Behavior dialog Click Handle List Items > Set Focus
Current ItemClick Display > Set Value
Click Advanced > Run Data Transform Click Display > Close - Add the following Keyboard events:
Event Action Behavior dialog Keyboard - Up Handle List Items ->Set Focus
Previous ItemKeyboard - Down Handle List Items ->Set Focus
Next ItemKeyboard - Enter Display > Set Value Keyboard - Enter Advanced > Run Data Transform Keyboard - Enter Display > Close - Click OK on the Parameters dialog and then save the section rule.
Create the Flow Action
- Create a new flow action that references the section that you just created, in this case,
UniversityCompactList
. - 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.
- Save the flow action.
Configure the Text Input Control to Launch the Flow Action in an Overlay
- In the section in which you want to add the overlay, add a SmartLayout.
- Add the
.SelectCollegeName
property to the layout as a Text Input control. - Click the
beside the Control field, and then click
to add a Keyboard event that launches the local action,
UniversityCompactList
, in an overlay. - 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
. - Add the Page Name and Class in the Pages and Classes tab of the section containing the Text Input control configured with the overlay.
- Click the
beside the Text Input Control field, and then click
to add another Keyboard event.
- Specify the Target as the page name,
pgRepPgSubSectionUniversityCompactListB.pxResults
, and the set the Focus On the First Row. - Set the final event to refresh the current section on Change.
The Behaviors area should now appears as follows. - Click OK on the Parameters dialog and then save your changes.
- 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.
- 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