This content has been archived.

Table of Contents

How to use the AutoComplete control to build a list (6.2 SP2)

Summary

PRPC V6.2 SP2 provides many ways that users can build dynamic lists, one of which is using an AutoComplete Control. You may choose this approach to enable users to build a list of items by filtering and selecting from a large and fairly unstructured data source, for example, a list of tags.

To interact with a sample, select Pega Button> User InterfaceUser Interface > UI GalleryUI Gallery, and select Build A List in the Combinations group.

This sample demonstrates how a user can build a list by selecting from the list presented by an AutoComplete control.

Build A List sample: AutoComplete 

This article shows you how the Build A List sample is configured using the following features:

  • AutoComplete
  • Repeating Grid
  • Run Data Transform
  • Refresh Section
  • Set Value
  • Set Focus

 

Suggested Approach

Overview

In the Build A List sample, make sure that Using AutoComplete is selected, as shown here. The user selects an employee name from the AutoComplete, Ben Finley, and then clicks the Add to List button.
Build A List sample: AutoComplete

The employee name, Ben Finley, is added to the list, the AutoComplete is cleared, and the cursor focus is returned to the AutoComplete. The user can now add another name to the list.
Select another name from AutoComplete

Note: The Build A List sample demonstrates two ways for users to build a list: by clicking a row in a grid or selecting from an AutoComplete display. A Visible When condition indicates which sample to display: Click A Row or Using AutoComplete.
This article describes the AutoComplete configuration. For information on using grid actions to build a list, see How to use grid actions to build a list.

 

Configuration

Configuring the AutoComplete Control

In this sample, the AutoComplete Control is configured to display the employee name (.pyName)and role (.pyRole). The user can type a character in the AutoComplete to filter the results based on the employee name or role, or press the down arrow to select from the full list of results. To view the configuration of this AutoComplete Control:

  1. In the Build A List sample, click open.
    Click open
  2. The pxBuildList section rule opens. On the Layout tab, click Wireframes icon to display the wireframe.
  3. In the Section Include containing the AutoComplete, click the magnifying glass magnifying glass beside the AutoComplete Control to open the Cell Properties panel.
    magnifying glass
  4. In the Cell Properties panel, click the magnifying glass magnifying glass beside the Control field to open the AutoComplete parameters.
    Cell Properties
  5. The source for this AutoComplete is a Report Definition. The AutoComplete is configured to display the .pyName and .pyRole properties, as indicated in Display Field and Additional Fields. This AutoComplete requires 0 Minimum Search Characters, meaning that the user is not required to type a character to view/filter AutoComplete results — just press the down arrow to select from the full list of results. Up to 100 results, as specified in Maximum Results, display in this AutoComplete. The First Column Width (%) is set to 50, so each column has a width of 50%.
    AutoComplete parameters

    For more information about AutoComplete controls, refer to the PRPC online Help.

Configuring the Repeating Grid

The grid under the AutoComplete is a Repeat Grid, the source of which is the .pySelectedEmployees Page List property.
Repeating Grid

To view the configuration of this repeating grid:

  1. On the Layout tab of the pxBuildList section rule, click Wireframes icon to display the wireframe, and then click the magnifying glass magnifying glass beside the Repeat Grid.
    magnifying glass
  2. Notice that the source of .pyName in the Repeat Grid is the .pySelectedEmployees page list property.
    Repeat Grid source

 

Configuring the Add to List Button

When the user selects an employee name from the AutoComplete and then clicks Add to List, the employee name is added to the list, the AutoComplete is cleared, and the cursor focus is returned to the AutoComplete.

Add to List button

The Add to List button is a pxButton Control, configured with the following Events, which execute in sequential order:

  1. Run Data Transform — adds a page to the .pySelectedEmployees page list and sets .pyName equal to the value in the AutoComplete.
  2. Refresh Section — refreshes another section, the repeating grid below the AutoComplete.
  3. Set Value — clears the value from the AutoComplete.
  4. Set Focus — returns the cursor focus to the AutoComplete.

To view the configuration:

  1. In the Section Include containing the AutoComplete, click the magnifying glass magnifying glass beside Add to List to open the Cell Properties panel.
    magnifying glass
  2. In the Cell Properties panel, click Click open to open the pxBuildListButton section.
    open
  3. Click Wireframes icon to display the wireframe, and then click the magnifying glass magnifying glass beside Add to List to open the Cell Properties panel.
    magnifying glass
  4. On the Cell Properties panel, click the magnifying glass magnifying glass beside the Control field to view the button configuration.
    magnifying glass
  5. This button is configured with the following click actions, which execute in sequential order:
    Click Actions
  6. In the Behaviors area, double-click an Action to view the configuration details. For example, double-click Run Data Transform.
    Run Data Transform

    This data transform adds a page to the .pySelectedEmployees page list. It sets .pyName equal to the value in the AutoComplete, and then sets the value in the AutoComplete to null on the clipboard.
    Data Transform
  7. The Refresh Section click action refreshes another section, pxBuildListAC, the list of employees.
    Refresh Section
  8. The Set Value click action clears the AutoComplete, setting the value to null.
    Set Value
    Bonus Explanation: Set Value clears the AutoComplete on the form, ensuring that after the user clicks Add to List, the value of the AutoComplete on the form is null; it is ready for the user to make a selection. However, the possibility exists that this value could remain on the clipboard and get reapplied after a refresh. The data transform prevents this case, with a step that clears the property value on the clipboard.
  9. Finally, a click event, Set Focus, returns the cursor focus to the AutoComplete. The user can now add another name to the list.
    Set Focus

    You may have noticed that the Add to List button in the pxBuildListButton section also contains a Refresh When condition. This ensures that when a user clicks the Add to List button, the most current value in the AutoComplete is used to update the list.

 

Additional Information

The UI Gallery contains additional samples of AutoComplete and Repeating Layouts. To access these and other samples, select Pega Button> User InterfaceUser Interface > UI GalleryUI Gallery.

Suggest Edit

100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.