Implementing Replace Card for Pega Case Management Edition

From PegaWiki
This is the approved revision of this page; it is not the most recent. View the most recent revision.
Jump to navigation Jump to search

Implementing Replace Card for Pega Case Management Edition

Description Learn how to implement the Replace Card service case in an external desktop by using Pega's Digital Experience (DX) APIs.
Version as of 8.7
Application Pega Customer Service
Capability/Industry Area Communications and Media

Before you begin[edit]

For more information about different recommended methodologies, prerequisites, troubleshooting common issues, and recommendations for using Pega Customer Service TM , see Implementing case types using Digital Experience APIs for Pega Customer Service Case Management Edition.

Design methodology for the Replace Card service case[edit]

For the Replace Card service case, the Rebuild UX design methodology was used and tested by using the React starter pack. The changes described below are available in a separate PegaCSFS-Cases-CME ruleset that is included with the product. Also, any changes required to render a case using DX v1 APIs can be easily done by extending the changes in the PegaCSFS-Cases-CME ruleset.

Context for the service case[edit]

For an external desktop agent to launch the Replace card service case, the customer context is required.

For demo purposes, if you are using the React starter pack, set the context as shown in the following figure by passing the context parameters in Application Settings on the React home page:

2021-11-09 11-43-41.jpg

Replace Card service case implementation[edit]

Design changes[edit]

Updating the functional scope[edit]

For a better user experience when using APIs, In the Review fraudulent transaction, removed the option to choose the date based on which transactions were rendered.

Updating the common rule changes[edit]

Since the new confirm harness is a templatized version, it has been rebuilt in the PegaCSFS-Cases-CME ruleset so that it appears as expected for all service cases and all appropriate channels.

Implementation details[edit]

This section describes issues encountered during the implementation and the workarounds that were used.

Select reason for replacement page[edit]

Select reason for replacement page

Custom width for dropdowns is not supported in the React kit[edit]

The length of the dropdown control occupied the entire page because the custom width for dropdowns is not supported in the React kit.

Workaround: Used a 30-70 section template with the SelectReasonForReplacement section inserted in one column to reduce the length of the dropdown control for a better UI experience.

Block card page[edit]

Blocked card page

Validation errors are not supported[edit]

The flow will not progress without selecting the Block card option. A validation happens for the block card checkbox, but the validation message is not supported on the React starter kit. However, the checkbox color is highlighted red if you submit the page without selecting the checkbox.

Workaround: None

2021-11-09 17-11-16.jpg
Confirm card blocked

Binary files are not supported[edit]

Binary images and standard icon options are not supported on the React kit. Only the Icon class is supported to configure icons in the UI.

Workaround: In the Block card page for the hand icon, used an icon class which was embedded inside a paragraph rule.

2021-11-09 17-13-56.jpg

Icon and label alignment[edit]

In the Block card page, a hand icon and a label as caution is displayed related to blocking the card. To align the label and icon horizontally, using templates did not give the expected results because the label was wrapped in the next line. Inline wrapping caused the template to create a blank space.

Workaround: Inserted a two-column table in a paragraph rule to reduce the space between the icon and text. One column is used to embed the section that holds the icon and the second column is used to hold the text (format for text used as bold) to get the label and value aligned horizontally.

Review fraudulent transactions page[edit]

The screen has a date field to select the date based on which the list of transactions for review will be fetched.

Select transactions for investigation

Date filter issue[edit]

When the date is changed for the second time, the list of transactions does not filter based on the selected date.

Label does not reflect the style format[edit]

If any formatting is applied to the label, "heading2" is passed in the response, but still appears as the Standard format for the label.

Workaround: Changed the label to paragraph.

Checkbox Small property is not a supported control in DX API[edit]

Workaround: Changed the control to a checkbox.

2021-11-09 17-16-55.jpg


Pagination is not supported in the table[edit]

Workaround: Added pagination in the RD.

2021-11-09 17-20-31.jpg


Inline wrapping in a layout does not work as expected in React[edit]

In the transaction status section, based on the visibility, the status must be displayed with the control format mentioned. Observed empty space in the React starter kit.

Workaround: Removed the control format and visibility condition, and then changed it to a one-column layout.

Checkbox to select all transactions does not work[edit]

Workaround: None

Confirm fraud qualification page[edit]

Label does not reflect the style format[edit]

Workaround: Changed the label to paragraph.

2021-11-09 17-22-22.jpg

Column label does not align to the right when the text input is aligned to the right[edit]

Text input in the table can be aligned to the right, but the right alignment for the column label does not reflect the alignment.

Workaround: None. Kept the default behavior of the left alignment as is.

Confirm delivery method page[edit]

Run data transform is not supported[edit]

Workaround: Embedded the control into the Capture Deliver Details sections by using the property as the shipping type instead of fetching it from the ShippingAddressPage data page.

2021-11-09 17-24-11.jpg

Unable to clear the data in the ShippingAddressPage data page[edit]

Set value does not work.

Workaround: Set the value in the pre-processing Data transform.

2021-11-09 17-24-27.jpg

Refresh section with a Data transform (present in the Data class) did not work[edit]

The Data transform should be on the same class as that of the section being refreshed.

Workaround: Used a different data page, Declare_FSCountryCodes, to get the CountryName property instead of getting the country code, and then used a Data transform to populate the country name.

2021-11-09 17-24-41.jpg

Confirm page[edit]

Remove rule circumstancing to allow the confirm harness to render in the React kit[edit]

For the confirm harness to render in the React kit, circumstancing must be removed from the rule.

Workaround: Removed circumstancing by moving the rule into the work pool class.

2021-11-09 17-28-03.jpg

Horizontal alignment for the label and values are not supported on the React kit[edit]

The horizontal alignment for the label and values are not supported on the React kit; one column label left and a Read-only single column.

Workaround:  Used the paragraph rule to get the expected UI.

2021-11-09 17-28-56.jpg

Additional Close button displays[edit]

After changing the confirm harness description to "Confirm," another Close button appears on Confirm screen. One button is functional and other one is nonfunctional.

2021-11-09 17-29-15.jpg

Workaround: Changed the short description for the confirm harness to "Confirmation" to remove the functional Close button form UI because you can use the functionality of the Close button on the tab.


You can embed Pega’s out-of-the-box case types into external desktops by using the DX v1 APIs and making suitable changes in the UX. This requires little effort while producing significant outcomes by using Pega Case Management in a client UI of choice.