Table of Contents

Article

How to add an autocomplete field to a flow action form

Summary

You can add an Auto Complete field to a flow action form.

At runtime, an Auto Complete field is an input text box that presents a drop-down list of suggested values as soon as a user types one or a few characters. Only text values which match the user's typing appear.

Like the Dynamic Select control, such fields speed user input by reducing keystrokes. Also like the Dynamic Select control, the Auto Complete control uses AJAX technology, an activity or pre-populated clipboard page as a source of values.

However, the Auto Complete list is filtered to display only string matches, typically based on the first two or three characters typed. This allows the user to quickly access a subset of a possibly long list of candidates, without scrolling.

For example, typing "SM" may cause names from Smaa through Smith and Smythe to appear.

 

Suggested Approach

At Runtime

In this example, a list of Operator IDs appear after "h" is typed into the Operator field, an input text box with an Auto Complete control.


The drop-down list shows shows only Operator IDs beginning with "H".

As with the Dynamic Select control and the List-to-List control, the display is produced from a Page List property of class Code-Pega-List. In this example, the Page list property is named Operators and the each embedded page in the list is named pxResults(n), of class Data-Admin-Operator-ID s. The left panel of the Clipboard tool shows this structure:

Each page in the pxResults Page List contains an individual operator ID.

Adding the Auto Complete control to a Harness, Section, or Flow Action form

Your application can build the Code-Pega-List page through a variety of means — a simple database query, a complex activity, or simply by loading a model.

To add the Auto Complete control:

1. Build and test the activity or other processing that is to create the Code-Pega-List clipboard page. A sample activity appears at the end of this article.

2. Select and drag the Auto Complete icon from the Advanced group of the Layout tab of the Harness or Section form. (These controls are on the Format tab of the Flow Action form.)

3. Drop the control into a cell. Click the magnifying glass icon to open the Cell Properties panel. Drag the Cell Properties panel to a convenient location.

4. Identify the destination property that is to receive the selected value. (You can directly reference any property on the primary page — typically the pyWorkPage page, that holds the work object. Use pagename.propertyname syntax to reference a property on another page. Identify the name and class of that page on the Pages & Classes tab.)

5. Confirm that the Display As value is AutoComplete. Click the magnifying glass icon to enter parameters for the Auto Complete HTML Property rule.

6. Complete the pop-up Parameters window.

  • To call an activity to produce the Code-Page-List clipboard structure, select Activity as the DataSource type. If the clipboard structure is already present when the user's focus reaches the input field, select the ClipboardPage radio button. (The clipboard page may be a Declare_ page.)
  • For the Activity approach, Identify the activity and supply parameters, if any, in the Basic Information field.
  • Complete the Display field to reference the scalar property that contains the text values to display at runtime.
  • Complete additional parameters to affect the details of the display, such as the width of the text box, the width of the drop-down list, and the number of user-typed characters that starts the control. . Click the help button (Help) for instructions.

6. Click Save to close the Param window and save your changes

7. Complete other fields on the General and Advanced tabs of the Cell Properties panel as desired. (In most cases, accept the default values.)

8.Click Apply to apply the changes you made in the Cell Properties panel. Then click OK to close the Cell Properties panel. .

9. Save the Harness (or Section or Flow Action) rule form.

10. Test. Click the Preview toolbar button (Preview ) or test a work object form that includes the harness, section, or flow action.

Sample Activity

These steps describe a three-step activity that lists all instances of the Data-Admin-Operator-ID class. Your own activity can use any desired approach to construct the Code-Pega-List page.

  • Present items in a sort order meaningful to users
  • Include only the needed properties on each embedded page
  • Design the application to remove the Code-Pega-List page after it is no longer needed.

1. Use an Obj-Browse method to populate the Code-Pega-List page.You will name this page in the PageName field. Set the ObjClass field to the class you will search.

2. Use the Show-Page method to send the the Operators page that was created and populated in Step 1 to the browser as an XML document. The browser sends the XML to the Auto Complete field for display and user selection.

3. After the Show-Page method completes, the Operator page is no longer needed. Use the Page-Remove method to delete the Operators page from the clipboard, thereby reducing the memory "footprint" of the requestor.

Related Topics

 

Tags:

Published October 24, 2007 — Updated March 24, 2008


0% found this useful

Have a question? Get answers now.

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