How to configure preview panel in Theme Cosmos
In Theme Cosmos, the user experience of viewing and working on a single/multiple case processing’s really intuitive and easy to work through. One of the cool and easiest way’s is to use the preview panel feature that is provided OOTB in Cosmos applications.
The goal of this article is to show you what is a preview panel and how to configure the preview panel.
What is a preview panel in Theme Cosmos?
A preview panel is a quick way of launching or viewing work objects without opening the work object fully and not losing the current context of work. This helps in saving time to quickly view full details of the WO and take necessary actions. Multiple preview panels can be launched and can be navigated between opened work objects.
How a preview panel can be launched?
A preview panel can be launched by hovering on a case link that enables a “Preview” button. Clicking on the button will enable the preview panel to slide in.
How to configure a preview panel?
OOTB, preview panel functionality is provided by configuring any link with “Open work by handle” & “Open work item” action. No other configuration is required.
-
Navigate to the link and click on the properties panel.
-
After the property panel is launched, click on actions tab and configure the link as per the screenshot
How to disable preview panel functionality?
Preview panel functionality can be disabled by using “no-peek-preview” helper class in the link control. It will disable the “Preview” button not to be shown and preview panel cannot be launched.
-
Navigate to the link and click on the properties panel.
-
After the property panel is launched, click on presentations tab and add the “no-peep-preview” class as per the screenshot
How to customize the preview panel content?
OOTB, preview panel comes with three tabs
-
Details Tab - Gives overall details of the case opened and take quick actions on the case.
-
Pulse tab - Messages and comments posted on case
-
More tab – Contains all the case utility widgets like attachments, case followers
Preview panel tab can be customized to add tabs related to the case.
-
Navigate to “Case Header” section rule. Save as the section to the application ruleset
-
Navigate to “Preview content grouped” in the right-hand side to configure the tab sections
Pegasystems Inc.
US
Do you mean in terms of width? Assuming you mean width, what are you trying to render in the preview panel that needs more width?
Setting the size is not a configuration, and we do not recommend writing custom CSS to do that, as it will likely cause problems when you upgrade to future versions of Cosmos. (A major goal of Cosmos is to be a more prescriptive solution where you focus on creating your flows and customizing your app through App Studio, not forking and modifying the "shell" of the application).
IN
IN
Could you please tell for a custom harness do we need to configure any thing else. In our application we are getting the preview on hover but on click of that the right slide is not showing up.
Updated: 25 Sep 2020 15:47 EDT
Pegasystems Inc.
US
I don't completely follow. Maybe provide more context on why you needed to create a custom harness. I'm not immediately sure why a custom harness is needed.
Do you have JS errors in developer tools console when you click Preview? What about server log error? Is your Link configured to call "Open work by handle" and passing a correct handle, like below?
Updated: 26 Oct 2020 2:02 EDT
Pegasystems Inc.
IN
For the custom harnesses, Though the Preview option is visible, Preview Panel will not be shown unless include a section with design template Page header UI template ( pxPageHeader ) on the current harness/section. If this template is not placed then clicking on Preview option will open the case directly.
@AbhilashR1892 - Hope this resolves your issue
Pegasystems Inc.
US
Yes, the preview panel runs in an AJAX container. Because the AJAX container allows you to expose a case without the overhead of parsing the entire harness DOM and JS, it's super fast to preview a case in the preview panel.
Updated: 6 Oct 2020 5:12 EDT
Lanit
RU
Hi!
Could you please tell us how to localize the text of "Preview" button? I tried to create field value "pyButtonLabel Preview" but it didn't work for me.
Pegasystems Inc.
US
The text "Preview" in the button that renders when you hover over a Link that calls one of the "Open work" actions is already localized in a field value rule called "Preview"
Pegasystems Inc.
US
to localize the preview - you need to create a field value - see https://collaborate.pega.com/question/theme-cosmos-preview-button-localization#comment-782776
Updated: 26 Oct 2020 2:03 EDT
Pegasystems Inc.
IN
Just to add. Though the Preview option is visible, Preview Panel will not be shown unless include a section with design template Page header UI template ( pxPageHeader ) on the current harness/section. If this template is not placed then clicking on Preview option will open the case directly.
Lloyds Banking Group
GB
@durabWe have a requirement where the on click of the Link and the preview to behave differently. Is it possible to customize.
Example, currently, we call an activity to perform an action on the case when the case is opened on click of the link. This activity is getting executed when we click on Preview as well. How to call the activity only when we click the link and not when we click on preview.
Infosys
IN
@durabI have a requirement where in we are using open assignment instead of open work by handle / Open work Item, in which case the preview is not being rendered. Is the Peek Preview be configurable to the Open Assignment actions as well? If yes how to go about implementation?
Commonwealth Bank of Australia
PH
Hi, did you have a solution for this? Thank you!