Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adding an Autocomplete control

Updated on November 15, 2021
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 begin:

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:
What to do next:

The UI Gallery landing page contains a working example of this element. To display the gallery, in Dev Studio, click ConfigureUser InterfaceGallery 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.

Tags

Pega Platform 8.6 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us