Home Community Uploads
image

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 Ninja 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 Ninja 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:
    Priorität') ==0 ) {if ($dText.text().indexOf('
  • Karen_Bruster1Karen_Bruster1 Member 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 Member 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!
  • Brad_ZimaBrad_Zima Member Advanced IT Monkey ✭✭✭

    @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_ZeinhoferSimon_Zeinhofer Customer Advanced IT Monkey ✭✭✭

    @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_ZimaBrad_Zima Member Advanced IT Monkey ✭✭✭

    @Simon_Zeinhofer Thanks, that did the trick!

Sign In or Register to comment.