• Home
More

    SharePoint Online Calculated Column with HTML not working

    I had an interesting issue following the discontinued support of an old Calculated Column hack that has been supported as long as I can remember.

    You can see a reference to the hack from 2008 in Christophes’ blog Path To SharePoint.

    Microsoft released an article to explain the discontinued support of the hack (which you can read here) and whilst there are some links in this post, it doesn’t really provide much of an answer or explanation as to how to fix the specific issues, which i’ll attempt to do in this blog post.

    Firstly let’s take a look at an example of what the issue looks like without the fix.

    OK so you can clearly see that the HTML is being outputted instead of an image as specified using the font class.

    In order to solve this problem in SharePoint Online, we need to use the JSLink web part property and link to the file  ~site/SiteAssets/FILENAME.js

    I noticed that it would show up in inspector as “404 file not found” if I used the absolute URL, however, by using the ~site variable, the file would load fine.

    I would link to the file first and then add the code below

    In the following snippet of code you find the field in the page and then replace it with the link and title

    https://gist.github.com/Office365Geeks/26f1d76d5e7375986055d231e265763d

    The output then looks like this;

    There were a few issues I had along the way, the first was that the script file would be cached when I was editing it in SharePoint Designer, so I used  ~site/SiteAssets/render.js?ctag=XX where XX is an incremented number in order to force the browser to refresh it, I noticed SharePoint Online was doing this so I just tried it too and it seemed to work.

    Secondly, I also wanted to change two fields in my web part to an image so I copied the function and added the extra code required

    https://gist.github.com/Office365Geeks/d340c33c97ae6f8c916e7d327634240c

    Sure I could’ve simplified the above to make a call to the function twice including some clever variables, but hey, who cares, it did the job, if anyone wants to simplify it then be my guest, if I get time (which I won’t) I may fix it but for now it works, google did it’s job and everyone is a winner.

    Enjoy

    Matthew Hughes

    Recent Articles

    Hands on: Beats PowerBeats Pro review

    In May, Uber launched a new experiment: selling train and bus tickets through its app for its customers in Denver, Colorado. Today, the company...

    New standalone app for macOS to be Like iTunes

    In May, Uber launched a new experiment: selling train and bus tickets through its app for its customers in Denver, Colorado. Today, the company...

    NASA spacecraft to collide a small moonlet in 2022

    In May, Uber launched a new experiment: selling train and bus tickets through its app for its customers in Denver, Colorado. Today, the company...

    The Google Nest Hub Max soups up the smart display

    In May, Uber launched a new experiment: selling train and bus tickets through its app for its customers in Denver, Colorado. Today, the company...

    Foldable iPhone 2020 release date rumours & patents

    In May, Uber launched a new experiment: selling train and bus tickets through its app for its customers in Denver, Colorado. Today, the company...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox