Implementing Add Mobile Service for Pega Case Management Edition

From PegaWiki
This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Implementing Add Mobile Service for Pega Case Management Edition

Description Learn how to implement the Add Mobile Service case in an external desktop 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 on different recommended methodologies, prerequisites, troubleshooting common issues and recommendations for using Pega Customer Service TM Case Management Edition, see Implementing Case types using Digital Experience APIs for Pega Customer Service Case Management Edition

Design methodology for the Add Mobile Service case[edit]

For the Add Mobile 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 PegaCSC-Cases-CME ruleset that is included with the product. Also, any changes for rendering a case using DX v1 APIs can be done by extending the changes in PegaCSC-Cases-CME ruleset.

Context for the service case[edit]

For an external desktop agent to launch the Add Mobile Service case, the customer context is required which is primarily based on Contact Id and Account number.

For demo purposes, if you are using the React starter pack, the context parameters can be dynamically passed from the Application Settings option as shown in the following figure:

Application settings page

Add Mobile Service case implementation[edit]

The Add Mobile Service case in Pega Customer Service for Communications is built on top of the Pega Customer Service framework, and consists of nine pages that are used to perform the following functions:

Page Purpose
Select a device Select the new device.
Configure selected devices Choose the configuration of the newly selected device.
Select a plan Select applicable plan for the selected device.
Select a plan add-on Select add-ons for the device.
Preview cart Review all of the previous selections.
Provide shipping details Capture the customer's shipping related details.
Provide payment details Handle the payment related details.
Review all details Review the details that were captured as part of the case life cycle.
Confirmation Final confirmation summarizing the total details that were captured.

Design Changes[edit]

Design Changes[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.

Common rule changes[edit]

Because the new confirm harness is a templatized version, it has been rebuilt in the PegaCSC-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 a device page[edit]

CSC CME 2.jpg

Search functionality does not work[edit]

The search functionality does not work because the row visibility condition configured on the table is not executed.

Workaround: Removed the search box and added a dropdown box to select the brand.

Table pagination is not supported[edit]

Workaround: Added a dropdown box for the brands to reduce the list of devices.

Action-set configured in the table does not work[edit]

Action-set in the table does not work when running a Data Transform for device selection.

Workaround: Added a checkbox for device selection in the table.

Add row and delete row are displayed in table footer when they are hidden in the table configuration[edit]

Workaround: None.

If helper text in a button is configured to a property, it does not show the value[edit]

Workaround: None.

On-click actions do not work[edit]

On-click actions that are configured to run data transforms on the Configure line button do not work.

Workaround: Moved the Configure device page to the next page.

CSC CME 2 1.jpg

CSC CME 2 2.jpg  

Configure selected devices page[edit]

CSC CME 3.jpg

Field value cannot directly refer to a property[edit]

Workaround: Passed the property as a parameter in the Field value.

CSC CME 3 1.jpg

Collapsible section is not shown[edit]

Workaround: None.

CSC CME 3 2.jpg

 Rich Text Editor (RTE) is not supported[edit]

Workaround: Used a paragraph or text control.

CSC CME 3 6.png

Repeated dynamic layout visibility does not work[edit]

Workaround: None.

Inline layout format does not display as expected[edit]

Workaround: None.

CSC CME 3 3.jpg

CSC CME 3 4.jpg

CSC CME 3 5.png

DX API response contains the inline layout format, but the React starter kit does not render the section in inline format[edit]

Workaround: None.

Select a plan page[edit]

CSC CME 4.png

Conditional table display appeared incorrectly[edit]

The tables in both paths displayed simultaneously.

Workaround: Displayed only grids that will appear in the device's first flow because the first flow is the default. There will be no start screen and only one grid will appear.

CSC CME 4 1.png

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

Workaround: Create a field value and pass the properties by adding a parameter in the Field value.

Label does not reflect the style format[edit]

Workaround: None.

Radio button selection did not appear in the table[edit]

Workaround: Used a checkbox as a replacement.

Select a plan add-on page[edit]

CSC CME 5.png

Clicking the Action-Set does not trigger a data transform[edit]

Workaround: Moved the Select a plan add-on page to another view.

The text input in the table can be aligned right[edit]

Workaround: None. Kept the left alignment default behavior.

Preview cart page[edit]

CSC CME 6.png

Conditional Validation does not work for labels that display taxes[edit]

Workaround: Made a generic Table label.

Line number categorization is not shown on the page[edit]

Workaround: None.

CSC CME 5 1.png

Header for Monthly and Today labels are not right-aligned[edit]

Workaround: Used a paragraph rule to right-align the text.

Cannot use a button to check for number portability[edit]

Cannot use a button to check for number portability because the data transform used in the Action set is not executed.

Workaround: Visibility when rules for showing the number portability response include the logic to evaluate the phone number that is entered.

Validation error from the Edit validate rule is not shown[edit]

Validation error from the Edit validate rule is not shown for an individual field. Instead, it is displayed as a generic message at the bottom of the page. The following figure shows an Edit validate rule used to check whether the entered value is numeric:

CSC CME 6 2.png

Minimum and maximum characters configured in the input textbox does not work[edit]

Workaround: None.

CSC CME 6 3.png

Provide shipping details[edit]

CSC CME 7.png

No observations on this screen.

Provide payment details[edit]

CSC CME 8.png

Cannot use the SSN check button[edit]

Cannot use the SSN check button because the data transforms configured in the actions of the button is not executed.

Workaround: Used Visibility When rules to show the credit check results and execute an activity which invokes the logic to validate the SSN that is entered.

Date control display issues for year selection[edit]

Date control display issues make it difficult to choose the past years for the Date of birth field.

Workaround: None.

Date control edit options set to Auto does not work[edit]

If the Date control edit options were set to Auto, after selecting the date, the React kit shows a white page.

Workaround: Changed the editable settings to use Show Date. Any use cases that need both date and time to be selected will not work.

CSC CME 8 1.png

Issues with the label’s bottom spacing[edit]

The label’s bottom spacing makes the UI appear ungrouped.

Workaround: Used a text with constant value, which did not show bolded text. A Paragraph rule can also be used, which requires creating multiple paragraph rules for each label.

CSC CME 8 2.png

Review all details[edit]

CSC CME 9.png

Read-only single column template does not render the expected UI[edit]

Labels are positioned left and values are positioned right.

Workaround: None.

CSC CME 9 1.png

CSC CME 9 2.png

Confirmation[edit]

CSC CME 10.png

Text control using a Field value is not sent in response[edit]

Workaround: Use the text control with a constant value.

CSC CME 10 1.png


CSC CME 10 2.png

Close button does not work[edit]

Workaround: None.

Conclusion[edit]

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.