Colorize by ticket Status

1

Has there been any discussions or requests for the ticket view to have colors based on status? Examples: New ticket comes in as Green. Waiting on Customer status is Yellow. Needs attention Red. Scheduled = Green. etc.
Apologies if this has been discussed before, I could not find any posts.

4 Likes
2

Sounds like a great idea to me.

3

We do this with TamperMonkey add to chrome.

2 Likes
4

Would you be willing to share your tampermonkey script?

1 Like
5

Very interesting, was it easy to setup?

6 
// ==UserScript==
// @name         Syncro - Colours
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Add some colours to the tickets!!!
// @author       Priority Technology
// @include      https://*.syncromsp.com/tickets*
// @exclude      https://*.syncromsp.com/tickets/dashboard
// @grant        none
// ==/UserScript==


//Appends global style to header
function addGlobalStyle(css) {
    $('head').append('<style type="text/css">'+css+'</style>');
};

(function(changeBackground) {
    'use strict';
    //your code goes here. For example:
    let mycss = '<style>.leftcolumn{background-color:#806546}</style>';
    $(body).append(mycss);
});

//Priorities
var urgent = "span[data-bip-value='0 Urgent'] {border-color: rgb(191, 28, 13) !important;font-weight: bold !important;color: white !important; border-width:medium; }"
var high = "span[data-bip-value='1 High'] {border-color: rgb(193, 103, 1) !important;font-weight: bold !important;color: white !important; border-width:medium;}"
var normal = "span[data-bip-value='2 Normal'] {border-color: rgb(1, 145, 193) !important;font-weight: bold !important;color: white !important; border-width:medium;}"
var low = "span[data-bip-value='3 Low'] {border-color: rgb(97, 1, 193) !important;font-weight: bold !important;color: white !important}"

// Changed the colour of the TECH to red.
var user = "span[data-bip-value='113541'] {background-color: rgb(1, 127, 64) !important;font-weight: bold !important;color: white !important}"

//Text Colour
var tabletextwhite = ".very-dark-grey { color: white !important; }"
var customercolour = "td , a { color: white !important; }"

//Banner Header Colour
var widgetheader = ".widget-header {background-color:#363636 !important; }"

//Statuses
var statusnew = "span[data-bip-value='New'] {background-color: rgb(191, 28, 13) !important;font-weight: bold !important;color: white !important; }"
var statuscustomerreply = "span[data-bip-value='Customer Reply'] {background-color: rgb(191, 28, 13) !important;font-weight: bold !important;color: white !important; }"
var statusreadyforaction = "span[data-bip-value='Ready for Action'] {background-color: rgb(1, 127, 64) !important;font-weight: bold !important;color: white !important; }"
var statusscheduled = "span[data-bip-value='Scheduled'] {background-color: rgb(1, 145, 193) !important;font-weight: bold !important;color: white !important; }"
var statusproject = "span[data-bip-value='Project'] {background-color: rgb(1, 145, 193) !important;font-weight: bold !important;color: white !important; }"
var statusonsite = "span[data-bip-value='Onsite'] {background-color: #05baa1 !important;font-weight: bold !important;color: white !important; }"
var statusinprogress = "span[data-bip-value='In Progress'] {background-color: rgb(97, 1, 193) !important;font-weight: bold !important;color: white !important; }"
var statusreadytoinvoice = "span[data-bip-value='Ready to Invoice'] {background-color: rgb(20, 74, 31) !important;font-weight: bold !important;color: white !important; }"

//Last Updated Badge
var errorbadge = "span.badge.badge-square.badge-fill.badge-error {background-color: transparent !important; color: white !important; border-color: rgb(191, 28, 13) !important; border-style:solid; border-width:medium; }"

//Critical Status Text Animation
var animation = "@keyframes blinkingText{0%{     color: #ffff43;    }49%{    color: #000; }60%{    color: transparent; } 99%{    color:transparent;  } 100%{   color: #ffff43;    } }"
var criticaloverdue = "span[data-bip-value='Critical/Overdue'] {background-color: rgb(191, 28, 13) !important;font-weight: bold !important; animation:blinkingText 1.2s infinite !important; }"

//Logo
//var logo= "a.navbar-brand {background-image: url(INSERT_LOGO_URL_HERE) !important; background-size: contain  !important; background-repeat: no-repeat  !important; color:transparent !important;}"

//Author Tooltip Colour in tickets
var authortooltip = "span.author-label.tooltipper {color:deepskyblue !important; }"

addGlobalStyle(urgent);
addGlobalStyle(high);
addGlobalStyle(normal);
addGlobalStyle(low);
//addGlobalStyle(user);
addGlobalStyle(tabletextwhite);
addGlobalStyle(customercolour);
addGlobalStyle(widgetheader);
addGlobalStyle(statusnew);
addGlobalStyle(statuscustomerreply);
addGlobalStyle(statusreadyforaction);
addGlobalStyle(statusscheduled);
addGlobalStyle(statusproject);
addGlobalStyle(statusonsite);
addGlobalStyle(statusinprogress);
addGlobalStyle(statusreadytoinvoice);
addGlobalStyle(errorbadge);
addGlobalStyle(animation);
addGlobalStyle(criticaloverdue);
//addGlobalStyle(logo);
addGlobalStyle(authortooltip);

changeBackground();
1 Like
7

thanks for this and will play. We have some issues with it as it loses the ticket text line but seems to do other bits okay.