Using Pega Case Management Edition with the React Starter Pack

From PegaWiki
Pega Customer Service Case Management Edition in React Starter Pack / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

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[edit]

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[edit]

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[edit]

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[edit]

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

Step 2: Establish the connection[edit]

  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[edit]

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[edit]

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.

Oauth for React.png

Common observations with React Starter Pack[edit]

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.