JSLink came with SharePoint 2013 but it was not used that much at the time because people are much more comfortable with farm/sandbox baased solutions and playing with XSLT was fun. But with rise in usage of SharePoint Online (office 365) it become one of the necessity one should know.
JSLink is pretty smart or we can call it modern way to render list views, item and fields using JavaScript, HTML and CSS, no need to learn XSLT. Previously if we need to do some customization in list view web part then we have write a complex xslt which is not easy for everyone. And now with JSLink, you only need to have understanding of how to javascript works.
Recently you heard that Microsoft has disabled HTML markup from calculated columns in SharePoint Online. In SharePoint 2016, this functionality is disabled on web applications which are provisioned after installation of July 2017 PU, use below is the Powershell cmdlets to enable it on SharePoint 2016 for a web application.
$webApp = Get-SPWebApplication https://Sp2016Farm $webApp.CustomMarkupInCalculatedFieldDisabled = $true $webApp.Update()
But do we still need to use calculated columns? NO, we can use JSLink to render list items using client side and can define the rendering of a list view web party or for any specific field, which is quite fun.
In this blog post, I am going to share to share a real-life example where we have used calculated columns to render specific html markup for a list view which stopped working after recent change in SharePoint online, initially we thought that this will be time taking job as we need to work on list view xslt but JSLink did the job and made life much easier than before. Below is the screenshot where you can see html markup showing in html markup instead of the images which we tried to show.
In above picture, you can see the HTML markup, each of the calculated column having several conditions like below:
=IF([CustomColumn]="Complete","<img src=' /siteassets/checked.png' width='16px'/>", IF([CustomColumn]="Not Started","<img src=' /siteassets/uncheck.png' width='16px' />",IF([Executive Approval]="","<img src=' /siteassets/uncheck.png' width='16px' />",[Executive Approval])))
The previous look of the same list view was showing check boxes as shown below:
I have blurred some of the content due to some sensitive information, in the above picture you can see the difference, so I have to achieve the similar out using JSLink, below is the JavaScript I used:
(function () { alert('starting') var fieldCtx = {}; fieldCtx.Templates = {}; fieldCtx.Templates.Fields = { "ApprovalColumn": //This is field name, make sure to enter the internal column name { "View": UpdateApprovalTempalte //Enter the function name } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldCtx); })(); var imgCompleted = "<img src='/siteassets/checked.png' width='16px'/>" var imgIncompleted = "<img src='/siteassets/uncheck.png' width='16px'/>" function UpdateApprovalTempalte(ctx) { var columnValue = ctx.CurrentItem.ApprovalColumn; // get the value of the ApprovalColumn field of the current item var returnValue = ""; if (columnValue == 'Complete') returnValue = imgCompleted; else if (columnValue == 'Not Started') returnValue = imgIncompleted; else if (columnValue == '') returnValue = imgIncompleted; else returnValue = columnValue; return returnValue; }
In above script I have used specific list fields to update, similary you can use the complete fieldCtx.Templates.Item to render all list items instead of fieldCtx.Templates.Fields.
Copy the script in a .js file and save it in Style Library or asset library and go to the list view page. To edit the page, click on the gear icon and click Edit page.
Now go to the list view web part properties.
Expand the miscellaneous tab and copy the file URL under JSLink.
Make sure to enter the correct file path, if you have saved it in current site then use ~site (Click here to get file path URL in SharePoint). It might not work if you have given full path. Also add some alert to make sure file is referenced properly.
The above is working on SharePoint 2013, SharePoint 2016 and SharePoint online. I will be sharing more samples on JSLink for list view also specific fields.
Leave a Reply
You must be logged in to post a comment.
2 replies on “Using JSLink as an alternative for Calculated columns”
Hello Adnan, excellent article keep up the ggod work. Have you happen to develop a way to increase the column title width on a view using JSlink?
Great article Adnan! Looking forward to future articles.