Home Analyst Portal

Color coded priorities

Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
Has anyone implemeted a solution for color coding the priorites in grid views?
ive seen a demo of but no code.

Answers

  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    Yes, Where would that go? i tried custom.js and custom.css
  • Ryan_DyckRyan_Dyck Customer IT Monkey ✭
    edited April 2017
    We do that.  I've submitted a couple of feature requests for this and both times was tole a thread in the community (here) was made to vote on it.  I've never been able to find it.  My idea was for them to add a class based off of the value of the cell.  Since they don't do that, I did....

    The problem with Geoffs is that any cell with the word Failed in will have a red background.  I don't think you want that.  What I did was a little more work, but made it easy to same colors to different cell types (priorty 9 and status active = green... updated by used and priority 3 are the same)

    We did this for color coding the status and priority columns
    Here's what we did.
    1. custom JavaScript:

    This is done in a JavaScript interval as the content here loads after the page dom and refreshes on a timer so it needs to happen more then once.
    Use jQuery to first look at the column headers and find the one with the title you want.  For this example, I'll say Priority.
    Count the position it is from the left.  Since the column ording can me modified by the end user, you cant assuming it's always the same order.
    Now that you know what order it is on the table, use jQuery to get the nTh cell of each row, make sure it doesn't already have the added class and add a class based off of the contents.  example: priority6 or prioeiry 9

    2. css
    Here's how it looks



    Since my work permits... here you go:

    custom.js
    // Set the colour of columns for priority and status
    function SetStatusPriorityColors() {
    	var $headers = $('table thead tr th.k-header');
    	if ($headers === undefined || $headers.length == 0) { return; }
    	
    	var count = 0;
    	var priorityLoc = 0;
    	var statusLoc = 0;
    	$headers.each(function() {
    		count++;
    		var $this = $(this);
    		var $dText = $this.find('.k-link');
    		if ($dText.text().indexOf('Priority') ==0 ) {
    			priorityLoc = count;
    		} else if ($dText.text().indexOf('Status') ==0 ) {
    			statusLoc = count;
    		}
    	});
    	
    	var $tRows = $('table tbody tr');
    	if (priorityLoc == 0 && statusLoc == 0 || $tRows === undefined || $tRows.length == 0 || $tRows.length == 0) { return }
    		
    	$tRows.each(function() {
    		var $this = $(this);
    		if (priorityLoc > 0) {
    			var $pCell = $($this.find('td')[priorityLoc -1]);
    			if (!$pCell.hasClass('priorityInfo')) {
    				$pCell.addClass('priorityInfo');
    				$pCell.addClass('priority' + $pCell.text());
    			}
    		}
    		if (statusLoc > 0) {
    			var $pCell = $($this.find('td')[statusLoc -1]);
    			if (!$pCell.hasClass('statusInfo')) {
    				$pCell.addClass('statusInfo');
    				$pCell.addClass('status' + $pCell.text().replace(/ /g,''));
    			}
    		}
    	});
    }
    	
    var statusPriorityColorsTimer = window.setInterval(SetStatusPriorityColors, 100);

    custom.css
    .priority1, .priority2, .priority3, .priority4, .priority5, .priority6, .priority7, .priority8, .priority9 {
    	color: #000000; /* 0 0 0 */
    }
    
    .statusInfo,
    .statusInProgress,
    .statusPending{
    	background-color: #99CCFF !important; /* 153 204 255 */
    }
    
    .priority1,
    .priorityImmediate,
    .statusFailed {
    	background-color: #FF9999 !important; /* 255 153 153 */
    }
    
    .priority2 {
    	background-color: #FFB299 !important; /* 255 178 153 */
    }
    
    .priority3,
    .priorityHigh,
    .statusAwatingExternal,
    .statusUpdatedByUser,
    .statusOnHold {
    	background-color: #FFCC99 !important; /* 255 204 153 */
    }
    
    .priority4 {
    	background-color: #FFE599 !important; /* 255 229 153 */
    }
    
    .priority5,
    .priorityMedium,
    .statusInProgress {
    	background-color: #FFFF99 !important; /* 255 225 153 */
    }
    
    .priority6 {
    	background-color: #E5FF99 !important; /* 229 255 153 */
    }
    
    .priority7 {
    	background-color: #CCFF99 !important; /* 204 255 153 */
    }
    
    .priority8 {
    	background-color: #B2FF99 !important; /* 178 255 153 */
    }
    
    .priority9,
    .priorityLow,
    .statusActive,
    .statusSubmitted {
    	background-color: #99FF99 !important; /* 153 255 153 */
    }
    
    .statusResolved,
    .statusClosed,
    .statusCompleted,
    .statusCancelled,
    .statusInfo.status {
    	background-color: transparent !important; /* x x x */
    }


  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    That works great! added some lines as most of our users have the portal in Swedish.
    Thanks Ryan!
  • Candice_YeudallCandice_Yeudall Customer Advanced IT Monkey ✭✭✭
    very nice thank you :)
  • Oskar_PittersOskar_Pitters Customer IT Monkey ✭

    Hey great work.

    But how do I get it to work for other languages like german.

    Status is no Problem because in english and german it is the same data name.

    But Priority is in german "Priorität".

  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    Just add your language in each of the coresponding blocks for the right color.

    .priority9,
    .priorityLow,
    .priorityLåg,
    .statusActive,
    .statusAktiv,
    .statusSkickad,
    .statusSubmitted {

    i added the bold lines above for swedish.
    I didnt remove the english lines as alot of our users have the portal set to english as we are use to ITIL terms in english.
  • Oskar_PittersOskar_Pitters Customer IT Monkey ✭

    Thank you for the quick answer, but it did not work.

    I added in the *.css file to the blocks
    .priorityGering,
    .priorityMittel,
    .priorityHoch{


    But I think that I would need to use something like ".prioritätGering" Problem is the "ä".

  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    Did you add it below the english blocks like so

    .priority5,
    .priorityMedium,
    .priorityMedel,
    .statusPågår,
    .statusInProgress {
    background-color: #FFFF99 !important; /* 255 225 153 */
    }

    Priority in swedish is Prioritet and i didnt add any such lines.
  • Oskar_PittersOskar_Pitters Customer IT Monkey ✭
    edited January 2018

    Yes I added it like you said.

    .priority5,
    .priorityMedium,
    .priorityMittel,
    .statusInProgress {
     background-color: #FFFF99 !important; /* 255 225 153 */
    }

    But no change.

  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    Ok i see now that i added the translations in custom.js

    function SetStatusPriorityColors() {
    	var $headers = $('table thead tr th.k-header');
    	if ($headers === undefined || $headers.length == 0) { return; }
    	
    	var count = 0;
    	var priorityLoc = 0;
    	var statusLoc = 0;
    	$headers.each(function() {
    		count++;
    		var $this = $(this);
    		var $dText = $this.find('.k-link');
    		if ($dText.text().indexOf('Priority') ==0 ) {
    			priorityLoc = count;
    		} else if ($dText.text().indexOf('Status') ==0 ) {
    			statusLoc = count;
    		}
    		else if ($dText.text().indexOf('Prioritet') ==0 ) {
    			priorityLoc = count;
    		}
    	});
    	
    	var $tRows = $('table tbody tr');
    	if (priorityLoc == 0 && statusLoc == 0 || $tRows === undefined || $tRows.length == 0 || $tRows.length == 0) { return }
    		
    	$tRows.each(function() {
    		var $this = $(this);
    		if (priorityLoc > 0) {
    			var $pCell = $($this.find('td')[priorityLoc -1]);
    			if (!$pCell.hasClass('priorityInfo')) {
    				$pCell.addClass('priorityInfo');
    				$pCell.addClass('priority' + $pCell.text());
    			}
    		}
    		if (statusLoc > 0) {
    			var $pCell = $($this.find('td')[statusLoc -1]);
    			if (!$pCell.hasClass('statusInfo')) {
    				$pCell.addClass('statusInfo');
    				$pCell.addClass('status' + $pCell.text().replace(/ /g,''));
    			}
    		}
    		if (priorityLoc > 0) {
    			var $pCell = $($this.find('td')[priorityLoc -1]);
    			if (!$pCell.hasClass('prioritetInfo')) {
    				$pCell.addClass('prioritetInfo');
    				$pCell.addClass('prioritet' + $pCell.text());
    			}
    		}
    	});
    }
    	
    var statusPriorityColorsTimer = window.setInterval(SetStatusPriorityColors, 100);

  • Oskar_PittersOskar_Pitters Customer IT Monkey ✭
    edited January 2018

    :) Working great now, thank you :)

    Here the edited *.js:

    &nbsp;});<br>}<br>&nbsp;<br>var statusPriorityColorsTimer = window.setInterval(SetStatusPriorityColors, 100);function SetStatusPriorityColors() {<br>&nbsp;var $headers = $('table thead tr th.k-header');<br>&nbsp;if ($headers === undefined || $headers.length == 0) { return; }<br>&nbsp;<br>&nbsp;var count = 0;<br>&nbsp;var priorityLoc = 0;<br>&nbsp;var statusLoc = 0;<br>&nbsp;$headers.each(function() {<br>&nbsp;&nbsp;count++;<br>&nbsp;&nbsp;var $this = $(this);<br>&nbsp;&nbsp;var $dText = $this.find('.k-link');<br>&nbsp;&nbsp;if ($dText.text().indexOf('Priority') ==0 ) {<br>&nbsp;&nbsp;&nbsp;priorityLoc = count;<br>&nbsp;&nbsp;} else if ($dText.text().indexOf('Status') ==0 ) {<br>&nbsp;&nbsp;&nbsp;statusLoc = count;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp; else if ($dText.text().indexOf('Priorität') ==0 ) {<br>&nbsp;&nbsp;&nbsp;priorityLoc = count;<br>&nbsp;&nbsp;}<br>&nbsp;});<br>&nbsp;<br>&nbsp;var $tRows = $('table tbody tr');<br>&nbsp;if (priorityLoc == 0 && statusLoc == 0 || $tRows === undefined || $tRows.length == 0 || $tRows.length == 0) { return }<br>&nbsp;&nbsp;<br>&nbsp;$tRows.each(function() {<br>&nbsp;&nbsp;var $this = $(this);<br>&nbsp;&nbsp;if (priorityLoc > 0) {<br>&nbsp;&nbsp;&nbsp;var $pCell = $($this.find('td')[priorityLoc -1]);<br>&nbsp;&nbsp;&nbsp;if (!$pCell.hasClass('priorityInfo')) {<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('priorityInfo');<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('priority' + $pCell.text());<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;if (statusLoc > 0) {<br>&nbsp;&nbsp;&nbsp;var $pCell = $($this.find('td')[statusLoc -1]);<br>&nbsp;&nbsp;&nbsp;if (!$pCell.hasClass('statusInfo')) {<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('statusInfo');<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('status' + $pCell.text().replace(/ /g,''));<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;if (priorityLoc > 0) {<br>&nbsp;&nbsp;&nbsp;var $pCell = $($this.find('td')[priorityLoc -1]);<br>&nbsp;&nbsp;&nbsp;if (!$pCell.hasClass('prioritätInfo')) {<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('prioritätInfo');<br>&nbsp;&nbsp;&nbsp;&nbsp;$pCell.addClass('priorität' + $pCell.text());<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}
    And the corresponding *.css
    .priority1, .priority2, .priority3, .priority4, .priority5, .priority6, .priority7, .priority8, .priority9, .priorityDirekt, .priorityGering, .priorityMittel, .priorityHoch {<br>&nbsp;color: #000000; /* 0 0 0 */<br>}
    .statusInfo,<br>.statusInProgress,<br>.statusPending{<br>&nbsp;background-color: #99CCFF !important; /* 153 204 255 */<br>}
    .priority1,<br>.priorityImmediate,<br>.priorityDirekt,<br>.statusFailed {<br>&nbsp;background-color: #FF9999 !important; /* 255 153 153 */<br>}
    .priority2<br>&nbsp;{<br>&nbsp;background-color: #FFB299 !important; /* 255 178 153 */<br>}
    .priority3,<br>.priorityHigh,<br>.priorityHoch,<br>.statusAwatingExternal,<br>.statusUpdatedByUser,<br>.statusOnHold {<br>&nbsp;background-color: #FFCC99 !important; /* 255 204 153 */<br>}
    .priority4 {<br>&nbsp;background-color: #FFE599 !important; /* 255 229 153 */<br>}
    .priority5,<br>.priorityMedium,<br>.prioritätMittel,<br>.statusInProgress {<br>&nbsp;background-color: #FFFF99 !important; /* 255 225 153 */<br>}
    .priority6 {<br>&nbsp;background-color: #E5FF99 !important; /* 229 255 153 */<br>}
    .priority7 {<br>&nbsp;background-color: #CCFF99 !important; /* 204 255 153 */<br>}
    .priority8 {<br>&nbsp;background-color: #B2FF99 !important; /* 178 255 153 */<br>}
    .priority9,<br>.priorityLow,<br>.priorityGering,<br>.statusActive,<br>.statusSubmitted {<br>&nbsp;background-color: #99FF99 !important; /* 153 255 153 */<br>}

    .statusResolved,<br>.statusClosed,<br>.statusCompleted,<br>.statusCancelled,<br>.statusInfo.status {<br>&nbsp;background-color: transparent !important; /* x x x */<br>}
  • Ryan_DyckRyan_Dyck Customer IT Monkey ✭
    Glad it's working for you guys  :D
Sign In or Register to comment.