Color coded priorities

Ryan_Dyck

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 */
}

IT Monkey

***Reposted from https://community.cireson.com/discussion/1753

Konstantin_Slavin-Bo

This is great, I just implemented it, thanks a lot!

One thing I did was changing the js code to lookup the headers data-title attribute instead of getting the k-link element, and comparing that to 'Priority' and 'Status'. I don't know if anything changed between portal versions, but this works better for us.

I also added a color style to some of the css elements, so when a row is marked, it doesn't get hard to read the white text on some of lighter backgrounds.

Once again, thanks!

Oskar_Pitters

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

Konstantin_Slavin-Bo

@Oskar_Pitters
You can just change the text between the 'plings' in this line to the German equivalent:

if ($dText.text().indexOf('Priority') ==0 ) {

Such that it becomes:

Priorität') ==0 ) {if ($dText.text().indexOf('

Karen_Bruster1

Konstantin_Slavin-Bo said:

This is great, I just implemented it, thanks a lot!

One thing I did was changing the js code to lookup the headers data-title attribute instead of getting the k-link element, and comparing that to 'Priority' and 'Status'. I don't know if anything changed between portal versions, but this works better for us.

I also added a color style to some of the css elements, so when a row is marked, it doesn't get hard to read the white text on some of lighter backgrounds.

Once again, thanks!

@Konstantin_Slavin_Bo

How did you get modify the code to look up the data-title instead of the k-link? I am not a jscript person but I realy would like to get this working In my environment.

Ryan_Dyck

I'm assuming he did this...


Changed this 

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

To this

		var $this = $(this);
		if ($this.data('title') === 'Priority') {
			priorityLoc = count;
		} else if ($this.data('title') === 'Status') {
			statusLoc = count;
		}

Karen_Bruster1

@Ryan_Dyck Thanks now I am just trying to get it to show up on my DEV for testing

Karen_Ring

@Ryan_Dyck Great implementation!

Brad_Zima

@Ryan_Dyck This add-on seems to be broken with the latest 11.6 release of the portal. Is there any chance you have an updated version?

Simon_Zeinhofer

@Brad_Zima

We use this code, which is working well in 11.6 - As you can see it is exactly the same code, just that the var $pCell = ... has changed from -1 to -3. This works in every 11.* version of the portal.

// 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 -3]);

if (!$pCell.hasClass('priorityInfo')) {

$pCell.addClass('priorityInfo');

$pCell.addClass('priority' + $pCell.text());

}

}

if (statusLoc > 0) {

var $pCell = $($this.find('td')[statusLoc -3]);

if (!$pCell.hasClass('statusInfo')) {

$pCell.addClass('statusInfo');

$pCell.addClass('status' + $pCell.text().replace(/ /g,''));

}

}

});

}

var statusPriorityColorsTimer = window.setInterval(SetStatusPriorityColors, 100);

Brad_Zima

@Simon_Zeinhofer Thanks, that did the trick!