Sort Pega 7 Dropdown Options with a Data Transform

A Data Transform can be used in Pega 7.1.9 to sort list structures such as a Page List. In this example, a Data Transform is used to sort Pega 7 dropdown options that are backed by a List-type Data Page. In addition, another Data Transform is shown that sorts the Page List based on two properties.


  1. Description of Data Type and Data Page for Storing Cell Phone Models
  2. Using an Activity, Section and HTML Rule to Display a Dropdown of Phones
  3. Using a Data Transform to Sort the Page List

Related Posts

1  Description of Data Type and Data Page for Storing Cell Phone Models

  • Here, a Data Type named PGX-MyStore-Data-Phone was created using the Data Explorer.
  • The Definition tab of the Data Type shows its properties:

Data Type Rule - Definition Tab - Phone

  • The Records tab shows the 13 instances that have been created for this Data Type.

Data Type Rule - Records Tab - Phone

  • The Sources tab shows the 2 Data Pages that have been created automatically.

Data Type Rule - Sources Tab - Phone

  • The data page D_PhoneList is of type List and can be used to retrieve all instances of the PGX-MyStore-Data-Phone Data Type.

Data Page - Definition Tab - ListPhone

  • Use Actions > Run to run the data page and view its XML representation. There will be a node called pxResults that contains the list of phones.

2  Using an Activity, Section and HTML rule to Display a Dropdown of Phones

  • A form was created to show a dropdown that allows to select a phone based on the D_PhoneList Data Page.

Section - Runtime - Show Dropdown for Phone Selection - Default no Selection

  • Clicking on the dropdown shows the options provided by the Data Page. Note that the order of the items is the same as shown on Data Type > Phone > Records, i.e. the list is sorted ascending by the ID property of PGX-MyStore-Data-Phone.

Section - Runtime - Show Dropdown for Phone Selection - Display Dropdown Options

  • The following rules were used to create the HTML page with the phone dropdown control:
An Activity rule named ShowPhoneOrderSection
A HTML rule named MyPhoneStore
A Section rule named PhoneOrderForm
  • The ShowPhoneOrderSection Section rule containing the dropdown control is shown below:

Edit Section Rule - PhoneOrderForm - Design Tab

  • The configuration of the Dropdown rule is shown below, note the List source section, which refers to the Data Page:

Phone Selection Dropdown - Dropdown Properties

  • The MyPhoneStore HTML rule uses the <pega:include> tag to include the section rule by name.
<pega:include name='PhoneOrderForm' type='Rule-HTML-Section'></pega:include>

HTML Rule - HTML Tab- MyPhoneStore

  • The ShowPhoneOrderSection Activity rule contains one step that uses the Show-HTML method to render and display the HTML rule.

Activity Rule - Steps Tab - ShowPhoneOrderSection

  • When running the Activity using Actions > Run, it will display the HTML page shown at the beginning of this section.

3  Using a Data Transform to Sort the Page List

  • A new Data Transform called SortByPhoneNameASC with an applies-to class of PGX-MyStore-Data-Phone was created. On the Pages & Classes tab, the following entries have to be added:
D_PhoneList with class name Code-Pega-List
D_PhoneList.pxResults with class name PGX-MyStore-Data-Phone

Data Transform Rule - Pages and Classes Tab - SortByPhoneNumberASC

  • On the Definition tab, the first and only step uses the Sort method.

Data Transform Rule - Definition Tab - SortByPhoneNumberASC

  • The gear icon is used to configure the Sort method. Clicking on it opens a new layer.

Data Transform Rule - Definition Tab - Sorting Properties

  • Here, the Sort method is configured to sort the list of phones by the Name property of PGX-MyStore-Data-Phone in ascending order.
  • The ShowPhoneOrderSection Activity was modified and a step was added before displaying the HTML page.
  • The first step in the modified Activity uses the Apply-DataTransform method to use the SortByPhoneNameASC Data Transform for sorting the Data Page.

Activity Rule - Steps Tab - ShowPhoneOrderSection - Apply-DataTransform

  • The step page is referring to a page that is defined on Pages & Classes. This entry is needed because the Data Transform’s applies-to class is different than that of the Activity, which is PGX-MyStore-Work.

Activity Rule - Pages and Classes Tab - ShowPhoneOrderSection

  • When the Activity is run again, the options in the phone dropdown control are now sorted by Name in ascending order.

Section Rule - Runtime - Phone Dropdown Options Sorted by Name in Ascending Order

  • Another Data Transform was created to sort the phone list by Memory (ASC) first and then by ScreenSize (DESC). The configuration is shown below.
  • If two or more phones have the same amount of memory, they will be sorted by screen size in descending order, i.e. the one with the largest screen size will be on top in that subset of the list.

Data Transform Rule - Definition Tab - Sorting Properties - Sort By Two Proerpties, Memory and Screen Size

  • The Data Transform can be run by using Actions > Run.
  • In the Run Data Transform dialog, click on the Trace button first and the on the Run button.

Data Transform - Trace and Run Buttons - SortByPhoneMemoryAndScreenSize

  • In the Tracer, where the event type is Action End click on the cell that lists the Data Page, here D_PhoneList, to view the Data Page after it has been sorted by the Data Transform.

Data Transform Rule - Use Tracer to View Data Transform and Data Page

  • The dialog lists the items of D_PhoneList.pxResults.

Tracer - View Properties on Data Page D_PhoneList

  • The phones are sorted in ascending order by memory first. In addition, the phones with 16GB of memory are sorted in descending order by screen size.

6 thoughts on “Sort Pega 7 Dropdown Options with a Data Transform

Leave a Reply

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