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


  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.


  • 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.

Iterating over a Page List in a Data Transform in Pega 7

In this example, a Data Transform is used to iterate over a data page that uses a list structure. See this example on how to create a data page using the Data Table Wizard. For this example, a data page that is backed by a data table of car makes is used to show how to iterate over it in a data transform.

Related Posts


  1. Description of Data Table for Class ABC-Insurance-Data-Make Used in this Example
  2. List Data Page for ABC-Insurance-Data-Make Rule Instances
  3. Creating a Data Transform for Iterating over the Data Page

  • The screen shot below shows an example of a Data Table. In this case, the rows represent car makes. See the link under Related Posts on how the data table was created.
  • The data table contains instances of the class ABC-Insurance-Data-Make. This class has the properties ID (Integer) and pyLabel (Text).
  • The ID is a unique identifier (Key) and the pyLabel property contains the actual car make values.

Pega 7 Edit Data TAble Instances

  • The below screen shot shows the configuration of a list-structure data page named D_Makes. Its purpose is to store a list of car makes. The Data Page Definition section is configured as follows:
Structure: list
Object Type: ABC-Insurance-Data-Make
Scope: Node
Data Source: Report Definition
  • Node scope causes the data page to be available to all users on a node (i.e. it will be loaded once per PRPC node).
  • The Data Table Wizard creates a default Report Definition. Here it is named dataTableListReport and it returns all rows in the underlying data table.

Pega 7 Edit Data Page - Data Page Definition and Data Sources

  • The data page can be unit tested by clicking on ActionsRun.
  • The XML of the data page will be shown and the node pxResults (a PageList) will contain all of the rows in the data table.

Run DataPage XML Output

  • After running the data page once, it will appear in the Clipboard Tool under Data Pages > Node.
  • Due to its Node scope, the data page D_Makes will remain on the clipboard until the PRPC instance is restarted or the data page is deleted using the Designer Studio or the Clipboard Tool is used to delete it (see the Actions button in upper right-hand corner).

Pega 7 Clipboard Viewer Data Page pxResults

  • In the Designer Studio, a data transform can be created using +Create > Data Model > Data Transform.

Pega 7 Designer Studio - Create New Data Transform

  • The Data Transform Record Configuration form requires the user to enter a name, here it is IterateOverMakes and to select an Apply to class. Here, the class is ABC-Insurance-Data-Make.
  • Click on the Create and open button to create the data transform rule.

Pega 7 Create Data Transform Form - Iterating over Data Page pxResults

  • On the Parameters tab, an output parameter named MakeString of data type String is defined.
  • It will be used to return a comma-separated String of car makes that is created by the data transform while it iterates over the data page D_Makes.

Pega 7 Data Transform - Parameters Tab Output Parameter

  • On the Pages & Classes tab, the data page D_Makes needs to be listed with a class of Code-Pega-List.
  • The class Code-Pega-List has a page list property named pxResults which holds instances of the object type specified when the data page was configured. Here the object type is ABC-Insurance-Data-Make.
  • Specify the class of D_Makes.pxResults as shown below.

Pega 7 Data Transform - Pages and Classes Tab

  • On the Definition tab, the first row will use the action For Each Page In to iterate over the D_Makes.pxResults page list.
  • The checkbox Also use each page as source context in the Source column should be checked so that the . dot operator can be used to refer directly to the current page of the iteration instead of having to use D_Makes.pxResults(<CURRENT>).
  • In the second row, param.MakeString is concatenated with the pyLabel property of the current ABC-Insurance-Auto-Make instance.
  • The third row uses a simple expression to remove the last comma in the comma-separated string after the iteration. The complete expression is:

Pega 7 Data Transform - Definition Tab

  • Save the data transform and open the Tracer. Make sure that the check boxes for Start and End for data transforms under the section Events to Trace are checked.

Pega 7 Tracer Settings - Enable Data Transforms

  • The data transform can be unit tested by selecting Actions > Run and then clicking on the Execute button in the new window. Note: Make sure that the Tracer is running before executing the data transform.

Pega 7 Test Page for Running Data Transform

  • A new window opens and shows XML output from executing the data transform. The pzStatus will contain the value valid if the exeution was successful.

Pega 7 Data Transform - Run XML Output pzStatus is valid

  • Switch to the Tracer window and search for the row where the event type shows Data Transform End and click on that row.

Pega 7 Tracer Window - Data Transform End step

  • A new window opens, showing the properties of the test page that was created for running the data transform. Click on the link =unnamed= link of the Parameter Page Name property in the TraceEvent[8] page.

Pega 7 Tracer - Properties of Page TraceEvent

  • This will open the TraceEvent[=unnamed=] page, showing the output parameter named MakeString which was set by concatenating the car make values while iterating over the data page D_Makes to generate a comma-separated String value of the car makes.
  • The page also shows some Pega out-of-the-box properties, prefixed with py or pz.
  • In the below screen shot, a property named pyForEachCount with a value of 8 is shown. This is the number of iterations that were executed by the For Each Page In data transform action (i.e. the number of items in the D_Makes.pxResults list).

Pega 7 Tracer - Properties on Page TraceEvent - Data Page Entries

  • Note: The tracer also shows that Code-Pega-List maintains the order of the entries in the data table.
  • Pega is implemented in Java and the underlying Java interface- and implementation classes for Code-Pega-List are java.util.List and java.util.ArrayList from the java.util package.

Please register to add comments or feedback!

Example of 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 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.

Pega 7 Auto Complete Control Example

Related Posts


  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 view by clicking on Designer Studio > Data Model > Data Tables > Data Tables:

Pega 7 Designer Studio - View Data Tables List

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

Pega 7 Data Model List of Available 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.

Pega 7 Data Table Wizard - Generate Data Table

  • 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.
  • 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.
  • 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.

Pega 7 Data Table View - New Data Table Available

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

Pega 7 Data Table View - Edit Data Table Instances

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

Pega 7 Data Table View - Insert Data Table Instance

  • 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.

Pega 7 Data Table View - Insert Instance Error - This instance already exists

  • 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:

Pega 7 Data Table View - Showing 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.

Pega 7 Application Explorer - Case Type Property

  • 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.

Pega 7 Designer Studio - Edit Section - Advanced - Add Auto Complete Control

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

Pega 7 Designer Studio - Edit Section - Configure Auto Complete Control

  • 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.

Pega 7 Designer Studio - Auto Complete Control - General tab

  • 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.

Pega 7 Designer Studio - Auto Complete Control - General tab - Placeholder and List Source

  • 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.

Pega 7 Designer Studio - Auto Complete Control - List Source Configuration

  • 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.

Pega 7 Designer Studio - Configure Auto Complete Control - Search Results Configuration

  • 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.

Pega 7 Auto Complete Control Example

  • 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.