Conditional Color Coding on SharePoint 2013 Task List using JSLink

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

1. red for overdue tasks

2. yellow for tasks due in next 7 days,

3. green for upcoming tasks beyond 7 days in the future

4. 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:

TaskStatusConditional.js Create this Javascript file and store in a convenient location, typically the masterpage library of the root site collection. 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/