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/

4 responses to “Conditional Color Coding on SharePoint 2013 Task List using JSLink”

  1. I’m struggling to get this to work in SP 2013. Shouldn’t the js have a reference to the new “kpi” field? Does the OOTB field “Due Date” need to be changed to “dueDate” to match the js?

    • You’re right on the first point Ken- I’ve updated the initial field reference in the JS to be “KPI” instead of “DueDate”. Sorry about that.
      You don’t need to change the OOTB Due Date field (as usual with any SP OOTB fields), we are just referencing it via “ctx.CurrentItem.DueDate” to grab it’s current value, so we can then render the appropriate status symbol in the KPI column.

  2. When I upload the file to the Master Pages library, I do not have options to modify steps 5-7. Is this a permission or version issue? (We’re on SP2013)

    • Hi Stephanie, Apologies for the late reply. I think the formatting on the code snippet in that article might be messed up. Try creating the Javascript file using the code provided, but omit the first and last lines, e.g. remove

       and 

      . The file should then upload as a valid JS.

Leave a Reply

I've been low-key stressed about how to view the many email inboxes I have in Outlook in one view without having to scroll and hunt for new messages.

The 'macro' method in this video works great.

View Multiple Inboxes at Once in Outlook 365 https://youtu.be/NpFSsovHgVo via @YouTube

We help Department of Defense clients realize benefits such as faster decision making, total traceability, and automated updates by identifying targeted goals and putting an emphasis on a culture of adoption through buy-in by individual team members.

https://bit.ly/3IRc68a

How to: Create a report quickly from a #SharePoint list or library in the #PowerBI service
📈📉📊📈📉📊
https://bit.ly/3vbKfMD
#Microsoft365

Leverage Microsoft Project for the web with the Project Accelerator https://youtu.be/Hxr8dncHmT8 via @YouTube

Load More...