Modify SharePoint list column view by Client-side

How to change SharePoint list column view by Client- side

Introduction

Hi, recently I was working one of the migration projects where I need to analyze lotus notes application. Since there are several application which have some custom views with UI. To fulfill such requirement we have to change column view templete. Below I am give one example where I am display progress bar.

  In SP list we found record or task completed with % but many organization has requirement that they want to see this % in progress bar because it looks pretty cool and easy to understanding for lay user. So I am here to explain that how we can achieve this with simple Client Side Rendering Script.

Description

You need following things to run this sample 

• SharePoint 2013 (Office 365 online or on premises)

This problem will be solved by doing following easy steps. 

the output will be look like as following. 

Please follow following steps to see output

Step-1 Create Custom list with following columns

 Complete with datatype number. kindly check on show as %

 RGAStatus with datatype Choice

Step-2 Create Folder with the name of JSSamlpe at this link ( JS code can find below of the post)

https://SharePointSite/sites/International/Style%20Library/Forms/AllItems.aspx 

Step-3 Copy following code and past in notepad file save with .js extension.

Step-4 Save this file into JSSample.

Step-5 Edit page and go to list setting and set this file path.

   ~sitecollection/Style Library/JSSample/ProgressBar.js

JavaScript

(function () { 

    // Initialize the variable that stores the objects. 

    var overrideCtx = {}; 

    overrideCtx.Templates = {}; 

  

    overrideCtx.Templates.Fields = { 

  'Complete': { 'View' : '<div style="background: #F3F3F3; display:block; height: 20px; width: 100px;"><div style="background: <#=ctx.CurrentItem.RGAStatus#>; height: 100%; width: <#=ctx.CurrentItem.Complete.replace(/ /g,"")#>;"></div></div><#=ctx.CurrentItem.Complete#>' }   

             }; 

    // Register the template overrides. 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); 

     

})();