Skip to main content

Challenge

Improving the Star Rating Widget

Improving the Star Rating Widget

2 Tasks

30 mins

 Visible to: All users
Advanced
English

Scenario

The business stakeholders have provided some feedback, and they have noticed that the Widget count in the Utilities pane does not seem to behave the same way as the default utility widgets, such as Stakeholders and Followers.

They want the behavior of all Utility DX components to be similar and have requested the following features: 

  • Auto-update of count and widget display when new items are added or edited:
    • by existing users
    • by other users
    • by some other server process

The following table provides the credentials you need to complete the challenge:

Role User name Password
Application Author author@sl pega123!
Application Developer developer@sl pega123!

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

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

Detailed Tasks

1 Implement Pub/Sub for Widget count and data object events

Note: To avoid unnecessary repetition, assume that all tasks should be completed using the Visual Studio Code editor and the embedded terminal unless stated otherwise.
  1. In Visual Studio Code, open the sldxcomponents folder that you cloned.
  2. Open a terminal, and then run the following commands in order:
    git stash

    Switch the git branch to the one relevant to the next task.

    git switch 14_pubsub
  3. Start your Pega Infinity challenge instance.
    Your instance will demonstrate the Pub/Sub features.
  4. Open the src/components/Sl_DXExtensions_StarRatingWidget folder. 
    Tip: PubSub Utils provides an API for publishing and subscribing to events. It is used extensively across Pega DX components, and the Utilities pane of the CaseView subscribes to the WidgetUpdated event. 

    You must publish the WidgetUpdated event when the item count changes in a widget that has been added to the Utilities pane of CaseView to update the count.  

    The event has the following payload:
       
      {
         widget: <Widget Name>,
         count: <number of items>,
         caseID: <pzInskey of case>,
       }
  5. Open the index.tsx file, and then uncomment the following block of code:
    // PCore.getPubSubUtils().publish('WidgetUpdated', {
    //   widget: 'SL_DXEXTENSIONS_STARRATINGWIDGET',
    //   count: data.length + 1,
    //   caseID: caseKey
    // });
    <
  6. Uncomment the following line of code: 
    // upsert(savable, updatedRating, undefined, ratingDataClass).then(rating => {  
  7. Comment out the next line of code:
    upsert(savable, updatedRating).then(rating => {
  8. Open the ratingData.ts file.
  9. Go to the updateRating function, and then observe that, if the invokeRestApi call returns a success status (for example, 200), then the system publishes the associated DATA_EVENTS. 
    In the createRating function, the associated DATA_EVENTS is also published.
        if (classId) {
          PCore.getPubSubUtils().publish(
            PCore.getConstants().PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED,
            {
              classId,
              guid: response.data.responseData.pyGUID
            }
          );
        }
    Tip: This widget has also been configured to use data events when a data object is created or updated. You can use these events for any purpose, but a common use case is to display a Toast notifcation. The Widget component can also use improvements to respond to data events to change the Widget count.
  10. Open the index.tsx file.
    To see the DATA_EVENTS in action, you will uncomment our PubSub event subscribers.
  11. Uncomment the following block of code:
       // useEffect(() => {
       //   const subCreateId = 'rating-data-create';
       //   const subUpdateId = 'rating-data-update';
       //   PCore.getPubSubUtils().subscribe(
       //     PCore.getConstants().PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_CREATED,
       //     // eslint-disable-next-line no-console
       //     (payload: any) => console.log(payload),
       //     subCreateId
       //   );
       //   PCore.getPubSubUtils().subscribe(
       //     PCore.getConstants().PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED,
       //     // eslint-disable-next-line no-console
       //     (payload: any) => console.log(payload),
       //     subUpdateId
       //   );
       //
       //   return () => {
       //     PCore.getPubSubUtils().unsubscribe(
       //       PCore.getConstants().PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_CREATED,
       //       subCreateId
       //     );
       //     PCore.getPubSubUtils().unsubscribe(
       //       PCore.getConstants().PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED,
       //       subUpdateId
       //     );
       //   };
       // }, []);
  12. Save the index.tsx file.
  13. In your challenge instance, copy the URL, up to and including PRWeb. [COE Review: Consider breaking step 13 onward into a separate task to make the procedure more digestible.]
  14. In a terminal window, enter npm run authenticate.
  15. In the "? Enter pega server URL" prompt, paste the URL that you copied in step 13, and then press the Enter key.
  16. In your challenge instance, enter the following credentials: 
    1. In the User name field, enter author@sl.
    2. In the Password field, enter pega123!.
      You will now publish and configure the component.
  17. In a terminal, enter npn run publish.
  18. Select the Sl_DXExtensions_StarRatingWidget.
  19. Accept the defaults for "Enter ruleset name" and "Enter ruleset version".
  20. In the "Generate development build ?" prompt, select "y".
  21. In the header of App Studio, click Preview, and then in the navigation pane on the left, click Recents.
  22. Open any Case.
  23. Expand the Utilities pane, and then update or add a rating for this Case.
  24. Open the console using DevTools by right-clicking and then clicking Inspect, and then in the console, observe the message received when the data instance updates.
  25. In the lower-left corner of App Studio, click the user icon, and click Log off.

2 Implement WebSockets for Widget updates across sessions

  1. In Visual Studio Code, open the sldxcomponents folder.
  2. Open a terminal, and then run the following commands in order:
    git stash
    Switch the git branch to the one relevant to the next task.
    git switch 15_websockets
  3. Open the src/components/Sl_DXExtensions_StarRatingWidget folder. 
    Note: The Messaging Service Manager API provides an API to subscribe to web socket messages published by the Constellation Messaging Service. It is used extensively across Pega DX components, and the widgets in the Utilities pane of CaseView implement WebSockket updates to communicate widget count changes between different sessions viewing the same Case (and also for other server-generated events). A matcher is already included for widgets in the Utilities pane, which is the following widget component key:
       
      {
         matcher: <Widget Component Key>,
         criteria : {
            <criteria>
          }
       }
  4. Open the index.tsx file.
  5. Uncomment the debounce import:
    <!-- br-->import { // debounce,

    Because you are subscribing to an external service (the Constellation Messaging Service) that also requires you to unsubscribe. Subscribing and unsubscribing occur in a useEffect. 

  6. Uncomment the following commented-out blocks of code:  
        // const ratingSubObject = {
        //   matcher: 'SL_DXEXTENSIONS_STARRATINGWIDGET',
        //   criteria: {
        //     ID: customerId ?? ''
        //   }
        // };
        //
        // const ratingSubId = PCore.getMessagingServiceManager().subscribe(
        //   ratingSubObject,
        //   debounce(() => {
        //     fetchRatings();
        //   }, 10),
        //   getPConnect().getContextName()
        // );     

        // PCore.getMessagingServiceManager().unsubscribe(ratingSubId);
  7. Save the index.tsx file.
  8. Open up your academy instance in the browser and copy the URL up to an including prweb.
  9. In a terminal window, enter npm run authenticate.
  10. In the "? Enter pega server URL" prompt, paste the URL that you copied in step 13, and then press the Enter key.
  11. In your challenge instance, enter the following credentials:
    1. In the User name field, enter author@sl.
    2. In the Password field, enter pega123!.
      You will now publish and configure the component.
  12. In a terminal, enter npn run publish.
  13. Select the Sl_DXExtensions_StarRatingWidget.
  14. Accept the defaults for "Enter ruleset name" and "Enter ruleset version".
  15. In the "Generate development build ?" prompt, select "y".
  16. In the header of App Studio, click Preview, and then create a new Incident Case.
  17. Complete the Create Stage of the Case, expand the Utilities pane, click the Followers widget, and then add developer@sl as a new follower.
  18. Click Exit Preview.
  19. In the navigation pane of App Studio, click Case Types > Incident. [COE Review: Consider breaking this step onward into a separate task to make the procedure more digestible.]
  20. Click the UX tab, and then on the right, on the Full-Page View tab, in the Utilities section, click Add.
  21. Select Star Rating Widget, and then click Add.
  22. On the right of the Rating widget, click the Gear icon, and then configure the properties:
    1. In the Customer unique id list, select Customer group or fields > Globally unique id.
    2. In the Data pages for rating class list, select Customer Rating.
    3. In the Lookup datapage for rating class list, select  D_CustomerRating.
    4. In the List datapage for rating class list, select  D_CustomerRatingList.
    5. In the Savable datapage for class list, select  D_CustomerRatingSavable.
  23. Click Save to close the properties pane.
  24. In the upper-right corner of App Studio, click Save to save your changes to the Incident Case Type.
  25. Open the tasks.config.json file.
  26. Copy the full value for the server property inside the double quotes. 
    It will be similar to the following format: https://abcdefg.pegaacademy.net/prweb
  27. In your browser, open a private browsing session (for example, an Incognito window in Chrome), and then enter the URL that you copied from step 26.
  28. Enter the following credentials:
    1. In the User name field, enter developer@sl.
    2. In the Password field, enter pega123!.
    You must ensure you log in with a different operator than the one you used to begin your other Pega session.
  29. In the header of Dev Studio, click Launch portal > Portal.
    The Portal opens on a separate tab.
  30. On the Home landing page, in the My followed items section, click the Case ID link for the only Case the list.
  31. Position the browsers so you can see both browser windows
  32. In your first browser window, in the header of App Studio, click Preview.
  33. In the navigation pane on the left, click Recents, and then click the link to the Case you created in a previous task to open the Case View for that Case instance.
    The Ratings widget is displayed in both browsers in the lower right.
  34. In one of the browsers, in the Ratings widget, click the Add icon, and then select a rating for the Case.
    The rating is also displayed in the other browser window. You can modify the rating in each window to observe it automatically updating after being triggered by a WebSocket message.

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