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