Harness and Section forms - Adding an autocomplete control

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 List or 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 LookupList for the class containing the objects, if your source objects are rows of a table in the PegaRULES database. Design the activity to:
    1. Create a Page Group page 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).
    2. Set the value of an OUT activity parameter named pyDataSourcePageName containing the fully qualified name of the Page Group page (or include a Show-Page method step for that page).

To add an autocomplete control:

  1. On the Design tab of a form, select the Advanced control group.
  2. Drag the Autocomplete control into a layout. 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.
  3. Click the View properties icon to display the properties panel of the control.
  4. 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, click Designer Studio > User Interface > Gallery > UI elements.