Skip to main content

Table of Contents

Adding an Autocomplete control

Applicable to Theme UI-Kit applications

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).
  1. 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.
  2. Click the View properties icon to display the properties panel of the control.

  3. 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 Configure User Interface Gallery UI elements .

  • 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.

Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us