How to update colour of statuses in 9.0.9

Sean_Terry

Anyone know how to change the active button below:




In the past we've had users clicking on the blue button and for whatever reason black is best for us, so we have this set up in 8.9.5 that we currently have in live:

Brian_Wiest

Custom CSS

.status-pill--active {
    color: white;
    background-color: #333 !important;
}

Sean_Terry

Thanks

Gabriel_Lences

Can this be further enhanced to have different colors according to what the status of the SR is? 
E.g: failed would be red, submitted blue, completed green etc.?

Shane_White

Hi @Gabriel_Lences,

Yes it certainly can, I have drawn up a quick example for Incidents to show you how this might work, the js would need to go in CustomSpace folder and is changing the status-pill class background color (you can add border color and other css elements as well) to red if Active and blue if resolved:

$(document).ready(function () {

var mainPageNode = document.getElementById('main_wrapper');

var observer = new MutationObserver(function(mutations) {

var statusPill =  $('.status-pill')

//console.log(statusPill);

if (statusPill.length > 0) { //An Element Exists

if(pageForm.viewModel.Status.Name === "Active") {

for(var i = 0; i < statusPill.length; i++){statusPill[i].style.backgroundColor = "green"}

}

if(pageForm.viewModel.Status.Name === 'Resolved') {

for(var i = 0; i < statusPill.length; i++){statusPill[i].style.backgroundColor = "red"}

}

observer.disconnect();

}

});

// configure the observer and start the instance.

var observerConfig = {attributes: true, childList: true, subtree: true, characterData: true };

observer.observe(mainPageNode, observerConfig);

});

Below is a screenshot of the result:


Hope this helps,
Thanks,
Shane.

Gabriel_Lences

@Shane_White , that's exactly what I was looking for, perfect! Thanks a bunch! 

Shane_White

@Gabriel_Lences

I have done a quick edit on the above code to fix it as a used the wrong if statement

Thanks,
Shane.