Richard Marsot (RichardMarsot)
Director, Front-end Development
Pegasystems Inc.
RichardMarsot Member since 2011 24 posts
Posted: March 30, 2021
Last activity: March 30, 2021
Posted: 30 Mar 2021 11:57 EDT
Last activity: 30 Mar 2021 14:44 EDT

How to address styling issues with the case lifecycle widget in Cosmos Theme

The case lifecycle widget is shipped as part of the core Pega- ruleset and allows to view the number of cases available in each stage of any case type. This widget can be dropped in any user dashboard.

case lifecycle widget

Some of the CSS selectors needed to render this widget are not present in the Cosmos Skin. This document explain how to improve the rendering of this widget in 8.3, 8.4 or 8.5 when using Theme-Cosmos 1.0 or 2.0.

1/ Import the attached RAP into your application.

This RAP contains 4 sections that are marked as 'Available' and one CSS file that contains the styling needed to render the widget. The CSS is automatically loaded the first time the widget is rendered on the screen and does not need to be added to the skin.

rules in the lifecycle ruleset

2/ copy the 5 rules in your own application ruleset or add the ruleset lifecyclewidget:01-01 to your application rule

normal case lifecycle

the widget will ellipse the name of the stages and processes if there is not enough available space. a min-width is also set for each chevron. If there is not enough space to render all the chevron, an horizontal scrollbar will be displayed inside the widget to accommodate for the spacing limitations.

more complex example of a case lifecycle


***Edited by Moderator Marissa to add the Developer Knowledge Share tag***
Pega Platform User Experience Front-End Developer Developer Knowledge Share