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.

List View Calculated Columns

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:

List View JSLink

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.

SharePoint Edit Page

Now go to the list view web part properties.

SharedPoint Edit Web part

Expand the miscellaneous tab and copy the file URL under JSLink.

SharePoint 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.

Adnan, a distinguished professional, boasts an impressive track record as a Microsoft MVP, having achieved this prestigious recognition for the eighth consecutive year since 2015. With an extensive career spanning over 18 years, Adnan has honed his expertise in various domains, notably excelling in SharePoint, Microsoft 365, Microsoft Teams, the .Net Platform, and Microsoft BI. Presently, he holds the esteemed position of Senior Microsoft Consultant at Olive + Goose. Notably, Adnan served as the MCT Regional Lead for the Pakistan Chapter from 2012 to 2017, showcasing his leadership and commitment to fostering growth within the tech community. His journey in the realm of SharePoint spans 14 years, during which he has undertaken diverse projects involving both intranet and internet solutions for both private and government sectors. His impact has transcended geographical boundaries, leaving a mark on projects in the United States and the Gulf region, often collaborating with Fortune 500 companies. Beyond his roles, Adnan is a dedicated educator, sharing his insights and knowledge as a trainer. He also passionately advocates for technology, frequently engaging with the community through speaking engagements in various forums. His multifaceted contributions exemplify his dedication to the tech field and his role in driving its evolution.

Leave a Reply

2 replies on “Using JSLink as an alternative for Calculated columns”

  • August 29, 2017 at 10:01 pm

    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?

  • Robert Kocher
    September 5, 2017 at 12:17 am

    Great article Adnan! Looking forward to future articles.