Need to know how to color code state values in Service Portal Widget

[saikatmitra6919]

Team,

Here is my widget output that I have developed. I want to set up individual color in widget for each distinct state choice value. Not sure how to do that in widget. It is only setting one color as of now. Need your help in that. Thanks in advance.

[debendudas · Accepted solution]

Hi @saikatmitra6919 ,

You can use the ng-class directive to change the color of the text dynamically based on the state of the incident.

Follow the below example:

<div ng-class="{ 'text-red' : incident.state == '1', 'text-blue' : incident.state == '2'}">

Here 'text-red' and 'text-blue' are 2 different css classes, and both will be dynamically applied if the condition satisfied.

If this solution helps you then, mark it as accepted solution ‌‌✔️ and give thumbs up 👍! 

[saikatmitra6919]

Hi Debendu, 

It was helpful but it did not work, my server script is pulling state values of recent 10 records . Here is my server script. now the state values fetched I want to color code.

data.items = getRecentIncidents();

function getRecentIncidents() {
//empty array that will hold task objects
var items = [];
var gr = new GlideRecord('incident');
gr.setLimit(10);
gr.orderByDesc('sys_created_on');
gr.query();
while (gr.next()) {
//yes this will work

var taskObj = {};
//populate the taskObj with the display values 4 fields listed
//$sp.getRecordElements(taskObj, gr,data.fields);
//$sp.getRecordDisplayValues(taskObj, task, 'number,short_description,state,assigned_to,sys_id');
//add the url to the form view of the task record
$sp.getRecordDisplayValues(taskObj, gr,data.fields);
//taskObj.url = gr.getLink(true);
taskObj.url="https://"+gs.getProperty("instance_name")+".service-now.com/sp?id=ticket&table=incident&sys_id="+gr.sys_id;
items.push(taskObj);
}
return items;
}

Below is my HTML. I have highlighted the ng-class I have used as per your suggestion. It is turning all the states New and Closed to red.

<div class="panel panel-default">

<div class="panel-heading">

<h8 class="panel-title">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;

${Ticket Details}
</h8> </div>

<div class="panel-heading">
<div class="panel-heading"
ng-click="c.getIncData()">
<h4>Incident Details ({{data.inc.length}}) </h4> </div>

<div class="panel-heading"
ng-click="c.getReqData()">
<h4>Request Details ({{data.req.length}}) </h4> </div>
</div>

</div>
<div class="panel-body">

<div ng-if="data.items2.length==0 && data.items.length>0">
<ul class="list-group" ng-repeat="item in data.items">

<a ng-href="{{item.url}}" target="_blank">{{item.number}}</a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!----
<span class="colorsquare2"><small>{{item.state}}</small></span>&nbsp;&nbsp;&nbsp;&nbsp;
---->
<span ng-class="{'text-red':{{item.state}}='New','text-blue':{{item.state}}='Closed','text-green':{{item.state}}='On Hold'}"><small>{{item.state}}</small></span>&nbsp;&nbsp;&nbsp;&nbsp;

<span class="text-muted"><small>{{item.short_description}}
</small></span>


</ul>
</div>
<ul class="list-group" ng-repeat="item2 in data.items2">

<a ng-href="{{item2.url}}" target="_blank">{{item2.number}}</a>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<span class="colorsquare"><small>{{item2.state}}</small></span>&nbsp;&nbsp;&nbsp;&nbsp;

<span class="text-muted"><small>{{item2.cat_item}}
</small></span>
</ul>
<div class="m-b text-center">
<button type="button" name="link" class="btn btn-primary btn-question" ng-click="c.action('redirect')">View All</button>
</div>
</div>

Here is my CSS below

.panel-heading{

display :flex;
}

.text-muted{

display :flex;
text-wrap: pretty;
width :1px;

}
.h4 {
text-align: center;
}

.colorsquare{
background-color: yellow;
}

.colorsquare2{
background-color: orange;
}

.text-red{

background-color: red;
}

.text.blue{

background-color:blue;
}

.text.green{

background-color:green;
}

[debendudas]

Hi @saikatmitra6919 ,

There is some syntax error in your code. Please try the below script:

<span ng-class="{'text-red': item.state=='New','text-blue': item.state=='Closed','text-green': item.state=='On Hold'}"><small>{{item.state}}</small></span>

[saikatmitra6919]

@debendudas Exactly this is what I was looking for. Many a thanks..