Conditional Color Coding on SharePoint 2013 Task List using JSLink

For SharePoint 2013 branding experts, this may be old hat- there are plenty of great articles out there on working with the new JSLink method of working with the clientside presentation layer of SharePoint. In this case, and for my own documentation, I’m sharing a specific JSLink method to conditionally format a SP 2013 Task List’s Due Date column, based on the date displayed. It also handles cases where there is no Due Date entered for a task.

Requirements

Conditionally display KPI style indicators on OOTB Task list web parts:

  • red for overdue tasks
  • yellow for tasks due in next 7 days,
  • green for upcoming tasks beyond 7 days in the future
  • blank when no due date is set

Steps

1. Create a new field in the list that will be used to display your image. For this example, I’m using the column name of “KPI”

2. Create a JavaScript file TaskListConditional.js (code provided below) that overrides the display of the new field based on your conditions. (To see the script for this file, view Code & Assets > TaskStatusConditional.js at the end of this post.)

3. Upload the JavaScript file to your MasterPage gallery.

4. Select the JavaScript Display Template content type.

5. Set the Target Control Type value to “View.”

6. Set the Standalone value to “Override.”

7. Set the Target Scope value to the URL of your site (e.g. “/sites/site1″).

8. Go to your list view and add the link to the JavaScript file you just uploaded.

9. Browse to the List View.

10. Select Edit Page.

11. Edit the List View Web Part.

12. Under the Miscellaneous group, enter the URL to your JavaScript file in the JS Link property (e.g. “~site/_catalogs/masterpage/TaskListConditional.js”).

 

After following these steps, the Due Date column should show the appropriate icon image based on the due date of the task. This technique can be used to do many other things in SharePoint List Views. Using only JavaScript and HTML, you can change how any field or even how the entire list view is displayed to the user.

 

Code & Assets

Images used

Upload these images to a sensible location, e.g. /SiteAssets in the root site collection:

Green Red Yellow

 

TaskStatusConditional.js

Create this Javascript file and store in a convenient location, typically the masterpage library of the root site collection.

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "KPI": {"View": StatusIconViewTemplate}
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function StatusIconViewTemplate(ctx) {
	var _dueDate = new Date(ctx.CurrentItem.DueDate);
	
	var now = new Date();
	var nowPlus = new Date();
	nowPlus.setDate(now.getDate()+7);
	if (_dueDate == 'undefined' || !_dueDate) {
		return '';
	}
	else if (_dueDate < now) 
	{
		return "<span><font style='color:red'>" + _dueDate.toLocaleDateString()  + "&nbsp;<img src='https://yoursite.sharepoint.com/sites/site1/SiteAssets/red.png'/></font></span>";
	}
	else if (_dueDate >= now && _dueDate <= nowPlus) 
	{
		return "<span><font style='color:black'>" + _dueDate.toLocaleDateString() + "&nbsp;<img src='https://yoursite.sharepoint.com/sites/site1/SiteAssets/yellow.png'/></font></span>";
	}
	else if (_dueDate > now) 
	{
		return "<span><font style='color:black'>" + _dueDate.toLocaleDateString() + "<img src='https://yoursite.sharepoint.com/sites/site1/SiteAssets/green.png'/></font></span>";
	}
}

References

http://www.abelsolutions.com/2013-blog/creating-a-simple-kpi-column-in-sharepoint-2013-list-views-using-js-link/ http://www.wonderlaura.com/Lists/Posts/Post.aspx?ID=228

 

..and if you need some backup figuring out what your Field names are, use: http://www.eliostruyf.com/ultimate-diagnostic-display-template/