Pega cosmos progress bar
How can we implement the ideas given in https://design.pega.com/components/progress/ ,as there are not design documents. Can you pleas provide steps to implement the same?
Pegasystems Inc.
US
@Arnab2202 the progress component documented in design.pega.com is used to indicate loading progress when using the Cosmos React application. It is available in Pega 8.6.
For Theme-Cosmos, there is no easy to provide a loading progress at the component level - there is a global page loading indicator that will render if the loading takes more than 2 seconds. It is possible to customize the look and feel of the process indicator.
CIBC
CA
@RichardMarsot we are in 8.6.2 and non-react version and is there in OOTB UI component or widget to implement below UI experience.
if the background flow is screenflow is the below experience is possible and what UI components that need to be leveraged.
2. the below experience is possible if the background flow is just a process flow with the corresponding assignments?
if your insights are much appreciated.
THanks.
Pegasystems Inc.
US
@Venu gopala krishna using a vertical screenflow and some CSS styling should get you close to the design
the vertical screenflow is using the TreeNavigation7 harness and by default has the steps on the right
you can edit pyCaseActionArea to render a different UI for screenflow using the when condition param.Purpose = 'TreeNavigation7'
and flip the position of the navigation - you will get something like this
then you just need to style it per your needs
CIBC
CA
@RichardMarsot yes. when moved the tree navigation to the left of the FlowactionHTML, its coming as expected. PFA. one more question, links are showing with Dots. how to have step numbers for each navigation link instead of Dots.
Pegasystems Inc.
US
@Venu gopala krishna in the ui gallery, you will a complete example of render vertical timeline with icons, numbers or dots - you can leverage the section and CSS selectors used to render the steps in the screenflow
the css for the screenflow vertical tree is based on the class .ScreenFlowTree and most of the CSS selectors are in py-cosmos-workarea.css - override these selectors in your own override file.