Example of Cascading Drop Downs with Linked Class Key Property in Pega 7.1.6

This example shows how a foreign key type relationship can be configured between two reference data tables. A column in one data table will hold key values that refer to instances in the other data table.

  • Additionally, an example is provided that shows how two reference data tables can be used to populate cascading drop-downs using a property to hold linked class keys to instances of another class.

Related Posts

Summary

  1. Use Case Example with Two Cascading Drop-Down Controls in Pega 7
  2. Create Data Tables to Populate Drop-Down Options in Pega 7
  3. Configuring Cascading Drop-Downs in Pega 7

  • A form shows 2 drop-downs, one that allows a user to select a car make such as Honda or Audi (parent) and a dependent drop-down that allows to select a model for that car make (child), such as Accord when Honda is selected.
  • Similarly, when Audi is selected in the Make drop-down, A4, A5, A6 and so on should be displayed in the child Model drop-down.
  • Every time the parent drop-down changes, the child drop-down should be updated automatically to show the models for the selected car make.
  • The form with the 2 drop-downs that will be built in this example will look like the one in the screen shot below.

Example of UI section with cascading drop-down controls in Pega 7

  • In the screen shot, Honda has been selected in the Make drop-down and the Model drop-down shows all available models linked to the selected make.

  • One data table will hold the options for the Make drop-down and another data table will hold the options for the Model drop-down. In this example, the two data tables are named as follows:
ABC-Insurance-Data-Make for the Make drop-down (parent)
ABC-Insurance-Data-Model for the Model drop-down (child)
  • A data table can be created by navigating to DesignerStudio > Data Model > Data Tables > Data Tables.

Pega 7 Designer Studio, main menu, open Data Tables view

  • The Data Tables view lists all available data tables. A new data table can be added by clicking on the button Add new Data Table.

Pega 7 Designer Studio, Data Table view, add a new Data Table

  • The Data Table Wizard dialog for creating the ABC-Insurance-Data-Make data table is shown below. Note that it derives from  ABC-Insurance-Data and a lookup data page named D_Make and a list data page named D_Makes will be automatically generated.
  • In addition, a dedicated database table is created by checking CREATE DEDICATED DATABASE TABLE?.
  • This will cause Pega to create and use a separate dedicated DB table for storing instances of ABC-Insurance-Data-Make and allows for migration of the data when exporting/importing.

Pega 7 Designer Studio, Data Table Wizard, confirmation of new data table for ABC-Insurance-Data-Make

  • The ABC-Insurance-Data-Make class has two properties:
idunique key, of type Identifier, has to start with letter and can contain hyphens and numbers: e.g. M-1
pyLabel – of type Text, inherited from ABC-Insurance-Data, used to store the car makes: e.g. Honda
  • Insert Make Records: The cog-wheel icon in the edit column of the ABC-Insurance-Data-Make data table can be used to create records.

Pega 7 Designer Studio, Data Table view, add new instances to existing data table

  • In this example, 5 car make records have been inserted into the table.
  • The plus icon in the lower right hand corner can be used to add more instances.

Pega 7 Designer Studio, Data Table view, add car make instances ABC-Insurance-Data-Make to data table

  • Since CREATE DEDICATED DATABASE TABLE was selected in the Data Table Wizard, a separate database table was created to store the instances of ABC-Insurance-Data-Make.
  • To get the table name, open the ABC-Insurance-Data-Make class and click on the Test Connection button.

ABC-Insurance-Data-Make Class Test Connection

  • A new window will show the Pega database schema name and the table name. In this case, it is pegadata.pr_ABC_Insurance_Data_Make.

Pega database for ABC-Insurance-Data-Make class pegadata.pr_Abc_Insurance_Data_Make

  • The data can easily be viewed in the Pega database -in this case PostgreSQL is used- by using a tool such as pgAdmin.
  • Refer to this post on using pgAdmin to view the Pega DB: Example of Connecting to Pega 7 PRPC PostgreSQL DB with pgAdmin.
  • In the pgAdmin tool, navigate to the schema pegadata and locate the table pr_abc_insurance_data_model.
  • Right click on the table name and select View Data > Top 100 rows.

pgAdmin to view rows in pr_Abc_Insurance_Data_Make data table

  • For the second drop-down, a second data table called ABC-Insurance-Data-Model has been created with the Data Table Wizard. The summary is shown below.

Pega 7 Designer Studio, Data Table Wizard, confirmation of new data table for ABC-Insurance-Data-Model

  • The ABC-Insurance-Data-Model class has three properties:
id – the unique key, of type Identifier, e.g. M-001
pyLabel – inherited from ABC-Insurance-Data, used for actual model value such as Civic
make – a reference of type Identifier to an instance of ABC-Insurance-Data-Make
  • After creating the Model data table, the class ABC-Insurance-Data-Model needs to be configured further so that the Make property will hold valid class key values, pointing to ABC-Insurance-Data-Make instances.
  • Using the App Explorer, the make propery of the ABC-Insurance-Data-Model class needs to be opened as edited.

Pega 7 Designer Studio, edit make property of ABC-Insurance-Data-Model

  • In order to link the values of the make property of the ABC-Insurance-Data-Model class to ABC-Insurance-Data-Make instances, the option Automatic reference to class instance (linked) needs to be selected.
  • In this example, the linked class is ABC-Insurance-Data-Make and the source property is .make, which is linked to the id property of the ABC-Insurance-Data-Make class.
  • In addition, under Display and Validation, select pxDropdown and Class Key Value for table type.
  • The Validation Class needs to be set too, in this case it needs to be ABC-Insurance-Data-Make, so that only valid IDs (keys) of that class can be set in .make property of the ABC-Insurance-Data-Model class instances.

Pega 7 Designer Studio, Automatic reference to class instance (linked) for make (key) property

  • Use the Designer Studio navigation to return to the Data Tables view.

Pega 7 Designer Studio, main menu, open Data Tables view

  • Insert Model Records: Click on the cog wheel icon for the car models class name (ABC-Insurance-Data-Model) to insert reference data.

Pega 7 Designer Studio, Data Table view, add new instances to existing data table

  • Insert references for car models and link them to ABC-Insurance-Data-Make instances by using valid class key values values such as M-3 to refer to the car make Audi.
  • PRPC will ensure that the make property can only hold valid ABC-Insurance-Data-Make class keys.
  • If a developer tries to insert a model instance where the make value does not refer to an existing ABC-Insurance-Data-Make instance, an error message will be displayed, i.e. referential integrity is enforced by PRPC.
  • In the below screen shot, M-9 is not a valid class key in the ABC-Insurance-Data-Make data table, and a class key validation error is shown.

Pega 7 Designer Studio, Data Table view, add car model instances ABC-Insurance-Data-Model to data table, class key validation

  • The class key validation will be performed everytime the make property of ABC-Insurance-Data-Model is set in the PRPC system (e.g.: data transfor, activity).

  • In a Section rule, add a new drop-down control. In this case, the parent drop-down will be the reference for car makes.
  • When a car make is selected, a second drop-down will be automatically updated to shows all models for the selected car make.
  • Here, the Section rule applies to the ABC-Insurance-Work-Auto work object class.

Pega 7 Designer Studio, edit section, configure drop-down control

  • Click on the cog wheel icon to configure the drop-down control for car makes.
  • Set the Property to .Make, a property of the work object class. It will hold the selected car make key.
  • On the General tab, configure the drop-down List Source as follows:
Type: Data Page
Data page: D_MakesThe list data page that was created by the Data Table Wizard in step 1.
Property for value: .id – the unique identifier of the ABC-Insurance-Data-Make class.
Property for display text: .pyLabel – the text to show in the drop-down list, e.g.: Honda.

Pega 7 Designer Studio, configure drop-down control, set list source to use data page

  • In this example, the load behavior is set to At screen load (Default).
  • Click on OK and save the section rule. Then test it by clicking on Actions > Preview.
  • The car make drop-down should be properly populated with the car make values as per the underlying data table as shown below.

Pega 7 Designer Studio, preview make drop-down control

  • Before adding the second drop-down that will show the car model options based on the selected make, the Report Definition of the ABC-Insurance-Data-Model class needs to be modified in order to allow an input parameter for filtering the car models by make.
  • In the Application Explorer, open the dataTableListReport of ABC-Insurance-Data-Model.

Open Report Definition named dataTableListReport of class ABC-Insurance-Data-Model using the Application Explorer.

  • Navigate to the Parameters tab of the Report Definition and add a text parameter called MakeKey as shown below.
  • This parameter will hold the value the user selects in the make drop-down field, which represents the unique key of a selected car make instance.

Add parameter to report definition dataTableListReport of ABC-Insurance-Data-Model

  • Next, navigate to the Query tab of the Report Definition and add a filter condition.

Add filter condition on the query tab of the ABC-Insurance-Data-Model dataTableListReport report definition.

  • The filter condition will compare the input parameter MakeKey, which will hold a car make key to the linked class key .make in the ABC-Insurance-Data-Model data table so that the report only returns instances where the make keys match.
  • Make sure to Save the changes to the Report Definition. A warning message will indicate that the .make and .id properties are not optimized, resulting in poor performance.
  • They can be optimized using the Application Explorer. For details on how to optimize the 2 properties, refer to this post: Example of How to Create a Report Definition in Pega 7.
  • It is a good idea to test the report before continuing. To do so, click on Actions > Run. By default, the report will run without any filters applied and all instances will be shown.

Pega 7 Designer Studio, Run report definition dataTableListReport, no filters

  • The filter can be tested by clicking on the link next to the label Filters:. A new dialog allows to specify the value for the filter, in this case the key of a car make instance. When set to M-1 (Honda), the report will only show car model instances for that car make.

Pega 7 Designer Studio, Run report definition dataTableListReport, filter by car make

  • Next, open the data page D_Models for the car models that was automatically generated by the Database Table Wizard and navigate to the Parameters tab. Add an input parameter, in this case called MakeKey, of data type String and set REQUIRED to Yes.

Add input parameter for MakeKey to D_Models of ABC-Insurance-Data-Model

  • On the Definition tab, make sure that Report Definition is selected for the data source and that the correct report name is used. Click on the Parameters link underneath the text fiel for the report name and tick the checkbox Pass current parameter page. This option will pass the input parameter MakeKey of the data page to the specified report definition, where it will be used for the filter condition.

20_D_Models_Definition_Tab

  • Save the changes to the data page. The data page can be tested by clicking on Actions > Run.
  • The initial dialog shows the required MakeKey input parameter. Enter a valid value and click on Execute.

Pega 7 Designer Studio, Run data page D_Models, enter MakeKey parameter

  • An XML representation of the data page is shown and the matching car model instances can be seen in the pxResults structure.

Pega 7 Designer Studio, Run data page D_Models, view XML representation of result

  • Finally, open the UI section rule and add a second drop-down for the car model options.

Pega 7 Designer Studio, Add drop-down control to UI section

  • Click on the cog wheel icon to configure the car model drop-down control.
  • On the General tab, configure the List Source as follows:
Property: .Model – A propery of ABC-Insurance-Work-Auto to store the selected car model key.
Type: Data page
Data page: D_Models – The list data page that was created by the Data Table Wizard in step 1.
Parameter: .MakeProperty of the work object class holding the make key, set when selecting an option from the first drop-down.
Property for value: .id – The unique identifier of the ABC-Insurance-Data-Model class.
Property for display text: .pyLabel – The text to show in the drop-down list, e.g.: Civic.

Pega 7 Designer Studio, Edit drop-down for car model references, filter by selected make key

  • For Load behavior, select After screen renders, so that the options will be loaded when the make drop-down is rendered.
  • In addition, check the checkbox Enable Caching of Options to improve performance by preventing unnecessary loading of the data page and execution of the underlying report definition.
  • Finally, the UI section and the cascading drop-downs can be tested by clicking on Actions > Preview.

Pega 7 Designer Studio, preview UI section, cascading drop-downs for car make and car model

  • Whenever the Make drop-down is changed, the Model drop-down will automatically load the linked car model options.
  • Additional drop-downs can be added following the same steps. Here, a third drop-down could be added to show trim options such as 3.0T Quattro whenever a model is selected.