Using Pega Case Management Edition with the React Starter Pack

Using Pega Case Management Edition with the React Starter Pack

Description	Learn how to render a Customer Service case in an external desktop by using Pega's Digital Experience APIs with React Starter Pack
Version as of	8.8
Application	Pega Customer Service
Capability/Industry Area	Service Cases / Tasks

Before you begin

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

Implementing case types

This section describes how to implement case types by using DX v1 APIs with React Starter Pack.

Developers who prefer to use other modern UI frameworks such as React and Angular can leverage open APIs to dynamically use Pega design capabilities as a REST-enabled service to power their front-end UI framework of choice.

For this example, download the React Starter Pack from Pega Marketplace.

React Starter Pack

For the Case Management Edition case-type implementation, the React Starter Pack component was used. It provides a Case Worker Portal that is built with a React framework that communicates with Pega Infinity by using the Pega Digital Experience APIs.

For the latest list of supported controls, layouts, and action sets, see the README.md file under your React Starter Pack installation directory in

…\ pega-react path.

To view the implementation notes and key release updates, see ...\pega-react\docs.

Step 1: Add the CME ruleset

You need to add both the Customer Service and the implementation-specific CME rulesets in the implementation application.

Step 2: Establish the connection

  In the React Starter Pack, set the endpoints in the endpoints.js file, as shown in the following figure:

Step 3: Set the context for the service case

Set the context as shown in the following figure by passing the context parameters in the application settings on the React home page:

Step 4: Update authentication and authorization settings

In the React Starter Pack configuration, enable the OAuth protocol, and then in the CableCoV1Oauth client registration, update the Client id in the endpoints.js file.

Common observations with React Starter Pack

Feature	Comments	Recommendations
Layout support	List of supported layouts is available in the Readme.md file.	Rebuild the UI for a better user experience by using the supported layouts.
Controls support	List of supported fields is available in Readme.md file.	Rebuild the UI for a better user experience by using the supported controls.
Actions	List of supported actions such as refresh section, post value, and set value is available in the Readme.md file.	Rebuild the UI for a better user experience by using the supported actions.
Dashboard widgets	Currently, the work list and work queue widgets are available.	If you need to add a custom widget, modify the React Starter Pack accordingly.