Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Color coded priorities

Ryan_DyckRyan_Dyck Customer IT Monkey ✭
edited June 2017 in Community Uploads
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 */
}


Comments

  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    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_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".

  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    @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:
    if ($dText.text().indexOf('Priorität') ==0 ) {
  • Karen_Bruster1Karen_Bruster1 Customer IT Monkey ✭
    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_DyckRyan_Dyck Customer IT Monkey ✭
    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_Bruster1Karen_Bruster1 Customer IT Monkey ✭
    @Ryan_Dyck Thanks now I am just trying to get it to show up on my DEV for testing
  • Karen_RingKaren_Ring Customer IT Monkey ✭
    @Ryan_Dyck Great implementation!
Sign In or Register to comment.