Balasubramanian Durai (durab)
Principal Software Engineer
Pegasystems Inc.
durab Member since 2016 9 posts
Posted: September 3, 2020
Last activity: October 26, 2020
Posted: 3 Sep 2020 8:16 EDT
Last activity: 26 Oct 2020 2:02 EDT

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.

This is preview panel

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 launch a preview panel

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. 

  1. Navigate to the link and click on the properties panel. 

  1. After the property panel is launched, click on actions tab and configure the link as per the screenshot 

Configuring a preview panel


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. 

  1. Navigate to the link and click on the properties panel. 

  1. After the property panel is launched, click on presentations tab and add the “no-peep-preview” class as per the screenshot 

Configuring no peek panel

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.   

  1. Navigate to “Case Header” section rule. Save as the section to the application ruleset 

  1. Navigate to “Preview content grouped” in the right-hand side to configure the tab sections 

Customizing tabs in preview panel

Pega Platform 8.5 Pega Platform Low-Code App Development App Studio Cross-Industry Front-End Developer Developer Knowledge Share