How to display status icons in a SharePoint list
I needed to display a KPI indicator icon in one of my SharePoint list columns. To display status icons in SharePoint lists in my case, I needed to show a Red/Yellow/Green status symbol. I couldn’t find a setting in SharePoint that made this easy as I had done in Excel and Project before. But then a colleague showed me a little trick that scratched the itch just fine.
The setup
You’ll need to have a field that carries a value that the user can set. In my case, I created a field called “Status” and made it a drop-down select list with the values “Red”, “Yellow”, and “Green”.
Next, I created a calculated field I called “Status Indicator”.
The code
I used the following formula that will return HTML back to the client.
[codeblock name=”HTML-Icon”]The trick
Now here’s the trick. You need to identified the data type returned from this formula in SharePoint as a Number and NOT as Single Line of text. Just change this selection in the drop-down menu that is available.
This prevents SharePoint from escaping all of the HTML and instead in-lines the HTML back to the client. Voila. Oh, and I should mention that you will need to have the images you want to use uploaded somewhere so you can reference them in your HTML snippet from above. Using this method, you can extend this to perform all sorts of customizations within your SharePoint lists. Using this to display status icons in a SharePoint list is just one of them. Finally, this method to display status icons in a SharePoint list works for SharePoint 2007, 2010, and 2013.
If anybody has another cool customization just drop a note below.
And there you go.
Here are some related posts:
Show the most recent comment from SharePoint text fields instead of “view items”
SharePoint List Management Tip: Sharing Management of Choices
Send email when specific field changes in SharePoint
How to Erase or Blank a Text Field with a Workflow in SharePoint Designer
Editing Text in a SharePoint List View or Data View
How do you format as a number and get this formula in?
When you create a calculated field there is a section that lets yiu indicate what formatting to apply. At least in the web view there is. If you are using Designer to add the field I’m not sure off the top of my head. Are you using Designer?
Smart!
Thanks so much!!!!
THANK YOU FOR THIS!! It saved me a lot of time and heartache.
Thanks a lot. This was simple and it works!
Thank you for this post. I have a query regarding the alignment of the status indicator. The “center” tag is not working as expected. I have tried using middle tag and align=’middle’ property for image but still it’s not working. Can you suggest if there is a workaround for aligning the image?
Hi, instead of
. HTH
Well, it appears tags can’t be entered here. So here’s a modified answer.
Try:
|div sytle=”text-align:center”| …. |/div|
Thank you Charlie. I have added DIV tag with align=’center’ and I have added align=’middle’ to the IMG tag and the alignment issue is fixed.
Super thanks man !!!
Is it possible for this to be used in DispForm.aspx? When I use it there, the code is shown instead of the image 🙁
Thanks again!
On the forms, I would set up a drop-down selection field and have the values of “red”, “yellow”, “green” as options. The TEXT options are what people using the form would see. It is when you go to construct a list view or some sort of dashboard to set the formula up in the calculated field you show instead. I don’t know of a way to make the graphic show up on the form off the top off my head.
nice solution! Thanks for sharing.
How can add imgae hover over text to this code?
Just add an alt text attribute. For example, alt=’Green’, within the![]()
tag.
I can’t get the images to display. Is there a specific size that the images should be? or a way to reference them?
Having trouble with calculated column script, on one SharePoint site collection it works fine, on another I get for the image. Is there a fix or work around for this.
Unable to get the icons image to display in SharePoint list/WP. I have the HTML code in the calculated column which is set to a numeric data type (with 0 decimals). Instead of getting the icon display, the correct code gets displayed. The calculation works since it displays the correct code based on the numeric calculation but the display of the icon image does not. I have played with the path (absolute and relative) location and I have the icons images in the site collection assets library (root site).
Testing another approach, I have injected JS via CEWP and it displays the icons images, but not with HTML embedded code in a Calculated list column.
Reading this blog, it should work but it does not in SharePoint 2013 for me. I noticed other blogs talk about having a DIV rapper code injected via a CEWP in addition to the DIV embedded in the Calculated Column (numeric data type).
Let me know your thoughts, your feedback is appreciated.
I’ve had this working a treat in a SharePoint Online environment for months, displaying a relative ‘team icon’ to news articles on our Company Intranet homepage.
Today however, only the code is displayed.
No manual changes made and can only guess that the O365 tenancy is changing behind the scenes as Microsoft develops the platform. Keen to know if others have experienced the same?
I had noticed this happen on a separate test site we have, but put that down to internal tinkering.
Its not working In SPO.So can you please help me to complete this in SPO.