KPI Indicators using SharePoint JavaScript Display Templates & Bootstrap

SharePoint users can reference a JavaScript files and use the same as settings to Control the rendering of fields, row items, list forms. In this article i will show you how we can display KPI indicator using a JavaScript file.


  • Create a custom list with the following columns
Column Name Filed Type
Title Single line of text
Status Choice

The values are





  • Add some items to the newly created list with different Status values
  • Upload the Task_Status_Indicator.js file under Site Settings –> Web Designer Galleries –> Master pages and page layouts and update the following properties


  • Publish Task_Status_Indicator.js file as major Version
  • Upload your own images for indicators with the following names





Note: I have uploaded my images in the Site Assets library. If you wish to change the image names or location where it is uploaded, change the img tag references in Task_Status_Indicator.js and upload again.

  • Go to List URL/AllItems.aspx and edit the List View webpart and add the javascript display template file path as shown below


Note: In my case it will be ~site/_catalogs/masterpage/Task_Status_Indicator.js

  • Click OK/Apply to see the changes as shown below


With pagination 



Change the logic in JS file as per your requirement and design.

Pagination is also implemented in this approach.

About Joseph Velliah
As a SharePoint Evangelist my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: