You are here: User interface > User interface rules > Harness and section forms > Harness and Section formsAdding an AutoComplete control

Harness and Section forms
Adding an AutoComplete control

About AutoComplete

AutoComplete controls save time and ensure accuracy by supplying a list of possible values for an input field, based upon characters that the user types.

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. The system dynamically assembles and displays a list of candidate matching values after the user types one or a few characters of input.

Unlike a static list (such as produced by a Local List on the Table Type fields of a Property form), the values presented by an AutoComplete control may vary from user to user and from time to time. The user must type at least one or a few characters to activate the control.

Source of AutoComplete values

The list of values in an AutoComplete can be defined in a list bound to a property, or a clipboard page, a data page, or a report definition.

When the source is a clipboard page, data page, or a report definition, you can categorize items within the AutoComplete results. When an AutoComplete is bound to a data page or report definition that accepts parameters and the parameter value uses a property reference, the list automatically refreshes with new items whenever the property value changes. No additional configuration is required. This can be used to set up cascading AutoComplete controls or other combination of controls.

The AutoComplete icon at the right of a field indicates that AutoComplete is available. You can configure styles for the AutoComplete control in the Skin rule. See Skin form — Components tab — Controls — Autocomplete.

Upgrading AutoComplete controls

Pega 7 Platformincludes a new AutoComplete control, pxAutoComplete. The pre-Pega 7 Platform AutoComplete control is deprecated.

If a section contains a deprecated AutoComplete or another control for which there is an improved alternative, a warning displays, along with an Update Controls button. Click Update Controls to automatically update deprecated controls in the section. Automatic update is not available for all controls; see Upgrading deprecated and outdated controls on the PDN.

The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select Designer Studio> User Interface > UI Gallery and select AutoComplete in the Controls group. For another use of autocomplete, see PDN article 26458 How to use the Autocomplete control to build a list.

1. Plan and prepare

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?

When building an activity, it is often useful to review and copy (using a new name) the standard activity named LookupList for the class containing the objects, if the 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).

Add an AutoComplete control

  1. Click the down-arrow Arrow at the right end of the Advanced control group and select the AutoComplete control.
  2. Drag the control into the layout and release the mouse button to drop the control.
    If you are using a cell-based layout and you drag the control into a cell that is not empty, then the dropped control replaces the current contents of the cell.
  3. Click the magnifying glass Magnifying glass to display the Properties panel.
  4. On the Properties panel, define the AutoComplete using the following tabs:

To view and interact with examples and review configurations, select Designer Studio> User Interface > UI Gallery and then select Autocomplete in the Components group.

Related topics

AutoComplete control - General tab

AutoComplete control - Presentation tab

Actions tab

About Harnesses

About Sections