Close popover
Lee Pederson (pedel)
Principal Instructor
Pegasystems Inc.
pedel Member since 2009 9 posts
Posted: April 6, 2018
Last activity: April 6, 2018

Class-change Responsive Sections Pattern

Suppose a UI design where Sections are only allowed to display Properties with the same Applies-To class as the Section. For example, the 7.3.1 LSA course’s Booking application has a class named “FSG-Data-Event”. Suppose that class is specialized by narrower and narrower types such as FSG-Data-Event-Sport-Football vs FSG-Data-Event-Concert-Symphony.

Now imagine that within the FSG-Data-Event class there is Section named “EditDataEvent”. In FSG-Data-Event-Sport (which extends FSG-Data-Event), there is a Section named “EditDataEventSport”. Within FSG-Data-Event-Sport-Football (which extends FSG-Data-Event-Sport) there is a Section named “EditDataEventSportFootball”.

Also suppose a ValueList Property named “.SectionValueList” where each value represents a unique Section name. A pyDefault Data Transform is defined in each class. Below is an example of how the pyDefault transform would be coded per class within the FSG-Data-Event class hierarchy.

  • SET .SectionValueList(<PREPEND>) = "EditDataEventSportFootball" (FSG-Data-Event-Sport-Football)
  • SET .SectionValueList(<PREPEND>) = "EditDataEventSport" (FSG-Data-Event-Sport)
  • SET .SectionValueList(<PREPEND>) = "EditDataEvent" (FSG-Data-Event)

The final state of the .SectionValueList ValueList starting from a page where pxObjClass = FSG-Data-Event-Sport-Football would be:

  • .SectionValueList(1) = "EditDataEventSportFootball"
  • .SectionValueList(2) = "EditDataEventSport"
  • .SectionValueList(3) = "EditDataEvent"

Within the “EditDataEvent” section exists a Dropdown sourced to a property named “.EventType”. This Dropdown displays options such as “Concert”, “Sport”, etc. On change of this Dropdown the Section would be refreshed after an “EventTypeOnChange” Activity is executed. That Activity would invoke the Page-Change-Class method changing the class of the .Event embedded page. If “Sport’ was selected in the Dropdown, “FSG-Data-Event-Sport” would be supplied for the Page-Change-Class method’s “ObjClassNew” parameter value. For the “Data Transform” parameter value, “pyDefault” would be supplied.

Within the “EditDataEventSport” section a Dropdown sourced to an “.EventSubType” property would exist. This Dropdown would display options such as “Baseball, “Basketball”, and “Football”. On change of this dropdown the Section again would be refreshed after executing the same “EventTypeOnChange” Activity. If “Football" was selected, “FSG-Data-Event-Sport-Football” would be used for the Page-Change-Class method’s “ObjClassNew” parameter value; “pyDefault” would be used for the “Data Transform” parameter value

The end result is that same .Event page can be displayed using Sections that do not overlap in terms of Properties displayed. That is, each Section displays a different “slice” of the properties within the same page. The number of Sections increases as the class of the .Event page becomes more and more specific.

All that is left is to define a section that displays every section in the .SectionValueList. Within the FSG-Data-Event class a section named “EditEventDetails” would exist. Uncheck the "Auto-generated HTML" checkbox. Then enter the following generic JSP text.

<pega:forEach name=".SectionValueList">

<pega:include name="$this-value" type="Rule-HTML-Section" />


Using this pattern, a root Data class can encapsulate how it is displayed, slice-by-slice, regardless how specialized.

Low-Code App Development Data Integration User Experience
Moderation Team has archived post