Discussion

89
Views
Richard Marsot (RichardMarsot)
PEGA
Director, Front-end Development
Pegasystems Inc.
US
RichardMarsot Member since 2011 28 posts
PEGA
Posted: July 1, 2021
Last activity: July 2, 2021
Posted: 1 Jul 2021 13:43 EDT
Last activity: 2 Jul 2021 7:28 EDT

How to extend the confirm screen in Theme-Cosmos

Theme-Cosmos has a very different way to render a case compared to UI-Kit. While in UI-kit, the whole case page is rendered either using the Perform, Review or Confirm harnesses; in Theme-Cosmos, the 3 harnesses are pointing to the same section and renders the same way. There is no differences between a perform and review harness in Cosmos theme.

Theme-Cosmos uses an Ajax container to render the assignment list and process assignments. This architecture avoid reloading the entire page when opening an assignment. Only the critical data in the summary panel are updated once processing an assignment.

For more details

https://collaborate.pega.com/discussion/caseswork-objects-processing-behavior-and-configuration-theme-cosmos-applications

https://collaborate.pega.com/discussion/how-update-summary-panel-cosmos-ui-inside-case-flow-action

https://collaborate.pega.com/discussion/refresh-contents-theme-cosmos

One of the difference with UI-Kit is how the confirm page is rendered. 

In UI-Kit, when a case is routed to a different user or a workbasket, the confirm harness is rendered. The page shows a confirmation banner and the case details. The assignment list is not visible

Confirmation screen in UI-Kit 

confirm screen ui-kit

Note that because the confirm page is a temporary state and not accessible directly using any of the auto-generated actions (like openWorkByHandle), doing an 'Action->Refresh' will bring back the case using the review harness and the assignment list would be displayed.

screen in UI-Kit after confirmation and doing an action->Refresh

review screen in ui-kit

In Theme-Cosmos, a banner is displayed when getting to the confirm screen.

To do component rendered as a flat list

confirm screen cosmos 1

To do component rendered as a hierarchical tableconfirm screen cosmos 2

This banner is triggered by the when rule pyOnConfirmHarness - you can add other details to the section called pyCaseMainPageNotifications to meet your requirements (different banner, other views...). The whole dynamic layout has the when rule pyOnConfirmHarness applied to it - if you need to add other dynamic layout, you will need to add the same visible when condition on each additional layout.

notification banner

Note that each flow action can have different post processing

post processing on flow action

This setting is still supported in Theme-Cosmos: after completing a flow action, you have the option to open the next back-to-back assignment or show a confirmation screen.

Theme-Cosmos supports the 'showHarness' settings – By default, the Confirm harness in Theme-Cosmos is empty and does not add any additional UI element. in the screenshot below, the green region is the confirm harness provided OOB by Cosmos theme.

confirm in Cosmos theme

If you change the harness rule by a different one (for example an old harness called ConfirmSample) the harness would be inside the main workarea

confirmsample

1/ Filtering the list of assignments to only the ones that are assigned to you

The worklist shows all the assignments - the data page D_CaseAssignments can also show the completed assignments by passing a parameter showCompletedCases to true.

list of tasks

to hide all the assignments that are not assigned to your user, you can resave the DP D_CaseAssignments into your application ruleset and add some post load processing that would filter all the assignments

filter activity

Here is an example of activity that you could use for this filtering

filter assignmentlist

the other approach would be to perform the filtering inside the UI using a when rule - this approach would not be the most effective way because the pxResultsCount will not be updated - as such the widget will not be hidden if all the assignments are hidden by visible when condition. It is also a better practice to put the filtering in the DP instead of moving this business logic into the UI.

2/ Hiding the assignment list when rendering the confirm banner

if you want to hide the assignment when showing the confirm banner, add a new non-auto section inside the dynamic layout of the confirm banner

confirm banner2

for example, we can call this section HideAssignmentInc

confirm banner3

The section is a non auto-section that will find the div containing the assignments and remove it from the DOM.

confirm banner1

the next time the case is refreshed using an action->refresh, the assignment list will be rendered again - this change will provide a behavior that is similar to ui-kit is terms of confirmation screen.

***Edited by Moderator: Pooja Gadige to add Developer Knowledge Share tag***
Pega Platform 8.5 Pega Platform 8.4 User Experience Developer Knowledge Share