How to open an assignment in a new browser tab using Theme-Cosmos

[RichardMarsot]

Currently it is possible to configure a link component to open a case in a new browser window using the openWorkItem or openWorkByHandle action - the preview button is displayed on this link and generate an href that can be used to open the case using the right click mouse action

Unfortunately, this functionality is not available for open assignment and this requires the user to open the case in review mode first and then open the assignment.

You can find more details on this functionality in the articles:

• https://collaborate.pega.com/question/open-case-new-browser-tab
• https://collaborate.pega.com/discussion/theme-cosmos-open-work-object-full-portal-new-window

The goal of this document is to offer the ability to show an ‘open in new tab’ button in the worklist that will open directly the assignment in a new browser tab - the component would be a regular button that would use a customized JS api to open the assignment

Note: this demo was done on 8.7 with Theme-Cosmos 4.0 - this functionality might not be possible with older versions of Theme-Cosmos.

To achieve this functionality, we will need to replace a function called loadNewTabWO already shipped as part of the Theme-Cosmos ruleset and extend it to support the openAssignment functionality - this function is defined in pz-cosmos-ui-utils.js

1/ Extend the loadNewTabWO functionality

Create a custom non-auto section in your application with the name UserHeaderOverrideInc and add the following code to the non-auto section

```
<script>
  function openAssignmentInNewTab(insKey) {
   window.open(pega.desktop.infinity.generateNewTabURL() + "&actionName=openAssignment&insHandle=" + insKey);
 }
  
  pega.desktop.infinity.loadNewTabWO = function() {
    if (typeof newTabactionName != "undefined" ) {
      if(newTabactionName === ""){
        return;
      }
        newTabIsReloaded = "true";
        if (newTabInsHandle !== "") {
            if (newTabactionName === "openWorkByHandle") {
                openWorkByHandle(newTabInsHandle, '', '', '', 'false', 'false', {
                    target: "dynamicContainer"
                });
            } else if (newTabactionName === "openWorkItem") {
                openWorkItem(newTabInsHandle, '', '', '', 'false', 'false', {
                    target: "dynamicContainer"
                });
            } else if (newTabactionName === "openAssignment") {
                openAssignment(newTabInsHandle, '', '', '', 'false', 'false', {
                    target: "dynamicContainer"
                });
            }
        }
      
        if (newTabactionName === "showHarness" && typeof newTabClassName != "undefined" && typeof newTabRuleName != "undefined") {
          let replaceCurrent = false;
          tabName = typeof tabName != "undefined" ? tabName : "";
          preActivityName = typeof preActivityName != "undefined" ? preActivityName : "";
          preActivityParams = typeof preActivityParams != "undefined" ? preActivityParams : "";
          preDataTransform = typeof preDataTransform != "undefined" ? preDataTransform : "";
          
          if (newTabRuleName === "SearchResultsPage") {
            tabName = "searchResults";
            replaceCurrent = true;
          } 
          
          pega.d.showHarness(tabName, newTabClassName, newTabRuleName, 
                             preActivityName, preActivityParams, "", false, preDataTransform, replaceCurrent, true, "");
        }
        newTabactionName = "";
        newTabInsHandle = "";
        newTabClassName = "";
        newTabRuleName = "";
        preActivityName = "";
        preActivityParams = "";
        tabName = "";
        preDataTransform = "";
        var url = new SafeURL("pzPagesToRemove");
        url.put("PagesToRemove", "newTabTempPage");
        pega.u.d.convertToRunActivityAction(url);
        pega.u.d.asyncRequest('POST', url);
    }
    pega.desktop.infinity.hideBusyIndicator();
};
</script>
```

this code defines a new function called openAssignmentInNewTab and redefines the function loadNewTabWO by adding a new if condition for newTabactionName = ‘openAssignment’

Note: upgrading to a new version of Theme-Cosmos will require to up merge the changes / fixes done in the OOB back into this function.

2/ Add this section to the UserHeader section

Resave the UserHeader to your app ruleset and add this custom section to the region - Because it is added to the UserHeader, the override function loadNewTabWO will take precedence with the one shipped OOB in Theme-Cosmos

3/ Configure the button to call the function openAssignmentInNewTab

for this example, we will add it to the section HomeWorklistorQueueItem

you can find a RAP of the 3 rules below.

DemoOpenAssignementInNewTab.zip (79.4 KB)

[TerenceY0215 (Terence Yuen)]

@RichardMarsot , after I opened the new Assignment in a new Browser tab, and decided to close the browser tab by pressing the “x” button on the browser, what happens with the Pega Thread behind that tab? When will it be removed from the requestor?

[RichardMarsot]

@TerenceY0215 no - the thread will not be removed due to browser behavior blocking any http request on unload - for more details - see my answer to a similar question here How to auto-logoff the window for cases open in a new browser tab using Theme-Cosmos | Support Center

[josenavas]

@RichardMarsot Hi Richard,

In our application, our cases have custom buttons to “Close” or “Save and Close” the case. We have a recent issue where the user works in two or three cases that are open in different browser tabs, and they have associated his own thread, for example:

• OpenPortal_UserPortal (let’s call it default)
• UserPortal_TabThread_1737489227759

I noticed for the “default” tab, closing or save and close works well and I return to the home screen (where my Worklist is), however, for the other browser tab (case) it does not work properly, and I get an empty screen:

I tried implementing the solution you mentioned in this discussion (openAssignmentInNewTab) however, I’m still seeing the same behavior.

I will appreciate your insights on this issue, or any comment or suggestions that we can try.

Thanks,

P.S. I have also tried the Action set: Home associated to the custom buttons that I mentioned at the beginning of this post, but it doesn’t work either

-Jose Navas

[RichardMarsot]

@josenavas if you are using the OOB pyCaseActionAreaButtons shipped with Theme-cosmos you will not get this issue - the issue is that Cancel is not enough - you need to reload the case in review mode - you can see how the Cancel button is configured in the OOB section and you want to apply the same changes where you use your custom button

[josenavas]

@RichardMarsot Thank you.

I tried what you suggested and even created a new application based on Theme-Cosmos to have a clean playground, but I’m still seeing the same behavior: (blank screen as in my previous post)

You can see in the screenshot below that I left most of the configurations OOTB, but added a new one to go Home:

As I mentioned in my previous post, the blank screen only occurs with the non-default portal (open in new tab).

Regards,

-Jose Navas

[RichardMarsot]

@josenavas this was working fine for me on 24.2 - may be you are using a transient case type - the 2nd action set should kick in that does the open work when it reloads the harness and open the case in a Review harness - if you are hitting the 3rd action set then try removing the when condition on action set 2 to see if it works - if Home does not work, you should try the action show Harness and show the pyHome harness at Data-Portal (or the harness that you use for Home and that is configured in the dynamic container)

[josenavas]

@RichardMarsotI ended up using show harness, and that worked for me. Thank you for your help!

[MandeepRawat]

@RichardMarsot any suggestions on how we can do similar in blended UI. this was working fine in themen cosmos and we want to retain this in our new blended UI.