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 > User Interface> UI 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.

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.

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.

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.
   
2. The pxBuildList section rule opens. On the Layout tab, click to display the wireframe.
3. In the Section Include containing the AutoComplete, click the magnifying glass beside the AutoComplete Control to open the Cell Properties panel.
   
4. In the Cell Properties panel, click the magnifying glass beside the Control field to open the AutoComplete parameters.
   
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 0Minimum 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%.
   
   
   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.

To view the configuration of this repeating grid:

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

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.

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  beside Add to List to open the Cell Properties panel.
   
2. In the Cell Properties panel, click to open the pxBuildListButton section.
   
3. Click  to display the wireframe, and then click the magnifying glass  beside Add to List to open the Cell Properties panel.
   
4. On the Cell Properties panel, click the magnifying glass  beside the Control field to view the button configuration.
   
5. This button is configured with the following click actions, which execute in sequential order:
   
6. In the Behaviors area, double-click an Action to view the configuration details. For example, double-click 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.
   
7. The Refresh Section click action refreshes another section, pxBuildListAC, the list of employees.
   
8. The Set Value click action clears the AutoComplete, setting the value to null.
   
   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.
   
   
   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 > User Interface> UI Gallery.