Using a Page List for a Dropdown and Sorting the Options with a Data Transform in Pega 7.1.9

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 show how to sort the entries of a Dropdown control that is backed by a List-type Data Page. In addition, another Data Transform is shown that sorts the Page List based on two properties.

Summary

  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

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

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

  • 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 “Using a Page List for a Dropdown and Sorting the Options with a Data Transform in Pega 7.1.9

  1. Hi Bruno,

    You made my task easy, I am really thankful to you very much for clarifying my doubts, I also request you to do an article like this on Repeating Grid Layout.

    • Hi Aalok,

      I am happy I posted something useful 🙂 Yes, repeating grid would be a good topic. I was planning to post an article on it. Stay tuned!

  2. Awesome Explanation…
    But a small doubt if someone can please clarify it…
    I am not finding the HTML and Activity files mentioned as per the blog when i am trying to recreate a similar scenario. How to access these HTML and Activity files?

Leave a Reply