Richard Marsot (RichardMarsot)
Director, Front-end Development
Pegasystems Inc.
RichardMarsot Member since 2011 27 posts
Posted: October 9, 2020
Last activity: November 4, 2020
Posted: 9 Oct 2020 12:25 EDT
Last activity: 4 Nov 2020 15:56 EST

How to render a list of transactions grouped by date with an RDL

It is very typical to render a list of items grouped by a certain property like a date or a status. While it is possible to use a table layout and group the different columns to render such design, it is sometimes needed to just render the items using a repeat dynamic layout. This document provides the details to implement such design.

Example of design to render a list of items grouped by date

In order to implement this design, we are going to use the 'Categorization' feature available in the presentation tab of the repeat dynamic layout.

Categorization feature in RDL

The section included in the RDL will use the list item with image and status template to render the design.

Details using the list item

For this article, we will render a list of the cases I have created and group them by date. We are going to use the OTB report definition called pyEnteredbyMe at Work-. 

RD to retrieve the list of cases I have created  

The most logical approach would be the categorize by the pxCreateDateTime directly in the RDL property panel. Because the property is of type DateTime, the RDL will split each date into year, month and day and will group them following these 3 variables.

configuring the RDL with pxCreateDateTime

configuring the RDL with pxCreateDateTime render the year, month and day on different rows

As such, to render the expected design where the day is on a single row, it is important that the property that holds the date is a string type property. This can easily be done by running a response data transform in the data page configuration

Adding a response DT in the data page

The data transform will iterate through each items of the page list and convert the pxCreateDateTime property by using some rule utility function to a string. For this example we will store the formatted date into the pyNote property which is of type string

 @FormatDateTime(.pxCreateDateTime,"MMMMM dd yyyy","","")

Content of the DT to convert the date to a string

If we change the RDL categorization to group using pyNote instead of pxCreatedDateTime, then we can get close from the expected design

output after grouping by pyNote

The last part is to style the date and add the grey background - To achieve this, add a helper class on the RDL layout. Lets call the helper class 'rdl-grouped'

adding a new helper class on the rdl

The section that renders the grouped header is called 'pyRDLCategoryHeader' - While it is possible to edit the section directly, the change would apply to all the pages where the categorization is used. Using a helper class on the RDL reduces the impact to other section and can apply the styling to this specific instance.

The CSS file attached to your CSS would use the following selectors:

CSS content to add background for grouped row

Note that in this example we use the background color from the mixin variable called  'row banding'. This is a best practice and makes your CSS override easier to maintain.

Final RDL with grouped items

***Edited by Moderator Marissa to add the Developer Knowledge Share tag***
Pega Platform User Experience Front-End Developer Developer Knowledge Share