Colour code incidents

CaterhamITSupport

Dear All,

Is there a way of colour coding incidents dependent on their status:

New - Red

In Progress - Yellow

Resolved - Green

Kind Regards

Daniel

Shane_White

Hi @CaterhamITSupport

It seems like anything you put in Custom.js doesn't work, can you paste it at the top of the document, and move the other javascript you have in there to the bottom and try that?

Just to be safe each time you save the file, CTRL + F5 your browser to do a cache refresh

Thanks,

Shane

Shane_White

OR add this to your Custom.css

.k-grid .k-state-selected {

  color: black;

}

.k-grid tr.k-state-selected:hover {

  color: black;

}

Shane_White

Hi @CaterhamITSupport

You could this to your custom.js file:

$(document).on('ajaxStop', function () {

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

if (statusPill.length > 0) {

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"}

}

}

});

This example will change the background colour if the status is active to green and resolved to red. You can then edit this code to add in other statuses, change the colours etc.

Let me know what you think!

Shane.

CaterhamITSupport

Can you do a remote in today to show me how this would work?

Shane_White

Hi @CaterhamITSupport

Thanks for the call today I understand what you meant now, here is some code you can put in your custom.js file

$(document).on('ajaxStop', function () {

$('[role=gridcell]').filter(function() {return $(this).text() === "Active"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "Submitted"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Close"; }).css("background-color", "deepskyblue");

});

Let me know if this works,

Thanks,

Shane

CaterhamITSupport

I copied this in and it didn't work.

Shane_White

Hi @CaterhamITSupport

It seems like anything you put in Custom.js doesn't work, can you paste it at the top of the document, and move the other javascript you have in there to the bottom and try that?

Just to be safe each time you save the file, CTRL + F5 your browser to do a cache refresh

Thanks,

Shane

CaterhamITSupport

Dear Shane,

Can you confirm how i would get this working for specific AD groups?

$(document).on('ajaxStop', function () {

$('[role=gridcell]').filter(function() {return $(this).text() === "Active"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "Submitted"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Close"; }).css("background-color", "deepskyblue");

});

Kind Regards

Daniel

Shane_White

Hi @CaterhamITSupport

Why could you want it a different colour for each support group?

This would be a bit more of a heavy lift...

Thanks,

Shane

CaterhamITSupport

So i want members of AD groups run run this code only.

If they are not a member of the groups do not run it.

Daniel

CaterhamITSupport

Hi Shane,

I noticed that the colour yellow on has white writing on it. Can you offer any advice to change the colour yellow to have black writing?

Thanks

Daniel

$(document).on('ajaxStop', function () {

$('[role=gridcell]').filter(function() {return $(this).text() === "Active"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "Submitted"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Close"; }).css("background-color", "deepskyblue");

});

Shane_White

Hi @CaterhamITSupport

Instead of this:

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css("background-color", "yellow");

Use this:

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css("background-color", "yellow","color":"black");

Thanks,

Shane

Shane_White

OR add this to your Custom.css

.k-grid .k-state-selected {

  color: black;

}

.k-grid tr.k-state-selected:hover {

  color: black;

}

CaterhamITSupport

Hi Shane,

This has worked.

Thank you again for the help.

Daniel