How to display images in a calculated column of a SharePoint list

  • Article

How to display an Image in a SharePoint List

Many times I 've been asked by customers about how to display an image in a calculated column of a SharePoint list.
One of the scenario I mention here where, customer wanted to display a Red or Green button based on another column's value.

SharePoint list : MyTasksList

Column 1:

Column Name : Completed

Column Type : Yes/No

 Requirement:

There is another column named “StatusIcon”, Customer wanted to display an image on this column based on value of column “Completed”. Below is the condition

If "Completed" =Yes, then Display a Green button

If "Completed" = No, then Display a Red button, as shown below in the picture

 

           
   
  
There are many blogs which explains how to achieve this, However nothing seemed to be working.

When adding the formula 

="<DIV><img
src='"&IF([Completed], "/_layouts/images/KPIDefault-0.GIF", "/_layouts/images/KPIDefault-2.GIF")&"'></DIV>"   

 in the calculated column SharePoint throws error or just displays the text in the column instead of the button image.

Cause:

 SharePoint do not honor the escape characters and displaying the html text as normal text and displays it.

How to fix it

1. Open the site in SharePoint Designer

2. Open the List view where you wanted to display Image ie in my case” AllItems.aspx”

3. Select the first item from the calculated column “StatusIcon”

4. Click on tag <xsl:value-of> Select Edit Tage>

            

5. Add the tag disable-output-escaping="yes" and save

            

 

That's it...Now you will see the Images in the column :)