Setting up the local Theme UI-Kit application and service request

Log in to the local Theme UI-Kit application as an administrator. In the navigation pane of Dev Studio, click Records > SysAdmin > Remote System. Click Create. On the New tab, in the Remote system short description field, enter Web Self-service. In the System Name field, enter WSS.

Click Create and open, and then select the Connect using mashup radio button.

In the Connect using mashup section, in the System URL field, enter the URL of the remote application.

In the Application name field, enter the ID of the remote application, SelfService, and then click Save.

Now, create a local case type for the Return product remote Constellation service request to allow CSRs to process it in the Interaction Portal or Back Office Portal. The local case type acts as a wrapper for the remote case, exposing it to the CSRs in the Theme UI-Kit application.

In the local Theme UI-Kit application, open App Studio. In the navigation pane of App Studio, click Case types, and then click New.

In the Case type name field, enter Return product. Expand the Case template section, and then, in the Template list, select Customer Service Remote Template.

Expand the Advanced section, and then, in the Reuse assets from list, select A remote case template. Selecting this value ensures that Pega Customer Service adds the new local case type to the PegaCA-Work-Service-Remote hierarchy or its corresponding implementation class. Click Next.

In the new case type, click the Settings tab, and then click Locking. Select Allow multiple users to enable simultaneous case editing.

Now, associate the remote case type with the local one. Create a mapping of properties between the local Theme UI-Kit case type and the remote Constellation case type so that the case types can share data on instantiation and during intake.

This mapping applies only to cases that the system initiates from a CSR-assisted interaction in the Interaction Portal or Back Office Portal.

On the Settings tab, click Remote case settings. Select the React-based UI option. In the Remote application list, select your remote application. In the Case type list, select Return product.

Begin the mapping process. In the Map values to Initialize properties for Instantiation section, identify the properties to send from the local Theme UI-Kit application to the remote Constellation application to initialize properties for instantiation. Click Add mapping. In the Source property or value (from current case) field, select the local property .ContactID. In the Target property (from remote case), select the remote property, .Contact.ContactID.

Next, in the Map exposed properties from the remote case for UI interactions section, identify the properties to send to the local application from the remote application for UI interactions. Click Save.

Next, connect your local Theme UI-Kit application to the Web embed channel that you set up in your remote Constellation application and configure the authentication.

In the header of Dev Studio, search for and open the cySetChannelConfigurations data transform. Make sure that the data transform is saved in your implementation service class layer.

In the PegaServerUrl parameter row, set the Source to the URL of the remote Constellation application. You can find this information in the pega-embed element in the pegaServerUrl attribute in Web embed code of the remote application.

Now, edit the .pxObjClass-related rows of the data transform by populating their Source values with those in the Web embed code. Right-click on row 5, and then select Enable. Populate the following rows:

• For the Target value of Param.AppAlias, enter the Source value of the embedded remote application, which you find in the pega-embed element of appAlias.
• For the Target value of ClientID, enter the Source value from the OAuth 2.0 client registration record, which you find in the pega-embed element of ClientID.
• For the Target value of StaticContentURL, enter the Source value of the URL to the Constellation Static Content service, which you find in the pega-embed element of StaticContentURL.

Click Save.

Select the workbasket to which you want to route the remote Constellation service requests.

In the header of Dev Studio, search for and open the CPMWorkBasketSettings data transform. For the .czRemoteCaseWB target, in the Source column, enter SelfServiceRequests to add the name of the work queue, and then click Save.

Now, configure the remote cases to dispaly in the local application widgets with the correct case ID from the remote application.

In the header of Dev Studio, search for and open the Displayremotecasedata when rule. Set the When rule to return True, and then save the change.

Next, override a set of rules in your implementation service class layer to optimize the czRemoteCaseId property in that class.

First, configure a report definition so that the remote cases are displayed in the Recent tasks section for the interaction. In the header of Dev Studio, search for and open the GetRemoteCases report definition. On the Report definition page, click Save As. In the Apply to section, enter the implementation service class name OYHW5T-Customer-Work-Service.

Click Create and open.

Repeat the same steps for the D_RemoteCases data page.

Next, configure a report definition so that the remote cases are displayed in common remote case workbasket. In the header of Dev Studio, search for and open the CSWorkBasketList report definition. Click Save As, and then click Create and open. On the Report definition page, click the Data Access tab. In the Class joints section, in the Class Name field, enter OYHW5T-Customer-Work-Service. Click the Pages & Classes tab. Set the Class for the A page to OYHW5T-Customer-Work-Service, and then click Save.

Repeat the same steps for the GetWorkList report definition to ensure that remote cases are displayed in the My Work list widget of Interaction Portal. Click Save.

You have reached the end of this video.