Write html code in SharePoint via Calculated Columns

UPDATE: Find the 2010 version here !!

Struggling to find a good way to display a url in a list (output generated by the codeplex listsearch project), I found this solution from PathToSharePoint.

Normally, when you use a calculated column to create a dynamic link, you get the full url, like “http://www.test.com?id=9876”, when you want the link to just say ”customer 9876” or something.

 

What you can do is create the full html in the calculated field, which looks like this:

<div><a href=”http://www.test.com?id=&ID”>&Title</a></div>

This will also be displayed in your list.

2

So, how can we make this url to look the ”customer 9876” we really want ?

Simple: add a Content Editor WebPart on the page, and add following script:

 

<script type=”text/javascript”>
var theTDs = document.getElementsByTagName(“TD”);
var i=0;
var TDContent = ” “;
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf(“<DIV”) == 0) && (TDContent.indexOf(“</DIV>”) >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById(“tbod”+groupName+”_”);
var wrapDiv=document.createElement(“DIV”);
wrapDiv.innerHTML=”<TABLE><TBODY id=\”tbod”+ groupName+”_\” isLoaded=\””+isLoaded+ “\”>”+htmlToRender+”</TBODY></TABLE>”;
var theTBODYTDs = wrapDiv.getElementsByTagName(“TD”); var j=0; var TDContent = ” “;
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf(“<DIV”) == 0) && (TDContent.indexOf(“</DIV>”) >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

This scripts lets the html that is on the page (and not parsed by the server) to be parsed client-side

Just add the script   to the source editor of the CEWP and refresh the page, your code will now look like the real deal!!!

1

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


16 thoughts on “Write html code in SharePoint via Calculated Columns”

  1. I encounter an issue here, if the user has only read access to the page the column value shows up as the HTML tag and not the desired format.
    please help

    regards,

    Swami

  2. hmm, good question, i dont have that issue right here..

    Maybe you can alter the read rights to include some permission to execute code on the page ?

  3. Can you post the contents of your calculated field? I'm trying to make a link to another list (the user provides the FDS ID). This is what mine looks like:

    =CONCATENATE("<_DIV><_a href='http://intranetsite/sites/AnotherSite/AnotherList/DispForm.aspx?ID=&quot;,[FDS ID],"'>",[FDS ID],"<_/a>_/DIV>")

    Is this the best way to do this? Also, I'm not getting any rendering of the HTML even though I've added the <_script><_/script> from the other blogs. If nothing else, I'll just do the URL, but I'll need to add a condition to check if [FDS ID] isn't empty. Thanks!

  4. It is best that you copy the original code from the url on top. That should make things work.
    Also make sure your javascript in under the list you wish to apply the code on!!

  5. Thanks for the script.
    Does this also work in SharePoint 2010? It seems not to work in SP 2010.

  6. It is exactly what Im looking for, however, it does not work. I try already for hours. If you enter &Title into the formula field it says "The formula contains a syntax error or is not supported"

  7. I have not looked into it but would it be possible to inherit from the calculated field but just not escape the output… actually make a HTML calculated field?

  8. Hi,

    I have tried in this way. I have added 2 column in discussion board.
    First column name i have given was color and selected the data type Calculated column.
    In Formula I have provided below values.
    =IF(OR(Status=”Not Started”,Status=”Deferred”),”Yellow”,IF(OR(Status=”In Progress”,Status=”Complete”),”Green”,IF(Status=”Waiting on Someone Else”,”Red”)))

    2nd column called Indicator of the data type Calculated column. In formula field I have entered =”•”

    I have also added a Content editor web part andgiven link to the indicator1.js file which was saved in document library.
    The indicator1.js file hols the above mentioned script.
    Unfortunately I can still see the HTML code still.
    Please advice.

    1. Did you try it with the link on top of my post? That points to an improved version of the script.

Leave a Reply

%d bloggers like this: