Configure a Pega 7 Auto-Complete Control Backed by Data Table

The following example shows how to create a data table and how to use it to configure a Pega 7 auto-complete UI control so that its options are sourced from the data table. The auto-complete control allows a user to type a search term and it will present matching options in a dynamic list as shown below.

• Sort Dropdown Options with Data Transform in Pega 7.1.9
• Group Pega 7 Dropdown Options by Property
• Example of Cascading Drop Downs in Pega 7

1. Creating a new Data Table Using the Data Table Wizard in Pega 7
2. Populating an Auto-Complete Control from a Data Table in Pega 7

• Open the data tables using Designer Studio > Data Model > Data Tables > Data Tables:

• The data tables view shows a list of existing data tables:

• Click on the Add a new Data Table button. This will open the Data Table Wizard.
• In this example, a new data table will be created for storing car makes.
• The class name should be derived from the organization name, here ABC and the application name, here Insurance and the derived class, here -Data.
• Therefore, the class name in this example is ABC-Insurance-Data-Make.
• The class for this data table should derive from the -Data class, so the DERIVES FROM field will be ABC-Insurance-Data.

• The check box CREATE DATA PAGES? must be checked in order to see the LOOKUP DATA PAGE and LIST DATA PAGE fields. Completing these fields will cause the wizard to create data pages that can be used to retrieve a single instance of ABC-Insurance-Data-Make or a list of instances.
• The check box CREATE DEDICATED DATABASE TABLE? should be checked since this data tables provides reference data and should be included when migrating the application.

• Here, the intention is to display an auto-complete control so that a user can select from a list of car makes as she types.
• The ABC-Insurance-Data-Make class will have 2 properties: ID and pyLabel.
• The ID will be a unique numeric identifier and the inherited pyLabel property of type text will store the car makes such as Honda and Toyota. After entering the configuration data, click on the Generate button to continue.

• The wizard generates the data table and Associated Rules such as a default data transform, a validate rule and the lookup data page (D_Make) and list data page (D_Makes) using the names specified in the configuration name.
• After clicking on the Close button and refreshing the data table view, the new data table appears.
• At this point, the row count is 0 since no data records have been created yet.

• Click on the cogwheel icon in the EDIT column in order to open a view that allows adding rows to the data table.

• Click on the + icon to insert ABC-Insurance-Data-Make instances into the data table.

• Clicking on the check mark icon to the right of the Label text box will insert a new record into the data table.
• The data table will enforce the unique constraint for the ID column and display an error icon and a tool tip when the user attempts to insert a row with an existing identifier.

• Once the data has been added, the dialog showing the data table instances can be closed.
• Refreshing the data table’s view shows the new row count:

• Here, we want to set a case instance property from a selected value of an auto-complete control.
• In the sample application, there is a case type rule called ABC-Insurance-Work-Auto that will be used to encapsulate auto policy work.
• This case type rule has a property called Make that is a single value property of type text.

• Create a new Section rule for the ABC-Insurance-Work-Auto case type and insert e.g. a Dynamic Layout.
• Click on the Advanced drop down control in the Deign tab and drag and drop the Auto-Complete control into the dynamic layout.

• Click on the auto-complete control and then on the cogwheel icon in the upper right hand corner.

• This will open a dialog for configuring the auto-complete field. In the Property field, type a . (dot) to see all available properties of the ABC-Insurance-Work-Auto case type and select the Make property as shown below.

• A Placeholder can be used to display a default text in the auto-complete control, when no value is selected.
• In the LIST SOURCE section, select Data page in the type drop down field and enter the name of the list data page that was created using the Data Table Wizard, in this case: D_Makes.

• Alternatively, instead of using the data page, the default Report Definition, here named dataTableListReport, which was also created by the Data Table Wizard can be used.

• Caution: Using a data page has performance advantages since it can be configured to be cached (see Load Management tab of edit data page view), whereas the report definition is run every time the auto-complete is loaded.
• When using a report definition, the SEARCH RESULTS CONFIGURATION section of the dialog is used to select the data source property that will be used for the search and for displaying the auto-complete suggestions list.
• In this case, the auto-complete needs to search the pyLabel property of the ABC-Insurance-Data-Make instances in the data table.
• The Match start of string check box causes the auto-complete search to show suggestions where the entered string matches the beginning of Makes instances.
• E.g.: When the user enters Me in the auto-complete control, the list of suggestions should show all car makes where the pyLabel value starts with Me.

• Click on OK to close the dialog and then click on Save to apply the section changes.
• The auto-complete can be unit-tested by clicking the Actions button and selecting Preview.

• The section will be rendered and display the auto-complete control. Here, the user entered Me and the list of suggestions shows one item: Mercedes-Benz since it is the only make that starts with Me.
• When the user click on an item in the suggestions list, that item’s pyLabel value is used to set the value of the Make property of the ABC-Insurance-Work-Auto instance on the Clipboard.