Use an Autocomplete control to allow the user to select a value from a possibly large set of searched text values, based on a partial string match. Pega Platform dynamically assembles and displays a list of candidate matching values after the user types one or a few characters of input.
Before you add an autocomplete control, consider the following information.
- Confirm that user requirements for the text box field are best met by an Autocomplete control rather than alternatives.
Determine the name of the report definition or clipboard page (a
Page Listor class Code-Pega-List) that is to be searched. When using a clipboard page as the source of values, determine whether the clipboard page will be available at runtime when the data is needed. For example, when the flow action or user form appears, is the work item present with appropriate data, or do you need to build an activity to construct it?
Consider overriding the standard activity named
class containing the objects, if your source objects are rows of a table in the PegaRULES
database. Design the activity to:
Page Grouppage of class Code-Pega-List, with each embedded page containing the values of the pyLabel property and of the property containing the text values to be displayed (the display field).
Set the value of an OUT activity parameter named
pyDataSourcePageNamecontaining the fully qualified name of the
Page Grouppage (or include a Show-Page method step for that page).
- Create a
On the Design tab, from the Pickers list, drag Autocomplete onto the work area.
If you are using a cell-based layout and you drag the control into a cell that is not empty, the dropped control replaces the current contents of the cell.
Click the View properties icon to display the properties panel of the control.
On the Properties panel, define the autocomplete using the following tabs:
The UI Gallery landing page contains a working example of this element. To display the gallery, in Dev Studio, click.
- Autocomplete Properties — General tab
Click the View properties icon in the layout containing the Autocomplete control ( pxAutocomplete ) to display the Properties panel, and then select the General tab to define the source of values for the Autocomplete.
- Autocomplete Properties Presentation tab
Click the View properties icon of an autocomplete control to display the properties panel, and then click the Presentation tab to configure the display of the autocomplete control.
- Source of autocomplete field values
Autocomplete controls save time and ensure accuracy by supplying a list of possible values for an input field, based on characters that the user enters.