This article provides practical guide to implementing the Compare and Select pattern using Constellation UI with Data Reference.

Enjoying this article, please refer to the link for more articles - Constellation 101

"How to implement Compare and Select pattern in Constellation UI," by Richard Marsot, explores an extended approach to this design pattern. The original article thoroughly evaluates three methods, ultimately using a DX custom component with a card layout and the possibility of selection using a Case Reference scenario. This article will build upon the pattern implementation with the DX Component, delving into additional functionalities and use cases with Data Reference.

Implementation

Pre-requisites:

Import the DX Component library using the follow documentation:  https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/templates-compare-table-layout--docs

Before start: Make sure that your application has the ruleset is imported to use the DX Component.

Implementation steps:

1. Create a Data Object (in this example we're using "Quotation" data type), it must have an "ID" property;  

2. Create a property of type "Data Reference" in the Data Model of the casetype, that will be resposible for the selected object;

3. Create a property Page List type in the Data Model of the casetype, that will be resposible for query the options rendered to be selected;

There is an adjustment that needs to be done with the property that uploads the quote information to get permission to configure it in app studio.

• Perform a "private edit" on the page list and change it for "Manual" data access, so it is allowed to configure it in app studio.
• Then, go back to the configuration with the data referenced in your data page.

For more information, refer to the article below: https://support.pega.com/discussion/how-implement-compare-and-select-pattern-constellation-ui

4. Configure the view with Comparison Table Layout Template, select "Radio button cards" display format and other apply other configurations;

5. Use the property created as a Data Reference and select the ID in the "Selection property" field;

Implementation challenge faced:

To guarantee that FIELD_CHANGE action assigning a value during the selection, ensure that Region A is configured with the ID property in its list of rendered fields. When the ID property is omitted, the value defined in the Selection Property will not be automatically set upon rendering, as FIELD_CHANGE relies on the presence of the ID to resolve the selected item.

Why?

While debugging the component's behavior with Data Reference scenario, a loop was observed within the fields state. The logic checks whether the loop index “j” is greater than 0. This condition ensures that the “child.label” performs a validation by comparing its value to the ID property.

As highlighted in the screenshot, the ID must be positioned starting from second item within Region A. This placement ensures that the objectID is correctly assigned to the selected object—specifically, it will carry the value from the ID (QuotationList) field. This setup is essential for enabling accurate identification and selection within the Compare and Select pattern with Data Reference.