23 thoughts on “HTML Calculated Column + Client-Side Rendering”

1. Hi Christophe,

   Very useful post. I had managed to implement CSR on a list in 2013 based on the information in Wes’s blog (for those not familiar with implementing 2013 CSR it is a ‘must’ read) but prefer your solution and have worked out how to extended it to multiple Calculated Columns in a list by repeating the code line within ‘Fields {‘ for different column names and including a comma after each line.

   I use HTML Calculated Columns extensively in our current MOSS2007 environment and as we are due to migrate to 2013 late this year was in need of a solution to enable the columns to continue to work.

   Regards,

   David

2. Hi Christophe,

   This is a great post, as it addresses precisely the issue I am having with SharePoint 2013, however I must not be doing something correct as I have not yet gotten this JS to work.

   I have a calculated column, that is showing the html code as plain-text — something that in the past SharePoint versions, but quickly be remedied by your TextToHTML script. However, now I am trying to implement the JS file via CSR to achieve the same effect with no progress.

   In your example, your column is labeled “Calculated”, if my column was named something different, at which parts of the code do I replace “Calculated” with my columns name (other than the bit in ” “)?

   Do I also change the column name in the (ctx.CurrentItem.Calculated) part?

   I apologize if this is an ignorant question. I feel the solution is simple but no matter what I try the coulmn is still being displayed as plaintext.

   Thank you.

   Chris

   • Chris, you need to change the name in both places. “Calculated” is a reference to the view, ctx.CurrentItem.Calculated is a reference to the value (in your case the html string).

     • Thank you x1000.

     • Unfortunately, I still cannot get it to work. Can you see what I am doing wrong? In this instance, the View is called “ALLIED WITH”, and the Calculated Column is also titled “ALLIED WITH”. My intention is to show the image of the faction of whom which the current faction is allied with (this is a community website for a popular RTS PC game.)

       What I am seeing when viewing the webpart is this:

       The code, displayed as text.

       I created a .js and uploaded it to the website, and pasted the url of the .js in the “JS link” bar.

       The code in the .js is this:

       var ccContext = {
         Templates: {
           Fields: {
             “ALLIED WITH”: {“View”: “”}
           }
         }
       };
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ccContext);

       When applied, the result is the same as if the .js was not even there. the code displayed as text.

       Any tips?

       • I see. You are not making it simple because you used a special character (a space) in your column name. SharePoint will automatically convert this special character for internal use. If you are not familiar with internal names, I’d recommend that you use a name without space.

         As I said in the article, the current sample code is intended for users who are already familiar with such techniques.

3. Just to clarify, in my last post, the code did not show up properly. I was under the impression these comments would read as plaintext.

4. Hi Christopher,
   I added the snippet you posted above to a CEWP by making reference to this .js file on the Content Editor Link. However, I am not sure about the HTML Code that I should add, since the list calendar view shows the HTML code not the color… Could you please help me out? Sorry to bother you with this, but I have attempted several things to no avail… 😦 Thanks so much for your help!

   • Mima, the snippet above is about Client Side Rendering, it is not supposed to be used with a CEWP (see the screenshots for details). And it won’t work for calendars, as mentioned in the post.

5. Hello, I just wanted to add, that if you want the code to work on a display form (DispForm.aspx), just change “View” to “DisplayForm”. For example:

   var ccContext = {
     Templates: {
       Fields: {
         "Documents": {"DisplayForm": "<#=STSHtmlDecode(ctx.CurrentItem.Documents)#>"},
         "Links": {"DisplayForm": "<#=STSHtmlDecode(ctx.CurrentItem.Links)#>"},
         "Meetings": {"DisplayForm": "<#=STSHtmlDecode(ctx.CurrentItem.Meetings)#>"},
         "Tracking": {"DisplayForm": "<#=STSHtmlDecode(ctx.CurrentItem.Tracking)#>"}
       }
     }
   };
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ccContext);
   

   • Hi Chris,
     Not sure what’s wrong with my list. but this is not working for me. I have a calculated column (URL2) with formula as

     ="<a href=#link1>Link1</a><br><a href=#link2>Link2</a>"
     

     and created a js like below

     var ccContext = {
       Templates: {
         Fields: {
           "URL2": {"DisplayForm": "<#=STSHtmlDecode(ctx.CurrentItem.URL2)#>"}
         }
       }
     };
     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ccContext);
     

     js saved under ~sitecollection/SiteAssets/

     I am on sharepoint 2013

     • Girish, the code looks fine. If the “Minimal Download Strategy” is activated on your site, try to deactivate it, or you might need some more code to address it.

6. I’ve noticed that once JS Link is applied to a list view, the view style goes to “Default” no matter what it is set to in the view’s settings (e.g. Shaded). Also, the mouseover row highlighting stops working. Have you noticed this as well? Do you know of a way to prevent this?

   • Thanks for sharing your findings Alison, your comments are very useful. I haven’t yet tried to use CSR with custom views, but the behavior you are reporting doesn’t really surprise me. I’ll try as soon as I get a chance.

7. Hi Christope,

   I’ve found that the “old” TextToHTML file that was used for the calculated columns works amazing in SP 2013 to convert HTML returned in a Content Query Web Part. I was searching for days for a way to do it without editing the XSL file. In one of the many Google searches this blog came up and I had the idea to try out the “old” method and low and behold it works!!!

   I am wondering though, as I’m not very good with Javascript, is there a way that it can be written to eliminate the HTML rather than just rendering it?

   Thanks for once again solving what seemed like an impossible problem with your fantastic work.

8. Pingback: Using Client-side Rendering to color-code list cells in SharePoint 2013 | On Point

9. Thought I’d mention that, in SharePoint 2013 through Office365, I managed to do this simply by changing the output type of the calculated column from ‘text’ to ‘number’. Admittedly my code is just to generate a link, but it renders perfectly.

   • You are correct. This has been mentioned a couple times in this blog, but I don’t recommend it as it is obviously a loophole and should be fixed in the future.

10. You could just change the calculated column to display as a number…not sure why it works, but it DOES!!

    • Right, this is mentioned in a couple other posts on my blog. As you said, we don’t know why it works… and it shouldn’t! Hopefully Microsoft will fix this security loophole soon.

11. Will the js render if it is a infopath form webpart.. because in the list view the text is looking fine.. but if you open the item(dispform.aspx) all the tags are visible..

    Any help..

    • No matter what it looks like in the view, the content of the calculated field itself is still html code. On dispform, you’ll also need to use JSLink or another technique to render it properly.

12. In 2013 – I’m running into a weird situation my colors render for the Owners group, but shows code for everyone else; this even happens when the other groups have full permission. We haven’t ran into any problems with 2007 but when we migrated, this became an issue. Has anyone else run into this?

Comments are closed.