Group Pega 7 Dropdown Options by Property

A Data Page can be used to provide the source for the options of a dropdown UI control in Pega 7. The dropdown control can be configured to either show a simple list of items or to aggregate the items with a Group By configuration.

  • The below screen shot shows a Pega drop down UI control, where the options (…here US cities) are grouped by a property (…here US state). This post shows how such a drop down can be quickly created in Pega 7.1.9.

Screen shot of Pega 7 section with Dropdown grouped options


  1. Description of Data Type and Data Page for Storing Cities
  2. Source Options by Data Page and Group Pega 7 Dropdown by Property

Related Posts

1  Description of Data Type and Data Page for Storing Cities

  • In this example, a Data Type named PGX-MyStore-Data-City was created using the Data Explorer.
  • The Records tab of that Data Type shows 14 records that were created:

Pega 7 Data Type - PGX-MyStore-Data-City, Records Tab

  • The Properties of the City Data Type are shown in the Data Explorer in the above screen shot.
  • When the Data Type was created, 2 Data Pages were generated as well.
  • D_CityList is a Page List and contains the 14 instances of PGX-MyStore-Data-City.

2  Source Options by Data Page and Group Pega 7 Dropdown by Property

  • A section contains a dropdown that allows to select a city based on the D_CityList Data Page.

Pega 7 Dropdown - Select City

  • The dropdown’s properties are shown below. The Data Page D_CityList is used for the List Source.
  • The Name property is used for displaying the options in the dropdown in ascending order.
  • The check box Group Items is checked and the property to group by is set to .State.

Pega 7 Dropdown Configuration - Configure List Source, Group By

  • Running the section shows the dropdown with the city options grouped by US state.

Pega 7 Dropdown - Preview Page with City Dropdown

  • Note that the city names within each group are sorted in ascending order.
  • The order can be changed using the Report Definition DataTableEditorReport that was automatically created when the City Data Type was setup. See Example of How to Create Report Definitions in Pega 7 for details on Pega Report Definitions.
  • The Query tab of the Report Definition is shown below.

Pega 7 Edit Report Definition - City Data Type Edit Columns

  • Here, the City property Population is used to sort the records in descending order using Highest to lowest for the sort type value.

Pega 7 Dropdown - Sort Cities by Population Size

  • When running the section again, the city names within each State group are now sorted im descending order by Population, i.e. New York City comes first within the New York state group (…see screen shot of City records at the beginning of this section for population values).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.