If you want to color your out of box list view items in SharePoint online then you are at right place. Here is a approach which I took.

Requirement — here I wanted to color the SharePoint items depending on the column value. Here it is DueDate.

Here is the color function which checks the due date and color specific row in the table.

function colourRows() {
 $(document).ready(function () {
 var readyStateCheckInterval = setInterval(function () {
 if (document.readyState === “complete”) {
 clearInterval(readyStateCheckInterval);$(‘.ms-listviewtable tr’).each(function () {
 var dueDate = $(this).find(‘td’).eq(6).text();
 if (dueDate) {
 var dt = dueDate.split(‘/’);
 dueDate = new Date(dt[2] + ‘-’ + dt[1] + ‘-’ + dt[0]);
 //console.log(dueDate);
 var now = new Date();
 now.setHours(0, 0, 0, 0);
 dueDate.setHours(0, 0, 0, 0);
 var Difference_In_Time = dueDate.getTime() — now.getTime();
 var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
 //console.log(Difference_In_Days);
 //console.log($(this).closest(‘tr’));
 if (Difference_In_Days <= -1) {
 //red
 $(this).closest(‘tr’).css(‘background-color’, ‘indianred’);
 } else if (Difference_In_Days > -1 && Difference_In_Days < 1) {
 //green
 $(this).closest(‘tr’).css(‘background-color’, ‘lightgreen’);
 } else if (Difference_In_Days >= 1) {
 //blue
 $(this).closest(‘tr’).css(‘background-color’, ‘lightsteelblue’);
 }
 }
 });}
 }, 1);
 });
 }

Here if you have pagination and if you navigate to next page, SharePoint dynamically updates the table, now we need to return the code to color the rows in the table. To handle this scenario I used the hashchange event which basically gets triggered when the URL is changed.

window.addEventListener(“hashchange”, colourRows , false);

So when the we navigate to next page the URL is changed eventually calling our color function.

This blog is part of SharePoint Week. For more great content, click here

About the Author:

Software Developer.

Reference: