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);
})();
