Question
DXC
IN
Last activity: 19 Feb 2020 5:11 EST
Breadcrumb bar color should not change while navigating back in screen flow
I have used tabbed screen flow in my application. By default color of all the tabs are grey. Each time I complete one screen by clicking on next color of the screen become Red along with all the previous screens. But while navigating back to previous screen tabs color again change to grey.
For an example, suppose I have 5 screen. I have completed all the previous 3 screen and I am in fourth screen. Color of one to fourth tab is RED and fifth is Grey. But when I am navigating back to 2nd screen color of 3rd and 4th tabs becoming Grey again. I need to restrict that.
Is there any way to sort out this problem.
***Edited by Moderator: Lochan to update platform capability tags***
Pegasystems Inc.
IN
Hi,
The styles for screen flow comes from "pyscreenflow71" stylesheet which is present under "script & styles" tab in the Tabbed screen flow harness.
By changing the styles in pyscreenflow71, the UI of the tabs can be customised. For each state, one 'id" attribute will be added to each tab. For example, When you complete step 1 successfully and move to step 2 , step 1 will have an id="success" in the html ( you can find this by inspecting the element ). Since currently you are in step 2, step 2 will have id="current" and other steps 3, 4 will have id="future".
Based on these id's the background colour can be changed as per our requirement.
Note : Don't modify the file "pyscreenflow71" as it is OOTB stylesheet. As per the need, override the styles in your custom css text file.
Thanks,
Vasanth
Pegasystems Inc.
US
Thanks Vasanth, I think this approach can work, but the hurdle here is the id, which the client will not have control over, as this will be generated for them. I think the problem statement is that once a step is completed, it will not longer be a "future" step.
DXC
IN
Hi,
Actully problem is when user nevigate back from screen 4 to screen 2 status of screen 3 and 4 changed from success to future. So color changed to Grey. Since in css red is only applicable for the screens which is having status success. I need to restrict this status changing once it become success.