Skip to main content

Configuring coexistence of a Theme UI Kit service request

7 Tasks

5 mins

 Visible to: All users
Beginner Pega Customer Service '23 English
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

Scenario

A new regional branch of U+Bank uses a Constellation-based Pega Customer Service™ application. To streamline their operations, they want to quickly incorporate the existing UI-Kit-based Report lost or stolen card service request. A system administrator is tasked with configuring coexistence for the service request.

Use the following credentials to log in to the exercise system:

Role User name Password
Customer Service system administrator CSSysAdmin password123!

Your assignment consists of the following tasks:

Task 1: Configure the remote Theme UI Kit application and expose the Report lost or stolen card service request

In the Theme UI-Kit application, turn on the coexistence toggle. Then, create a Web mashup channel for the Report a lost or stolen card service request and copy the mashup code. Next, add the PegaCS-C11NConnector ruleset to the application ruleset stack. To configure a unified work list and workbasket, override the cyRemoteAppEndpointUrl application settings rule and the cyMyWorkListForRemote, cyMyWorkbasketsForRemote, and czMyTeamWorklistForRemote report definitions in your application. Update the application settings rule with the URL of your remote Theme UI-Kit application.

Task 2: Configure the local Constellation application and proxy case

In the Constellation application, turn on the coexistence toggle. Then, create a proxy case type for the remote Report a lost or stolen card service request. Next, connect your Constellation application with the Web mashup channel created in the Theme UI-Kit application.

Task 3: Enable access to remote case type data and application settings

In the Theme UI-Kit application, update the cySetCaseTypesToUpdateProxyCase decision table to access the remote case type data in the Constellation application. Then, override the cyProxyRemoteEndPointURL application settings rule and update it with the URL of the Constellation application's environment.

Task 4: Configure authentication of the Web mashup

In the Constellation application, override and update the cyRemoteMashupURLForProxy application settings rule and the cySetMashUpGadgetAttributes data transform.

Task 5: Configure authentication in both applications

In the Constellation application, in the CS_OAuth_ProxyRemote Oauth 2.0 Client Registration rule, regenerate the client secret and update client credentials. In the Theme UI-Kit application, update the CS_OAuth_ProxyRemote authentication profile with the information from the client secret. Then, regenerate the client secret and update client credentials in the Theme UI-Kit CS_OAuth_RemoteWork Oauth 2.0 Client Registration rule. Back in the Constellation application, update the CS_OAuth_RemoteWork authentication profile with the information from the client secret file. Next, override and update the cyRemoteDataViewsURL application settings rule. Lastly, optimize the cxRemoteCaseID property for reporting.

Task 6: Add the service request to the Interaction Task Categories

To enable launching the Report a lost or stolen card service request from the Constellation application Interaction Portal, add it to the General task category of interactions.

Task 7: Optimize the cxRemoteCase property

Optimize the cxRemoteCaseID property for the interaction and service cases tables in the Constellation application.

Task 8: Confirm your work

In the Constellation application Interaction Portal, start an interaction with Sara Connor and run the Report a lost or stolen card service request.

 

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Challenge Walkthrough

Detailed Tasks

1 Configure the remote Theme UI Kit application and expose the Report lost or stolen card service request

  1. Log in as a Customer Service System Administrator:
    1. In the User name field, enter CSSysAdmin.
    2. In the Password field, enter password123!.
  2. In the header of Dev Studio, click Configure > System > Release > Toggles.
  3. On the Toggle Management tab, in the Application context column, in the row for Pega Customer Service with the EnableCoexistence identifyer, click Edit.
    EnableCoexistence toggle with the Edit button highlighted
  4. In the Edit toggle dialog box, click Enable toggle for all, and then click Submit.
  5. In the header of Dev Studio, click Application > Channels and interfaces.
  6. In the Create new channel interface section, click Web mashup.
    Web mashup channel icon highlighted
  7. Configure the web mashup:
    1. In the Basic options section, in the Name field, enter Report lost or stolen card.
    2. In the Action list, select Create a new case.
    3. In the Case type list, select Return a lost or stolen card.
    4. Turn on the Allow passing dynamic parameters switch.
      Web mashup configuration screen
    5. Click Save, and then close the web mashup.
      Close section icon highlighted
  8. On the Channels and interfaces tab, in the Current channel interfaces section, click the Report lost or stolen card channel icon to re-open the channel.
  9. In the What is a mashup? section, click Generate mashup code.
  10. In the Mashup code dialog box, in the Web mashup section, click Copy.
    Mashup code dialog box with the Copy button highlighted
  11. Save the mashup code into a text file, and then close the code.
  12. In the header of Dev Studio, click Application > Definition.
  13. In the Application rulesets section, click Add ruleset.
  14. In the Open Rule field, enter PegaCS-C11NConnector:08-23, and then click Save.
    Application rulesets section with the PegaCS-C11nConnector ruleset added
  15. In the header of Dev Studio, search for and open the cyRemoteAppEndpointUrl application settings rule.
    search result for cyRemoteAppEndpointUrl application settings rule
  16. On the Application Settings configuration tab, click Save as, and then click Create and open.
  17. On the Application Settings configuration tab, on the Settings tab, in the Value per production level section, in the Value field for each of the production levels, enter the URL of Theme UI-Kit application in the following format: https://pega.xxx.pegaenablement.com/prweb/app/customer-service--theme-ui--kit.
    Value per production level section of the Application Settings tab
  18. Click Save.
  19. In the header of Dev Studio, search for and open the cyMyWorkListForRemote report definition.
  20. In the Report definition configuration tab, click Save as, and then click Create and open.
  21. Repeat steps 19–20 with the cyMyWorkbasketsForRemote and cyMyTeamWorklistForRemote report definitions.

2 Configure the local Constellation application and proxy case

  1. In the header of Dev Studio, click Application > Switch Application > Customer Service – Constellation.
  2. In the header of Dev Studio, click Configure > System > Release > Toggles.
  3. On the Toggle Management tab, in the Application context column, in the row for CustomerService-Infrastructure with the EnableCoexistence identifier, click Edit.
    EnableCoexistence toggle with the Edit button highlighted
  4. In the Edit toggle dialog box, click Enable toggle for all, and then click Submit.
  5. In the navigation pane of Dev Studio, click Case types > Add a case type.
  6. In the Create Case Type dialog box, configure the details:
    1. In the Case type name field, enter Report lost or stolen card.
    2. In the Template list, select Customer Service Remote Template.
      Add Case Type dialog box
    3. Click Submit.
  7. In the navigation pane of Dev Studio, click Records > Data Model > Data Transform.
  8. In the Data Transform Instances tab, in the Name column, click the Filter icon.
  9. In the search text field, enter cySetMashUpGadgetAttributes, and then click Apply.
    Instances of Data transform tab filtered to show cySetMashUpGadgetAttributes
  10. Click the cySetMashUpGadgetAttributes data transform.
  11. On the Data Transform configuration tab, click Save as.
  12. On the Data Transform Record Configuration tab, in the Context section, in the Apply to list, enter Edu-CSApp-Work-Service-ReportLostOrStolenCard.
  13. Click Create and open.
  14. Populate the following rows in the data transform definition table with the values from the Web mashup code from the remote Theme UI-Kit application:
    1. For the Target value of pyClassName, in the Source field, enter the value of the data-pega-action-param-classname element from the Web mashup code.
    2. For the Target value of cxMashUpChannelID, in the Source field, enter the value of the data-pega-channelID element from the Web mashup code.
    3. For the Target value of cxRemoteAppSkinName, in the Source field, enter the value of the pzSkinName element from the Web mashup code.
      cySetMashUpGadgetAttributes configuration
  15. Click Save.

3 Enable access to remote case type data and application settings

  1. In the header of Dev Studio, click the Application > Switch Application > Customer Service – Theme UI-Kit.
  2. In the header of Dev Studio, search for and open the cySetCaseTypesToUpdateProxyCase decision table.
  3. Click Save as, and then click Create and open.
  4. On the Table tab, in the Case type class column, enter the case type class of the Theme UI-Kit service request: Edu-Customer-Work-LostStolenCard.
  5. In the Return column, enter the corresponding Constellation application proxy case class: Edu-CSApp-Work-Service-ReportLostOrStolenCard.
    cySetCaseTypesToUpdateProxyCase decision table
  6. Click Save.
  7. In the header of Dev Studio, search for and open the cyProxyRemoteEndPointURL application settings rule.
  8. In the Application Settings configuration tab, click Save as.
  9. Click Create and open.
  10. On the Application Settings configuration tab, on the Settings tab, in the Value per production level section, in the Value field for each of the production levels, enter the URL of the Constellation application's environment in the following format: https://pega.xxx.pegaenablement.com/prweb.
    Proxy remote end point URL application settings
  11. Click Save.

4 Configure authentication of the Web mashup

  1. In the header of Dev Studio, click the Application > Switch Application > Customer Service – Constellation.
  2. In the header of Dev Studio, search for and open the cyRemoteMashupURLForProxy application settings rule.
  3. On the Application Settings configuration tab, click Save as, and then click Create and open.
  4. On the Application Settings configuration tab, on the Settings tab, in the Value per production level section, in the Value field for each of the production levels, enter the value of the data-pega-url element from the Web mashup code.
  5. Click Save.
  6. In the header of Dev Studio, search for and open the cySetMashUpGadgetAttributes data transform that you saved into the Edu-CSApp-Work-Service-ReportLostOrStolenCard class.
  7. In the Definition tab, in step 4 of the definition table, in the Source field, enter "CSSysAdmin".
  8. In step 5 of the definition table, in the Source field, enter the operator password in base64 format: "cGFzc3dvcmQxMjMh".
    cySetMashUpGadgetAttributes data transform
  9. Click Save.

5 Configure authentication in both applications

  1. In the navigation pane of Dev Studio, click Records > Security > Oauth 2.0 Client Registration.
  2. On the Instances tab, click CS_OAuth_ProxyRemote.
    Instances of OAuth 20 Client Registration
  3. On the Client Information tab, in the Client Credentials section, click Regenerate client secret.
  4. On the Regenerate client secret dialog box, click Regenerate.
    OAuth 20 Client Registration rule
  5. On the Client Information tab, in the Client Credentials section, click View & download.
  6. In the View & download dialog box, click Download credentials.
    Download credentials dialog box
  7. On the Client Information tab, in the Supported grant types section, ensure that the selection for the Client credentials checkbox is active.
  8. In the Access group field, enter CSApp:AppAdmin, and then click Save.
    Supported grant types section
  9. In the header of Dev Studio, click the Application > Switch Application > Customer Service – Theme UI-Kit.
  10. In the header of Dev Studio, search for and open the CS_OAuth_ProxyRemote authentication profile.
  11. Update the client configuration:
    1. In the Client secret field, enter the password from the text file downloaded in step 6.
    2. In the Endpoint configuration section, in the Access token endpoint field, enter the corresponding value from the text file downloaded in step 6.
    3. In the Revoke token endpoint field, enter the corresponding value from the text file downloaded in step 6.
      CSOAuthProxyRemote authentication profile tab
    4. Click Save.
  12. In the navigation pane of Dev Studio, click Records > Security > Oauth 2.0 Client Registration.
  13. On the Instances tab, click CS_OAuth_RemoteWork.
  14. In the Client Credentials section, click Regenerate client secret.
  15. On the Regenerate client secret dialog box, click Regenerate.
  16. On the Client Information tab, in the Client Credentials section, click View & download.
  17. In the View & download dialog box, click Download credentials.
  18. On the Client Information tab, in the Supported grant types section, ensure that the selection for the Client credentials checkbox is active.
  19. In the Access group field, enter CSApp:AppAdmin, and then click Save.
  20. In the header of Dev Studio, click the Application > Switch Application > Customer Service – Constellation.
  21. In the header of Dev Studio, search for and open the CS_OAuth_RemoteWork authentication profile.
  22. Update the client configuration:
    1. In the Client configuration section, update the Client secret field with the password from the text file downloaded in step 17.
    2. In the Endpoint configuration section, in the Access token endpoint field, enter the corresponding value from the text file downloaded in step 17.
    3. In the Revoke token endpoint field, enter the corresponding value from the text file downloaded in step 17.
      CSOAuthRemoteWork authentication profile tab
    4. Click Save.
  23. In the header of Dev Studio, search for and open the cyRemoteDataViewsURL application settings rule.
  24. In the Application Settings configuration tab, click Save as, and then click Create and open.
  25. On the Application Settings configuration tab, on the Settings tab, in the Value per production level section, in the Value field for each of the production levels, enter the URL of Theme UI-Kit application in the following format: https://pega.xxx.pegaenablement.com/prweb.
  26. Click Save.

6 Optimize the cxRemoteCase property

  1. In the navigation pane of Dev Studio, click App.
  2. In the application explorer pane, on the Classes tab, in the search field, enter Service-Work.
    App explorer panel of the Service-Work class
  3. In the Service-Work class, click Data Model > Property.
  4. In the list of properties, right-click cxRemoteCaseID, and then select Optimize for reporting.
    Optimize for reporting option highlighted
  5. On the Property Optimization tab, select the Edu-CSApp-Work-Service group of classes.
    Property optimization wizard
  6. Click Next twice.
  7. Click Finish.

7 Add the service request to the Interaction Task Categories

  1. In the navigation pane of Dev Studio, click Case Types > Interaction.
  2. Click Settings > Task categories.
  3. In the Task categories section, in the General row, click the Update category icon.
    Task categories settings
  4. In the Task category dialog box, in the Associated tasks section, click Add task and select Report lost or stolen card.
  5. Click Submit.
  6. Log out of the application.

Confirm your work

  1. Log in to the Interaction Portal as a Customer Service Representative:
    1. In the User name field, enter cscsr.
    2. In the Password field, enter password123!.
  2. Click + > Demo Pop: Sara Connor, not verified to begin a phone interaction.
  3. Click Accept to answer the call.
  4. In the Verify customer section of the composite, select Pass as the outcome of all verification questions.
  5. Click Add case to display the list of available tasks.
  6. Select Report lost or stolen card, and then click Submit.
  7. Verify if the case details render in the UI.
    Lost or stolen card service request rendered in the Constellation application Interaction Portal

Available in the following mission:

Return to mission
If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice