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.
Related Posts
- 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
Summary
- Creating a new Data Table Using the Data Table Wizard in Pega 7
- Populating an Auto-Complete Control from a Data Table in Pega 7
1 Creating a new Data Table Using the Data Table Wizard 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, hereInsurance
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 beABC-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
andpyLabel
. - The ID will be a unique numeric identifier and the inherited pyLabel property of type text will store the car makes such as
Honda
andToyota
. 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:
2 Populating an Auto-Complete Control from a Data Table in Pega 7
- 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 theABC-Insurance-Work-Auto
case type and select theMake
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 theABC-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 thepyLabel
value starts withMe
.
- 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 withMe
. - When the user click on an item in the suggestions list, that item’s
pyLabel
value is used to set the value of theMake
property of theABC-Insurance-Work-Auto
instance on the Clipboard.
One thought on “Configure a Pega 7 Auto-Complete Control Backed by Data Table”