Comparing data in a customer journey through Compare UI

Comparing data in a customer journey through Compare UI

Description	Best practices for implementing and using Compare UI
Version as of	8.5
Application	Pega Customer Service
Capability/Industry Area	Communications and Media

Compare UI description

The Compare UI component categorizes and presents structured, itemized data for two predefined periods. The layout helps CSRs to see the difference in results for the two periods, as the UI component compares data across two periods and shows the difference. The out-of-the-box infrastructure merges data across different periods and derives a comparison between them. The component’s user interface and styling are available by default. The implementation team needs to take care of populating each period data in sequence.

The Compare UI component is a generic component that can be used in various industries' use cases to compare the data of multiple periods. In this article, Pega Customer Service for Communications is covered with an example of a bill comparison.

Compare UI reusable component

All the relevant rules supporting the component are present in the PegaCRM-CompareUI ruleset. This ruleset is part of the PegaCRMBase application which is a built-on application for the Customer Service application making this feature a part of Pega Customer Service product offering.

The PegaCRM-CompareUI ruleset will be made available to all as a component for stand-alone applications to leverage this feature.

Reusable components

The Compare UI is designed in a generic way which makes it easy to modify and repurpose the element according to a specific use case. The two key components that make this behavior possible are:

• Reusable UI: The Compare UI consists of groups of sections that help render data according to the user input. Though the data might be different, the same UI components can be easily populated with data by using underlying extension points.
• Reusable data structure: The user data and type might be different but by mapping the user data to the generic data structure provided for this component the data can be easily rendered on the Compare UI.

UI structure

The Compare UI consist of three major sections:

• Summary section: Contains the top summary, additional info (conditional display), and navigation between periods.
• Comparison section: Contains a list of categories and elements within each category. At the element level, the section displays items and the comparison between them.
• Compare extension section: A placeholder section for implementing apps.

Each category contains a list of elements. Each element has element-level data and three items, that is, the first item, the second item, and their comparison. Under each element, additional details can be displayed on the item level.

Similarly, each summary contains only one element. Each element has element-level data and three items, that is, the first item, the second item, and their comparison.

Each element can be set on either of the three levels (top, sub, sub2) to represent hierarchical data.

Data structure

The representation of the summary, categories, elements, and items in the Compare UI is derived from the structure in the Embed-CompareItems class.

The .CompareItems page property available in @baseclass has the Embed-CompareItems class as its page definition.

Overall, there are four key properties in the Embed-CompareItems class that populate the Compare UI with data:

• TopSummary page property (page definition: Embed-CompareItems-Summary)
• AdditionalInfo page property (page definition: Embed-CompareItems-Summary)
• Categories page list property (a list of categories; page definition: Embed-CompareItems-Category)
• ItemizedCategories page list property (a list of additional categories on the item level; page definition: Embed-CompareItems-ItemizedCategory)

Data structure for Compare UI

Use case: Implementing Compare UI

In this use case, the Compare UI element has been adopted in Pega Customer Service for Communications to do a bill compare between two bill cycles. This UI is used in the Billing composite (customer 360 degree view) and in the Bill Compare service case.

Implementation steps

1. Embed the ShowComparison section. To incorporate the Compare UI in a composite, the ShowComparison section was embedded into the CPMCompositeTabs section.
2. Call data transform to set .CompareItems page property on the primary page. The Compare UI requires initial values that are set in the CompareItems page property. The CompareItems page property will be added to the primary page by invoking the SetCompareItemsPage data transform. The ShowComparison section needs to be loaded on the same primary page context. To load the compare UI with billing data, we pass the contact ID as the primary identifier, account number as the secondary identifier, the periods to compare, and other default values by using the SetCompareItemsPage data transform in the business process flow. For composites and service cases, the SetCompareItemsPage data transform is invoked in the SetCompositeValues data transform.
3. Set the period navigation behavior and default navigation properties. The default styling and billing period values are set in the SetCompareItemsPage data transform by overriding the setting to Pega Customer Service for Communications. The run-time behavior of the bill period navigation is set by overriding the UpdateFromToMonths data transform.
4. Fetch each billing period data with the PopulateItems data transform. Each billing period data will be fetched through the D_PopulateItems data page. There will be two copies of the data page: one corresponding to the to period and the other for the from period. These copies act as input to the D_CompareItems data page. In Pega Customer Service for Communications, the PopulateItems data transform has been overridden to place the source and to populate the data structure required for Compare UI.
5. Determine the logic for displaying additional details with the ShowItemizedInfo when rule. In Pega Customer Service for Communications, the ShowItemizedInfo has been overridden to only show the additional details for taxes of the current and previous months and not for the next bill.
6. Populate data for additional details with the CreateAdditionalInformation data transform. In Pega Customer Service for Communications, the CreateAdditionalInformation data transform has been overridden to place the source and to populate the data structure required to display the additional details on the item level.
7. Populate the summary data with the SetSummaryData data transform. In Pega Customer Service for Communications, the SetSummaryData has been overridden to only show the TopSummary overall billing data based on two bill periods and the cumulative increase or decrease in the bill amount.

Extension points

Rule type	Rule name	Purpose
Section	CompareExtn	Placeholder section to display implementation-specific data along with the comparison section.
Data transform	CompareValue	Place comparison logic based on the item type.
Activity	PopulateItems	Extension points to determine a source and populate the data based on a given period.
Data transform	PopulateItems	Extension points to populate the data based on a given period.
Data transform	SetCompareItemsPage	Populates the .CompareItems page property with the data that will act as input to populate data from the source and other default values.
When	ShowItemizedInfo	Place logic to determine when to show additional details on the item level for an element.
Data transform	CreateAdditionalInformation	Extension point to populate the data for additional details.
Data transform	Determine Summary	Place logic to determine the summary for additional details.
Section	ItemizedElementsSummary	Placeholder section to display a summary for additional details in the required format.
Activity	SetSummaryData	Extension points to determine a source and populate the summary data.
Data transform	SetSummaryData	Extension points to populate the summary data.
Data transform	UpdateFromToMonths	Dynamic styling and value for the period navigation.

Best practices and guidelines for implementing Compare UI

• When you populate data for a bill period, ensure that you populate the data in sequence and hierarchically, that is, with the category followed by its elements.
• Ensure that each category and element that you create has a unique identifier populated in CategoryID and ElementID. These values play a pivotal role in combining and comparing of data.
• Use only the extension points to customize the behavior and populate data. Do not modify or override any rules to customize further. If there is any need to do so, contact the Spectrum team with the use case.

Summary

The Compare UI component is a useful component to determine the categorized items value difference or similarity to check for particular patterns. Pega Customer Service for Communications uses the Compare UI component to show the bill comparison to a customer service representative, which helps CSRs to quickly determine and help the customer on the billing query. The component can easily serve other industry use cases, such as health care or financial services, to compare two different health reports, policies, or financial services products and risk profiles.