My scenario : I have a calculated column which need to show a specific image based on another choice column(Status:closed,open or active).

I have set the calculated column type as Number. I tried to use the following code,but it end up showing as plain text.The code below is the simplest html tag i am testing with,which is not working either.

="<DIV><a href='https://tenatname.sharepoint.com/sites/projectx/t/Lists/Project%20Status%20Reports/All%20Items.aspx'>Branding</a></DIV>"

2 Answers 2


Microsoft has disabled the use (or misuse) of the calculated column in SharePoint Online and SharePoint On-premise based on your current patch-level.

Some users have added HTML markup or script elements to calculated fields. This is an undocumented use of the feature, and we will block the execution of custom markup in calculated fields in SharePoint Online from June 13, 2017 onwards. The June 2017 Public Update (PU) and later PUs will make blocking a configurable option for on-premises use in SharePoint Server 2016 and SharePoint Server 2013.

We are changing calculated fields to block the execution of custom markup. This mean that calculated fields that contain any unsupported markup will not display correctly.

This change went into effect on June 13, 2017. Administrators can request an extension through September 10, 2017 at the latest. During this extension, execution of custom markup in calculated fields will not be blocked. This request can be submitted through Microsoft Support. However, beginning September 10, 2017, all unsupported markup will be ignored.

Handling HTML markup in SharePoint calculated fields

Use CSR instead. I also recommend using the google chrome plugin called Cisar to get you started.

I'm thinking that something like this might work for you:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function getBaseHtml(ctx) {
    return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);

  function init() {


      // OnPreRender: function(ctx) { },

     Templates: {
          Fields: {
              "Status": {
                  View: function(ctx) {
                      var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
                        switch (status) { 
                          case "Closed": 
                              return "<img src="icon.png" height="32" width="32">"; 
                          case "Open": 
                              return "<img src="icon.png" height="32" width="32">"; 
                        case "Active": 
                              return "<img src="icon.png" height="32" width="32">"; 

      // OnPostRender: function(ctx) { },

      ListTemplateType: 100


  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/SiteAssets/renderStatus.js"), init);


Customize a list view in SharePoint Add-ins using client-side rendering

Client-side rendering (JS Link) code samples

  • Any other alternative for my scenario. May 8, 2018 at 7:22
  • @KeshavTaurah, Updated. May 8, 2018 at 7:30
  • As mentioned by Chris CSR is the best option May 8, 2018 at 7:56

The following link give an alternative for 2013 and 2016 on prem. A web app setting has been added to allow HTML Rendering in Calculated Columns via PowerShell:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.