Preview panel is the feature to open the work object or rule in slide in panel on the right side. Implementation of the preview panel is given detailed in the below URL : 

https://collaborate.pega.com/discussion/how-configure-preview-panel-theme-cosmos

The preview panel in theme cosmos is rendering inside the secondary ajax container which is placed inside the pxCaseMainPageTemplate and pxPageHeader.If the page has two ajax container DOM then the issue will occur.

Note : It is highly recommended to use the “Main case page UI template” for work objects and “Page header UI template” for the landing page headers.

Work around solution is to have the when rule and add the ajax container secondary on user header based on the conditions.  To adopt the preview panel feature till all the pages are moved to the above template is given below :

Step 1 : Create a Library

• Create a new library in the application ruleset and no need to include any packages

    Create -> Technical -> Library

And generate the same.

• Note : Can also use any library if it is already available in the application ruleset.

Step 2 : Create a function to get current harness

• Create a function to get the current harness
• Add the Library which is added during the step 1 or use the existing one.
• Make the Java date type in output as String in Parameter tab
• In Java Tab copy the below code

String HarnessName = "";
PublicAPI tools = null;
PRThread  thisThread = (PRThread)ThreadContainer.get();
if (thisThread != null) {
	tools = thisThread.getPublicAPI();
}
if (tools == null) {
	throw new com.pega.pegarules.pub.PRRuntimeError("Can't get a PublicAPI reference.");   
}
ClipboardPage declarePyDisplay = tools.findPage("Declare_pyDisplay");
String threadName = tools.findPage("pxThread").getString("pxThreadName");
String portalName = "";
if(!"".equals(threadName)){
  portalName = threadName;
  String[] arrOfStr = threadName.split("_", 2); 
  if(arrOfStr.length == 2)
  portalName = arrOfStr[1]; 
}
      ClipboardPage tpg_pyDisplay = null;
      if(declarePyDisplay != null && !"".equals(portalName)){
        ClipboardProperty DisplayState = declarePyDisplay.getIfPresent("pyDCDisplayState");
        if(DisplayState != null){
          String ActiveDocumentType = DisplayState.getPageValue().getString("pyActiveDocumentType");
          if(ActiveDocumentType.equals("HOME")){
            HarnessName = "Home";
          } else {
            ClipboardProperty pyDisplay = declarePyDisplay.getIfPresent("pyDisplay");
            if(pyDisplay!= null){
              ClipboardProperty cp_pyDisplay = pyDisplay.getPageValue().getIfPresent(portalName);
                if(cp_pyDisplay != null){
                  tpg_pyDisplay = cp_pyDisplay.getPageValue();
                    if(tpg_pyDisplay != null){
                       HarnessName = tpg_pyDisplay.getProperty("pyUIActive").getPageValue(1).getString("pyStreamName");
            }
          }
        }
          }
        }
        
}
return HarnessName;

• Check the Function ready to be compiled? Check box and generate library and generate function
• Here the HarnessName is hardcoded as "Home" assuming the initial landing page as Home harness. User can change this if the initial landing page is different.

Step 3 : configure  a when rule

Create a when rule and add the condition

[First string ]does not equal (ignore case) [Second String]

The full syntax for calling a function identifies both the RuleSet and the library:

@(RuleSet:libraryname).functionname(arg1, arg2... argn)

Sample  Snippet:

• In the above example the when rule will evaluate to true only on the harness which does not equal to pyDocumentDashboard, Review, pyGroupsDashboard, Dashboard, pyReportBrowser, Home(where the ajax container secondary is available from the platform).
• Means the second ajax container secondary will not added in these harnesses.
• Note : User can modify the above when rule based on their requirements.

Step 4 : Create a section and embed pxMainPageSideInContainer section

• Create a new section at the @baseclass and embed pxMainPageSideInContainer.
• On the embedded section layout properties in general tab , add a visibility condition to when rule and provide the above created whenrule.
• In Presentation tab check the “Display advanced presentation options”  check box and apply the class “slide-in-summary” for both “Custom read-write classes” and “Custom read-only classes” text box.

Step 5 : Override the UserHeader section

• Override the UserHeader section in the application ruleset and embed the created section(step 4) in the UserHeader section.

Step 6 : Override the UserWorkForm

Override the UserWorkForm HTML fragment in application ruleset and add the below code :

<script>
     var threadName = pega.u.d.getThreadName();
     if(!threadName.includes("ACPRIMARY") && !threadName.includes("ACSECONDARY") && !threadName.includes("ACTERTIARY")){
        var PreviewContentDiv = document.querySelector("div[data-node-id='PreviewContent']");
        if (PreviewContentDiv) pega.u.d.reloadSection(PreviewContentDiv);
     }
</script>

Note : This solution is a fix for the custom users who doesn’t use the design template for the landing page headers. User who uses this fix needs to take responsibility for owning and maintaining this fix. Theme cosmos strongly recommends to use only design templates for landing page headers.