We have a requirement to show the custom section data in the Preview panel in Cosmos. As the Preview Option / Panel is applicable only for the Work objects (Open Work by handle and Open work item). I have tried the following customization and able to show the custom section but the only issue facing was to disabling the Previous Icon for the last page.
Following are the steps followed
1) Run script action to open the preview panel by calling 'pega.desktop.infinity.showSlideInPanel' function
2) Displaying section and setting the target to the 'Secondary' Ajax container as the Preview panel is based on Ajax container secondary panel (Page header UI template (pxPageHeader) )
3) In order to go to the Previous page, copied the layout with Close and Previous icons from the pxCaseHeader section (Case header UI template ) and added it to the section. Icons highlighted in the below screen are copied to the section.
4) Cancel action for the Previous Icon is changed to Close as it is not an work item and able to close that and go back to previous one. But the issue is how to disable the Previous icon for the last page/item in the list for the custom section. The back icon is showing up for the last item in Preview panel and if we click on it then it is showing the blank screen ( skelton section)
The following is the custom section showing in the Preview panel
Blank screen when click on the back icon on the last item
in Pega 8.5 and Cosmos Rules 2.0, there is a section pyObjectPreview that you can use to preview data object
1/ Use a button - In the action set of the button, create the following 2 actions:
runscript with "pega.desktop.infinity.showSlideInPanel" to open the preview panel
showSection using a DP that will open the data instance and the section pyObjectPreview section against the secondary Ajax container
The DP is usually created automatically if you create a new data instance and will take as parameter a unique key.
Note that Tab name and Record key must also point to a unique ID and will be used to associate the Ajax container instance to this object - because data instance don't have unique key
like the pzInsKey, it is recommended to generate a key that contains both the instance class and the unique ID
make sure to add a when condition to only fire the showSection is the ID is not empty to avoid any exception trying to access the DP or render the section
2/ customize the preview panel
To customize the preview panel, you can update the rule pyObjectPreview at your object class - by default the rule has a header and a main content - If you do not need a more complex layout, you can just edit the header section and the content section. App Studio will display these sections for runtime editing
By default since there is no common property for data objects, the header does not contain any property. As such you will need to resave the section into your object class and add some properties. Usually we recommend to use one or 2 properties
Here is an example of customization of the header - The recommendation is to use a text component using the h2 format
The main content by default will contains the pxCreateDate and pxCreateOperator. You should customize the main details section by adding the data object properties
Here is how the preview panel will render at runtime
if you use the OTB templates provided in Cosmos Rules 2.0 and the OTB sections to override, you should be able to get the back button to work - the back button is just closing the object (use the action close). Here is the design template for the template in Cosmos Rules 2.0
Thanks Richard for the clear explanation. This suffice our requirement.
I have couple of questions.
1) Do we need Tab Name also a unique id ? we have used Ajax container in our app but used unique id only for the Record key. Lets consider person details. Used Ajax container to show the user details as tabs and used unique key (user id) for Record key but used user name for the tab name. It works fine. Though the user names can be same for some users it works without any issue. Not sure if the Ajax container configurations for the Preview panel is different and there is no difference if the tab name is unique or different in Preview panel as it is single document ( no tabs). But wanted to understand the reason for tab name should be unique id.
2) Are we going to have Preview button on hovering of a link as well for the data objects in the future releases ? here it is a separate link/button to show the preview.