Home General Discussion

Colour code incidents

CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

Dear All,

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

New - Red

In Progress - Yellow

Resolved - Green

Kind Regards

Daniel

Best Answers

Answers

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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.

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

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

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    I copied this in and it didn't work.

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    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_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    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_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member Advanced IT Monkey ✭✭✭

    Hi Shane,

    This has worked.

    Thank you again for the help.

    Daniel

Sign In or Register to comment.