Question
Capgemini
IN
Last activity: 8 Nov 2018 0:53 EST
Need to update Pega Stage and steps UI
We need to customise Pega Stage and Steps UI for our requirement. We need change the color, spacing and shape of Pega Stages and Steps.
We are using Pega version 7.2.2
Below are changes needed:
1. Space between Stages needs to be increased to match space between steps
2. Tick mark on Stages/Steps has to be moved to middle of the stage/step
3. Color of label past, current and future Stages/Steps has to be different (White for past/current & Black for future stage/steps)
4. Shape of the first and last stage/step has be altered (Triange shape)
Please refer the images. We need to make it to look like in second image
Any help is greatly appreciated!
***Edited by Moderator Marissa to update SR Details***
Pegasystems Inc.
US
Can you please let me know exactly which component you are currently using to show the stages and steps & stages. I am assuming you are using pxDisplayStages. Please correct me if I am wrong. Also, are you currently using any custom CSS or anything else?
Also, please mention the UIKIT version if you are using it.
Meanwhile, I will try to build up the css for your requirement, using pxDisplayStages.
Capgemini
IN
Yes Rachit, I am using pxDisplayStages only. I am not using any custom CSS. I am using OOTB CSS (py-portal-stages.css).
UIKIT version is UI-Kit-7:08-01-01
Hope that helps!
Pegasystems Inc.
US
For "1)", use the below css . Increase the margin(currently 1px) as per the requirement. Rest of the customizations I am working on.
.flex.stages.content > .content-item.flex {
margin: 0 1px 0 0 !important;
}
Pegasystems Inc.
US
Yes, I checked the 3rd one. But I do not think it is achievable because, there is currently no way to identify the steps which are completed. So, not sure if this can be implemented.
Capgemini
IN
yes there is way to display completed steps... Pega by default, uses color code to display them.. If you see the pictures, completed steps are colored black, current ones are colored blue and future steps are colored grey. We just need the text (label) on these steps to be altered along with background color which is being changed according to the status of steps/stage. Please check and update
Below is the latest update for my queris:
1. Space between Stages needs to be increased to match space between steps - Done
2. Tick mark on Stages/Steps has to be moved to middle of the stage/step - We removed them so its not needed any more
3. Color of label past, current and future Stages/Steps has to be different (White for past/current & Black for future stage/steps) - This is important. Please look into this
yes there is way to display completed steps... Pega by default, uses color code to display them.. If you see the pictures, completed steps are colored black, current ones are colored blue and future steps are colored grey. We just need the text (label) on these steps to be altered along with background color which is being changed according to the status of steps/stage. Please check and update
Below is the latest update for my queris:
1. Space between Stages needs to be increased to match space between steps - Done
2. Tick mark on Stages/Steps has to be moved to middle of the stage/step - We removed them so its not needed any more
3. Color of label past, current and future Stages/Steps has to be different (White for past/current & Black for future stage/steps) - This is important. Please look into this
4. Shape of the first and last stage/step has be altered (Triange shape) - This is important. Please look into this
Any help is highly appreciated!
Capgemini
IN
Rachit_Agarwal, Any updates?