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.

Steps 

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

 

The values are

Success

Info

Warning

Danger

  • 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

properties

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

Circle_Blue.png

Circle_Red.png

Circle_Yellow.png

Circle_Green.png

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

wpconfig

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

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

kpi

With pagination 

kpi

Notes:

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

Pagination is also implemented in this approach.

Advertisements

About Joseph Velliah
As a SharePoint Developer 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: