Close popover
Richard Marsot (RichardMarsot)
Director, Front-end Development
Pegasystems Inc.
RichardMarsot Member since 2011 20 posts
Posted: January 14, 2020
Last activity: January 15, 2020

How to update the summary panel of the Cosmos UI inside a case flow action

In the Cosmos UI, the main case is usually opened as a 'Review' harness (e.g. read only), where the assignment processing is opened inside an Ajax container using the 'Perform' harness. This is different from UI-Kit where the whole case page was opened inside a Perform harness when processing an assignment.

This configuration provides the following benefits:

  • the case is opened in read only (Review) which does not take a lock on the case object
  • opening an assignment only renders the assignment UI and does not reload the whole page which improve the page load time when processing assignments

Because the assignment processing runs inside an Ajax container, the UI is running inside a separate thread that is managed by the Ajax container. As such there is complete isolation of the UI between the review and the perform harnesses even when presented on the same page. For example reloading a section inside the Perform harness will only reload sections that are inside the Ajax container and will not reload the sections present in the dynamic container

In some cases, you want to provide a widget or update the information on the summary panel while making some edits as part of the assignment processing. This document covers how to enable such functionality.

For this document, we will take the example of an Expense case type where we want to show the total cost and a doughnut chart of the different categories. The data can easily be updated if they are inside the same flow action using a refresh section auto-generated action, but if we want to move them to the summary panel, the refresh will no longer work

In order to refresh the section in the summary panel you need to

1/ Edit the UserPortal portal channel using the 'Channels and interfaces' landing page

=> this will resave the UserPortal portal rule, UserPortal harness and UserPortal section inside your application rule

2/ Create a new Javascript file that will expose a 'reloadMySection' api

The function will find the first section that has the name passed as parameter in the document and will reload it from the data that are in the pyWorkPage present inside the Ajax container thread.

3/ Add the JS file to the list of script files

4/ In your action, perform a runscript to reload the section.

To update the summary panel, reload the 'CaseDetails' section

Check out the video here:

Richard Marsot Developer Knowledge Share
User Experience Developer Knowledge Share