SharePoint List with KPI Indicators

A great new feature in SharePoint 2013 is the ability to change the way list views, or even specific fields within list views, are displayed on the screen. This is accomplished using JS Link and requires only a few clicks and a little JavaScript knowledge.

Let’s say you want to add a new column to a task list―one that displays colored icons. The icon color will display differently depending on the Status and Due Date of the task. This could be useful for users to quickly get an indication of tasks that are due soon and tasks that are overdue.

SharePoint List with KPI Indicators


To accomplish this with JS Link, follow these basic 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 that overrides the display of the new field based on your conditions. (To see the script for this file, view Figure 1 at the end of this post.)
    1. If the status value equals “Completed,” show the blue icon.
    2. If the Due Date is in the past, show the red icon.
    3. If the Due Date is in within the next seven days, show the yellow icon.
    4. If the Due Date is beyond seven days from now, show the green icon.
  3. Upload the JavaScript file to your MasterPage gallery.
    1. Select the JavaScript Display Template content type.
    2. Set the Target Control Type value to “View.”
    3. Set the Standalone value to “Override.”
    4. Set the Target Scope value to the URL of your site (e.g. “/sites/site1”).
  4. Go to your list view and add the link to the JavaScript file you just uploaded.
    1. Browse to the List View.
    2. Select Edit Page.
    3. Edit the List View Web Part.
    4. Under the Miscellaneous group, enter the URL to your JavaScript file in the JS Link property (e.g. “~site/_catalogs/masterpage/Task_Demo_Script.js”).

After following these steps, the KPI 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.



Figure 1: JavaScript file contents