Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Tab Group Refresh Issues with Pega 7.1.7

SA-15596

Summary



When using a refreshing section with a tab group layout, user received UI issues. User had a dropdown control which determines the visibility of tabs in the tab group. If a value is selected by the dropdown control and later a different value is selected, the change is not propagated to the tab group visibility.


Error Messages



No error messages. Issues were observed when loading and interacting with the UI components where the UI exhibits unusual responses to the UI events.


Steps to Reproduce



1. Create a Header style screen layout harness.
2. In the Center part of the screen layout associate a section that has a tab group layout with multiple tabs.
3. In the header section, add a dropdown control to a text property.
4. On the Actions tab of the dropdown control cell properties, add the action set (on change refresh- other section "the section created in step 2.")
5. Add Visibility conditions to some of the tabs of the tab group based on the value selected in the dropdown.
6. Launch the portal and test by changing the value of the drop down and observe the rendering behaviors after making one change in the value and then two changes and so on.


Root Cause



When Refreshing a Section, that has a tab group layout, on an "on change" event associated with a Dropdown control of a field on a different Section, the tab layout exhibits inconsistent and unexpected behavior including the absence of the refresh in some cases.

The section, where the dropdown control with the "on change" event, exists at the header part of a screen layout, and the section with the tab group layout is at the Center of a header screen layout. There is also another set of issues resulting from the implementation of the requirement to show or hide the tabs conditionally based on the selection in the Dropdown that is associated with the "on change" event that triggers the refresh of the tab group section.

When one creates work link in more than one tabs, then the following issues are noticed:

Select Option1 and click create work link, this opens a WorkObject in a new tab, change to Option3, select Option 3, click create work item from Option 3, keep toggling Option1, Option2, Option 3. Following observations are made:

 

  • At one point of time the Create Work item replaces the Option1 tab
  • The work item opened gets shrunk
  •  UI gets distorted


Resolution



Apply HFix-23010

Additionally, user must apply the following java script code in their UserWorkForm to resolve their tab order jumbling related concerns:


<script>
pega.u.d.sendReqToUpdateElementModal = function(curTab, elementAction, removedTab, dirtyTab){
var strUrlSF = new SafeURL("@baseclass.pzUpdateClipboardModels");
        strUrlSF.put("elementAction", elementAction);
        if (removedTab && (removedTab.contentID || removedTab.tabIndex) && removedTab.dynamicContainerID) {
            strUrlSF.put("elementAction", "CLOSE");
        }
        if (dirtyTab) {
            if (dirtyTab.prevContentID)
                strUrlSF.put("prevContentID", dirtyTab.prevContentID);
            if (dirtyTab.prevRecordkey)
                strUrlSF.put("prevRecordkey", dirtyTab.prevRecordkey);
            if (dirtyTab.prevFormDirty)
                strUrlSF.put("prevFormDirty", dirtyTab.prevFormDirty);
            else
                strUrlSF.put("prevFormDirty", "false");
        }

        //TASK-134746 Adding threadID, className ,primaryHarnessPageName, StreamName, Label to strUrlSF safeUrl for ACTIVE and CLOSE Action - JAINB1.
        if (strUrlSF.get("elementAction") == "ACTIVE" || strUrlSF.get("elementAction") == "OPEN") {
            if (curTab.key) {
                strUrlSF.put("key", curTab.key);
            }
            if (curTab.dynamicContainerID)
                strUrlSF.put("dynamicContainerID", curTab.dynamicContainerID);
            if (curTab.contentID)
                strUrlSF.put("contentID", curTab.contentID);
            if (curTab.tabIndex)
                strUrlSF.put("tabIndex", curTab.tabIndex);
            if (curTab.threadID >= 0)
                strUrlSF.put("threadID", curTab.threadID);
            if (curTab.className)
                strUrlSF.put("className", curTab.className);
            if (curTab.primaryHarnessPageName)
                strUrlSF.put("pzPrimaryHarnessPageName", curTab.primaryHarnessPageName);
            if (curTab.pyStreamName)
                strUrlSF.put("pyStreamName", curTab.pyStreamName);
            if (curTab.label)
                strUrlSF.put("label", curTab.label);
            if (curTab.iconPath)
                strUrlSF.put("iconPath", curTab.iconPath);
            if (curTab.parameters)
                strUrlSF.put("parameters", pega.lang.JSON.stringify(curTab.parameters));
            if (curTab.isDocumentKey)
                strUrlSF.put("isDocumentKey", curTab.isDocumentKey);
        }
        if (strUrlSF.get("elementAction") == "CLOSE") {
            if (curTab.dynamicContainerID)
                strUrlSF.put("dynamicContainerID", curTab.dynamicContainerID);
            if (curTab.isDocumentKey)
                strUrlSF.put("isDocumentKey", curTab.isDocumentKey);
            if (curTab.key)
                strUrlSF.put("key", curTab.key);
            if (curTab.contentID)
                strUrlSF.put("newContentID", curTab.contentID);
            if (curTab.tabIndex)
                strUrlSF.put("newTabIndex", curTab.tabIndex);
            //strUrlSF.put("dynamicContainerID",removedTab.dynamicContainerID);

            if (curTab.threadID >= 0)
                strUrlSF.put("threadID", curTab.threadID);
            if (curTab.className)
                strUrlSF.put("className", curTab.className);
            if (curTab.primaryHarnessPageName)
                strUrlSF.put("pzPrimaryHarnessPageName", curTab.primaryHarnessPageName);
            if (curTab.pyStreamName)
                strUrlSF.put("pyStreamName", curTab.pyStreamName);
            if (curTab.label)
                strUrlSF.put("label", curTab.label);
            if (curTab.iconPath)
                strUrlSF.put("iconPath", curTab.iconPath);

            if (removedTab.contentID)
                strUrlSF.put("contentID", removedTab.contentID);
            if (removedTab.tabIndex)
                strUrlSF.put("tabIndex", removedTab.tabIndex);
            if (removedTab.key)
                strUrlSF.put("closedTabKey", removedTab.key);
            if (removedTab.isActiveHost != undefined)
                strUrlSF.put("isActiveHost", removedTab.isActiveHost);
            strUrlSF.put("prevFormDirty", "false");


        }
        if (pega.u.d.portalName && pega.u.d.portalName != "") {
            strUrlSF.put("portalName", pega.u.d.portalName);
        }
        strUrlSF.put("pzKeepPageMessages", "true");
        try {
   var response = null;
    response = $.ajax({
        type: "POST",
        url: strUrlSF.toURL(),
        async: false
       });
    return;
        } catch (e) {
            alert("Error while updating the Data Modal.");
        }

}
</script>

 

Suggest Edit

Published January 31, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community 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
Contact us