Implement Dynamic Progress Bar In List View For SharePoint 2016 And Office 365 Using Client Side Rendering

• If the total sales are greater than the sales target, the percentage value will be set to 100 and the span will show the value as 100 and the background color of the div element will be assigned Green color.
  
  
• If the sales percentage is greater than 80, the background color of the div element will be assigned a Green color and the span element will show the percentage value.
  
  
• If the sales percentage is greater than 50 and less than 80, the background color of the div element will be assigned an Orange color and the span element will show the percentage value.
  
  
• If the sales percentage is less than 50, the background color of the div element will be assigned a Red color and the span element will show the percentage value.

Since we have overridden the field property, the overriding method will run for each row in the list. Thus, the column values in each row will be compared and based on the result. The third column will have a new value. Thus, we have returned an HTML image element, that will be assigned to the destination column for each row during the rendering process.

Note

In order to implement a rendering logic to each row in the list, override the fields property.

Full Code

• Let’s see how to add the code as JSLink to the list view. Save the code as a js file and upload it to one of the libraries say: Site Assets.
  
  
• Go to the edit page of the list view by appending the URL “? ToolpaneView=2” at the end of the list view’s .aspxURL.
  
  
• Click Edit Web part for the list view. Under Miscellaneous section, there is a text box for entering JSLink.
  
  
• Add the relative URL of the js file after ~site or ~ site collection, depending upon the location of the Site Assets library (or any other repository), where you have uploaded the js file.
  
  

Click apply. This will apply JSLink to the list view.

Output



Thus, we have seen how to implement a color coded progress bar during the run time, using client side rendering. This is quite handy , when we have to do list view formatting dynamically during the rendering time.