Question

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***

Comments

Keep up to date on this post and subscribe to comments

September 17, 2019 - 7:08am

Are you using pxDisplayStages? For me, the active stage is highlighted as blue. Tried in 7.3. 

Please refer to attached screen shots.

September 17, 2019 - 8:09am
Response to Rachit_Agarwal

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.

September 17, 2019 - 8:46am

Any updates on this

September 17, 2019 - 9:45am
Response to PraveenP7456

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

 

September 17, 2019 - 10:05am

Attaching files here, since adding them inline does not show clear picture

September 18, 2019 - 12:12am
Response to Krithiga_GCS

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.

 

September 18, 2019 - 12:34am
Response to PraveenP7456

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

 

September 18, 2019 - 12:47am
Response to Rachit_Agarwal

hi rachit ,

 

the code which is getting picked up is

 

.stages > .content-item .chevron {

  1. height: 40px;
  2. line-height: 40px;
  3. color: #fff;
  4. position: relative;
  5. margin-right: 7px;
  6. margin-bottom: 5px;
  7. 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

September 18, 2019 - 1:07am
Response to PraveenP7456

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"

September 18, 2019 - 1:12am
Response to Rachit_Agarwal

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

September 18, 2019 - 1:16am
Response to PraveenP7456

.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;
}

September 18, 2019 - 1:27am
Response to PraveenP7456

Please raise an SR with us then. We might need to have a deeper look at the issue.

September 18, 2019 - 9:28am

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.

 

September 18, 2019 - 9:49am
Response to Krithiga_GCS

Hi krithiga,

Tick mark is not showing next to it.my display is having case stages along with count of cases in that particular stage.

I have already attached the screenshot of my display

In ootb skin only default css file named pyportal stages css the code is there .I am trying to override the css in my application cash rule it's working for other things but in this scenario I tried multiple ways but not working.

I tried to change the color of the link also in that stage but for a:link and a: hover it's working but for a: visited it's not

This requirement is critical for us.changing the color of stage on click of it

September 19, 2019 - 8:55am

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.

Mod
September 19, 2019 - 10:47am

@PraveenP7456

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,

Lochana | Community Moderator | Pegasystems Inc.