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 (values 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

kpi2

With pagination 

kpi3

Notes:

  • Change the logic in JS file as per your requirement and design.
  • Pagination is also implemented in this approach.