Balasubramanian Durai (durab)
Principal Software Engineer
Pegasystems Inc.
durab Member since 2016 9 posts
Posted: November 5, 2020
Last activity: November 6, 2020
Posted: 5 Nov 2020 23:28 EST
Last activity: 6 Nov 2020 2:37 EST

Case header in Theme Cosmos

In theme cosmos, case header is part of every work object and provides details such as work object id, type and name. It also consists of case icon, breadcrumbs, action buttons and region of additional action buttons based on the business needs.

Case header in work object


Customizations available in Case header of theme cosmos


Customizations can be done in case header just by configuration and there is no need to override the case header rule. These are the customizations available as part of cosmos settings:


Customizing case id and labels

Based on business needs, cosmos settings provide options to show case id, case icon and case type label. These individual items can be shown or hidden by changing the settings.

Steps to show/hide labels:

  1. Navigate to case type and click on settings tab
  2. Click on Cosmos UI tab in the bottom
  3. Under cosmos ui, change the settings in case header option

Case labels


Customizing case icons

Case icons can be changed for each and every work object based on the business needs.

Steps to change case icons based on work object class:

  1. Save as the “pyCaseIconDetails” decision table into the application ruleset.
  2. Add the required image/icon in the necessary fields and provide the work object class

Case icons

Customizing action buttons

Additional action buttons can be added to the case header specific to work object

Steps to add additional buttons in case header:

  1. Switch to app studio
  2. Click on design tab in the top
  3. Navigate to work object
  4. Click on the pen icon in case header section
  5. In the right side, panel will be opened, buttons can be added in the Additional actions region

Case app studio

            Note:  As per best practice, icon buttons need to be added for consistency with theme cosmos design system


Wide case header

Theme cosmos also provides another template for case header called as “Wide case header”. In theme cosmos, this type of template is used in Spaces and documents landing page

Wide case header

***Edited by Moderator: Pooja to add Developer Knowledge Share tag***
Pega Platform 8.5.1 Low-Code App Development App Studio Cross-Industry Lead System Architect Developer Knowledge Share