Question
Cognizant
IN
Last activity: 19 Sep 2019 10:47 EDT
Changing the color of a particular Case Stage on click of that
I have a requirement in which there are 3 primary case stages and on click of each primary stage we will be showing the process or steps associated with it.now we have a requirement that the user should understand at which current stage he is in now.right now we are showing all stages in same color.the requirement is to change the color or highlight the stage he clicks so that he can able to know the current stage he clicked.
how can we achieve this kindly help
***Moderator Edit-Vidyaranjan: Updated Platform Capability***
Pegasystems Inc.
US
Are you using pxDisplayStages? For me, the active stage is highlighted as blue. Tried in 7.3.
Please refer to attached screen shots.
Cognizant
IN
Hi Rachit,
Thanks for the reply in my scenario its in manager portal when user logis in he will first see the stages on clicking any of the stages the process or steps will display and on clicking steps the case grid will appear my requirement is like i need to identify the stage which i have currently .currently all stages are in blue color only but if i click on any of the stage and when the process or steps will get displayed i need to change the color of that particular stage from blue to any other color to understand i have clicked this particular stage.
Pegasystems Inc.
US
Ar r you using pyDisplayStages ?
If yes the following changes could help. Add this to userWorkForm
<style>
#RULE_KEY > div.chevron.active {
background-color: yellow;
}
</style>
If not, I would suggest using the Chrome developer tools to inspect the CSS class set on the stage and change the color accordingly
Cognizant
IN
Hi Krithiga,
thanks for ur reply i tried the same as u proposed but still for me the color is not getting changes on clicking any stage.my requirement is like currently all stages are in blue color if i click any of the stage then steps will display in orange color at that time the stage which i had clicked shud change from blue to some other color so that user can understabd which stage he is currently.i tried with chevron.active but its not working for me in mamager portal.either that stage color or the link in that stage shud change to any color i am attaching the screens also.kindly help me if you are able to understand the requirement.
Pegasystems Inc.
US
Can you please use developer's tools to find out from where the color is coming up. You might want to have a look at a troubleshooting video, we have regarding CSS skin issue.
https://community.pega.com/video-library/how-troubleshoot-when-application-skin-not-picked
Cognizant
IN
hi rachit ,
the code which is getting picked up is
hi rachit ,
the code which is getting picked up is
- margin: 0;
- height: 40px;
- line-height: 40px;
- background: #55A0B9;
- color: #fff;
- position: relative;
- margin-right: 7px;
- margin-bottom: 5px;
- border: 0;
- outline: none;
- box-shadow: none
i tried to override it with
.stages > .content-item .chevron.active{
margin: 0;
height: 40px;
line-height: 40px;
background:red;
color: #fff;
position: relative;
margin-right: 7px;
margin-bottom: 5px;
border: 0;
outline: none;
box-shadow: none;
}
so ideally the color shud be red but for me its not happening and this is not coming in inspect also
Pegasystems Inc.
US
When you say it is not coming is red, it means that somewhere blue is overriding this -may be at harness/skin/custom style sheets/userworkform.
Please inspect and find the color from where is coming up. If not instead of giving "background:red;", try giving "background:red; !important"
Cognizant
IN
its actually a new harness which i have created and havent refered any styles in that.i have given important also but its not changing.then i tried to change the link color by using a:visited and changed the color also but its also not working but a:active and hover is working but its not my requirement
Cognizant
IN
.stage_name > .content-inner a {
color: #fff;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
padding-left: 21px;
}
.stage_name > .content-inner a:visited {
color: red!important;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
padding-left: 21px;
}
Pegasystems Inc.
US
Hi Praveen,
Couple of questions :
1. When you complete a "Stage" does it show a "checkmark" next to it ?
2. The reason I ask is Out Of The Box (OOTB) we use "past", "active" classes to identify the the current stage. I want to check if this correctly set at your end. From you previous response it appears that the "active" class is not set. Can you check ?
3. Can you check using OOTB skin and check if the classes are correctly set ? The changes I suggested previously will work only if "active" class is set.
Cognizant
IN
Pegasystems Inc.
US
Hi Praveen
Based on the information so far, I do not think what you have reported is a Pega bug, but more of a how to. However I am unable to help further without getting on a screen share to understand the configuration better.
Either open a SR (or) check with the moderators for other options.
Pegasystems Inc.
IN
Please enter an SR referring this URL to facilitate a screenshare. Please let us know the SR# back here so that we can connect the 2 threads and continue tracking it.
Thanks,