The following example shows how to create a data table and how to use it to populate an auto-complete UI control in Pega 7. The auto-complete control allows a user to type a search term and it will present matching options in a dynamic list as shown in the screen shot below.
- Using a Data Page for a Dropdown and Sorting the Options with a Data Transform in Pega 7.1.9
- Source Dropdown Options from a Data Page and Group by a Property in Pega 7.1.9
- Example of Cascading Drop Downs with Linked Class Key Property in Pega 7.1.6
- 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
- Open the data tables view by clicking on 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
ABCand the application name, here
Insuranceand the derived class, here
- Therefore, the class name in this example is
- The class for this data table should derive from the
-Dataclass, so the DERIVES FROM field will be
- 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-Makeor 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.
- In this example, the intention is to display an auto-complete UI control that allows a user to select from a list of car makes.
ABC-Insurance-Data-Makeclass will have 2 properties:
- The ID will be a unique numeric identifier and the inherited pyLabel property of type text will store the car makes such as
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
0since 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-Makeinstances 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
IDcolumn 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-Autothat will be used to encapsulate auto policy work.
- This case type rule has a property called
Makethat is a single value property of type text.
- Create a new Section rule for the
ABC-Insurance-Work-Autocase 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-Autocase type and select the
Makeproperty 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:
- 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
pyLabelproperty of the
ABC-Insurance-Data-Makeinstances 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
- E.g.: When the user enters
Mein the auto-complete control, the list of suggestions should show all car makes where the
pyLabelvalue starts with
- 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
Meand the list of suggestions shows one item:
Mercedes-Benzsince it is the only make that starts with
- When the user click on an item in the suggestions list, that item’s
pyLabelvalue is used to set the value of the
Makeproperty of the
ABC-Insurance-Work-Autoinstance on the Clipboard.