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.
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:
Navigate to case type and click on settings tab
Click on Cosmos UI tab in the bottom
Under cosmos ui, change the settings in case header option
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:
Save as the “pyCaseIconDetails” decision table into the application ruleset.
Add the required image/icon in the necessary fields and provide the work object class
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:
Switch to app studio
Click on design tab in the top
Navigate to work object
Click on the pen icon in case header section
In the right side, panel will be opened, buttons can be added in the Additional actions region
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
***Edited by Moderator: Pooja to add Developer Knowledge Share tag***