Sharepoint 2013 calculated field as hyperlink renders as text

Question

I have a column in Sharepoint 2013 and set the type to 'Calculated'. I have set the data return type to integer (pic attached) so that the field is hyperlink.

All worked fine for over a year in all environments (dev and production) and browsers (chrome, firefox, IE) until recently when users reportted the hyperlink was not clickable anymore and displayed as text (pic attached). Inspecting the element, reveals the value of is treated as text.

I have spent some time simplifying the formula, removing fields and having a simple element to navigate to google, but have not found a solution. I suspect there may been a Sharepoint update which handles the formula differently creating text inside the element surrounding it with double quotes.

Answer 1

After research I have found the cause and the solution to my problem.

Cause

SharePoint update removed the ability of calculated fields to be set us markups and is explained in Handling HTML markup in SharePoint calculated fields.

Solution

I have found a solution with JSLink. After opening link above, there are some examples using JSLink. With a bit of play-around, I managed to achieve having the calculated field as a hyperlink. The steps are simple.

1. Create a js file with code - in my case I create a hyperlink which posts to another list with values from current item.

2. Copy link location of js file.

3. Reference js file on web part on view, under section Miscellaneous.

4. Voila!

Note: in the script, the field name must be the internal field name, that slowed me down quite a bit. to get the internal field name, open list settings, hover over desired field and on the bottom left of your browser you get the internal field name (Field=Internal field name here).

JSExample can be found here.

Another helpful read here.