Posted: 14 Jan 2020 8:40 EST Last activity: 15 Jan 2020 11:20 EST
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
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
the OTB action called 'refresh Other section' will refresh ALL the sections with the same name independently of the classname, as long as the sections are in the same harness context.
the example of function provided in this document (reloadMySection) is just an example and could be extended. It is purposely very simple and use querySelector to retrieve the first section present in the DOM - it could be improved to do more error checking or reload all the sections with the same name using pega.u.d.reloadSections.