Change the color of a row when Date >= today's date

Question

Note: I am pretty new to SharePoint, so be gentle.

We are using SharePoint online, and I have complete control of the site. One of my users would like to have the row change color when a column (calculated as a reminder date) is equal or more than the current date. Basically to let her know when an item needs attention.

I have found java script that alters the color, but no way for the list to see today's date.

I have thought of using a workflow, but can't figure out how to make it change a row's back-ground color.

Moving it to an Excel spreadsheet won't work, because it is a list of folders going elsewhere. (URL's are too big for Excel.)

Thanks, Robin

Answer 1

You definitely don't want to use a workflow for this. Workflows are good for certain things, but the background color for a list item is not actually stored on the list item, so there is no way a workflow will be able to access or modify it.

To me, it sounds like a job for Client Side Rendering (CSR), which would use JavaScript to check the value of the field, check it against today's date, and set the color of the row accordingly.

You said you have JavaScript to change the color. The way you get the script to see today's date is by doing this:

var rightNow = new Date(); // rightNow has the date and time value of the moment it was created

Here is a good resource for learning about CSR:

http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

This was adapted from another answer on this site:

function colorCodeRows() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function (ctx) {

            // get today's date
            var today = new Date();
            // zero out the time portion so we will only compare days
            today.setHours(0,0,0,0);

            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {

                // get the date set in your date YourDateField
                var itemDate = new Date(rows[i]['YourDateField']);
                // zero out the time portion so we only compare days
                itemDate.setHours(0,0,0,0);

                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);

                if (itemDate >= today) {
                    row.style.backgroundColor = '#ED9898';
                }
            }
        }
    });
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~site/SiteAssets/Scripts/example.js'), colorCodeRows);
colorCodeRows();

How to set it up:

Copy all that code into a .js file and put it somewhere on your site. Before uploading it, change the URL in the second to last line to reflect the URL of where you plan to put the file. (I tend to put scripts in a folder called "Scripts" in my Site Assets library, but wherever you put it is fine as long as everyone has read access to it, so their browsers can download the file.)

Then go to the list in question, and from the gear menu in the upper right, choose "Edit Page". Once the page is in edit mode, edit the List View Web Part. In the Editor Pane, expand the "Miscellaneous" section at the bottom. At the bottom of the "Miscellaneous" section should be the JSLink box. Put the same URL to the file in the JSLink box. (Keep in mind you need to use URL tokens in JSLink, so it will be something like ~site/LibraryName/Folder/filename.js, not a server relative URL like /sites/MySite/LibraryName/filename.js.)

Hit OK, and stop editing the page. You should now see color coded rows.

A few other things to keep in mind:

When you add the script via the list view web part's JSLink property, you are really adding the script to the currently selected view. That means that if you want the script to be active on other views, you need to select the other views and repeat the process of setting the JSLink property with the URL of your script.

In your question, you say you want to color code the row when "a column...is equal or more than the current date", so that's what I put in the script example. But keep in mind that

if (itemDate >= today)

will color code items with today's date or dates in the future. In order to color code things with today's date or dates in the past, use

if (itemDate <= today)

In the line

var itemDate = new Date(rows[i]['YourDateField']);

'YourDateField' is the internal name of the field. This is important, it won't work if you use the display name.

Answer 2

Just finished v2.1 of a CSR support library last week.

http://iCSR.github.io

It now has a whole slidedeck with Why,What, How

With the icsr.js library loaded (no jQuery or any dependencies) all you need to write in a CSR file is:

iCSR.Me({
  file:'~sitecollection/style library/csr_remindercolor.js',
  Fields: {
    ReminderDate:{// internal fieldname!
      View:iCSR.DueDate({
         colors:['inherit','lightcoral'],
         ranges:[0]
      })
    }
  }
});

The colors and ranges arrays are developed to handle more ranges (negative numbers are days past) But this makes your before and after Today work.

Update 1

Mark Dylans answer as the correct one, this is just a shorter version:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
    function init() {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            OnPostRender: function (ctx) {
                ctx.ListData.Row.forEach(function (row) {
                    var rowId = GenerateIIDForListItem(ctx, row);
                    // native SP function for day calcs: (negative is past days)
                    if (GetDaysAfterToday(new Date(row.DueDate)) >= 0) { 
                        document.getElementById(rowId).style.backgroundColor = '#ED9898';
                    }
                });
            }
        });
    }
    RegisterModuleInit(SPClientRenderer.ReplaceUrlTokens("~siteCollection/Style Library/colordays.js"), init);
    init();
});

Answer 3

Great answer by Dylan Cristy.

One thing to note. Please check your date format as the JavaScript Date function has following format.

Date(year, month, day, hours, minutes, seconds, milliseconds);

I had to use a function to format the date as my SharePoint list date value was in dd/mm/yyyy format.

function toDate(dateStr) {
  var parts = dateStr.split("/")
  return new Date(parts[2], parts[1]-1, parts[0])
}

and colorcode function changed as follows:

var itemVal = rows[i]['End_Date'];
var itemDate = toDate(itemVal);