Cosmos - Show Custom section in Preview Panel
Hi @RichardMarsot @SreeGanduri @Sam Alexander
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.
Hi @RichardMarsot @SreeGanduri @Sam Alexander
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
Can you please help me out on this ?
Accepted Solution
Updated: 18 Nov 2020 2:37 EST
Pegasystems Inc.
US
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
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 For example
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
Pegasystems Inc.
US
I am not sure what is the use case for this customization - You will create more tech debt and upgrade issues - If you want to preview a case, you don't need to customize how to open the preview panel - all details on what is supported (and not supported) is provided in this document https://collaborate.pega.com/discussion/how-configure-preview-panel-theme-cosmos
You can just remove the preview button if this is an issue.
Updated: 10 Nov 2020 12:37 EST
Pegasystems Inc.
IN
Thanks Richard for the update. My use case is to show the custom data and its not related to case. The typical section will be based on some data page as shown below.
For this am able to show the section with above mentioned steps.. So the only issue was with back button as mentioned above.
Do we have any support from Cosmos (product) to show the custom sections (other than cases) in Preview Panel in future ?
Accepted Solution
Updated: 18 Nov 2020 2:37 EST
Pegasystems Inc.
US
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
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 For example
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
Pegasystems Inc.
IN
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.
Pegasystems Inc.
US
1/ tab name does not have to be unique - only record key - tab name is used when you run the ajax container for the main container - in this configuration of the preview panel, tab name is not used
2/ no plan right now - link are expected to open objects that are rendered in full page and only cases are supported.