HTML Calculated Column + Client-Side Rendering

Five years after the first release, the HTML Calculated Column remains the most popular topic on this blog.

The original page has been visited more than 200,000 times. It is definitely outdated, and in recent years I have pushed several new variations of this technique. The most popular is the color coding solution posted in the SharePoint User Toolkit, backed by this tutorial.

The most frequent issue reported by users has been the upgrade from SharePoint 2007 to SharePoint 2010. This is actually all taken care of in the above links… but you need to read the fine print.

I plan to rewrite the instructions, especially as in the meantime Microsoft has pushed another version of SharePoint, and the SP 2010 update… doesn’t work with SP 2013! Well, there’s actually a simple fix for SP 2013, and “Panoone” posted it as a comment a couple days ago (@Panoone: thanks again! And let’s get in touch to discuss this further).

But that’s not all. SP 2013 brings a bunch of new client side technologies, and one of them works very well in our case: Client-Side Rendering.

What is Client-Side Rendering?

JSLinkEditYou can use Client-Side Rendering (CSR) in SharePoint to manipulate the rendering process of list views. Does this sound familiar? That’s exactly what my HTML Calculated Column has been doing for years! Except that now it is an official component integrated with list views. When you edit a Web Part, the very last option is the JS Link placeholder (see screenshot).

It will certainly take several weeks before I find time to update the SharePoint User Toolkit, so for those of you who are already familiar with both CSR and the HTML Calculated Column, let me share the code for SP 2013.

In the code, Calculated is the name of the calculated column.

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

So easy, just 200 characters! STSHtmlDecode() is a JavaScript function provided by SharePoint that allows the conversion of the html string.

Of course, you could avoid using a calculated column, and build the html directly in the JS Link file. But then each rendering would require a different file. The beauty of the HTML Calculated Column is that one single JS Link file can support all the views in your site.

A warning!

Some time ago, I wrote about security risks when you use the HTML Calculated Column. As far as I can tell, the same warning applies to Client-Side Rendering. Handle with care!

CSR references

When Microsoft released SharePoint 2013, the documentation on Client-Side Rendering was quite poor. Fortunately SharePoint bloggers stepped in and you can find some nice posts to get familiar with CSR. Wes Preston’s blog is an excellent start.

So is the old way dead in SharePoint 2013?

Not quite yet! Not every view accepts Client-Side Rendering, and for example you’ll still find my tutorial helpful for calendar views.

Advertisements

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

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

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

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

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