Set color to the state filed in the Service Portal. how we can do it

[Mannam Praveen]

Hi All 

I have a Requirement to add to color to the state filed in Service portal. For example if state is in Progress it should show red and if it is green closed. Please refer the below screenshot. in the state filed it need show the colors. Please help me how to achieve it  

[Community Alums]

Hi @Mannam Praveen  ,

CTRL+Right click on the widget and select 'Instance in page editor', scroll down to the CSS section and add the following code (feel free to adjust the colors, I just selected some to show you which elements sets color for what)

.primary-display a {
  color: red;
}

.secondary-display {
  color: green;
}

.state {
  color: magenta;
}

Be aware that the incident number (ABCDxxxx in my case) and priority are generated by the same HTML element so the color cannot be set independently.

[Mannam Praveen]

I want show if state is new - Bule and if it is work in progress - Red like that. It is only for that state filed. But i see you has been applied to the entire record

[kamal_s · Accepted solution]

Hi Mannam,

You will have to configure the widget that is used for "my request", if it's OOTB you could copy the widget and add it to the page again.

On the widget, at line number 56 in the html side (approx) you will see a state field with a class, 

--Create a new span tag and give it a class=state-red and an if condition to display it if value of state is in progress.

-- Create another span tag and do not give any additional class but give the condition as not in progress value

Your html code would look something similar to 

<div class="state">
<span ng-if="::item.state=='In Progress'">
<span class="state-red"> {{::item.state}}</span>
</span>
<span ng-if="::item.state!='In Progress'">
<span> {{::item.state}}</span>
</span>
</div>

Once the HTML side is modified add a new class in the CSS side to change the color, similar to:

.state-red{
color: red;
}

You can follow the same process for different states.

[Ashwin Perumal1]

Hi Kamal,
I am trying to add colour for new and open state also, the same code i used and changed state value alone but as part of result in  portal the state values are shown two times with the colour code I have given. Can i use the same class or should I create a new class and add it in my CSS. Can you please guide me on this coding part . Thanks in advance