Add Traffic Light indicators to a Yes/No column in a custom SharePoint list

I needed to create a list which would show a Yes/No column as traffic lights. Since SharePoint already has the necessary images from KPI lists I decided to use them.

Unfortunately, this isn’t an option OOTB so I decided to generate the URL to the KPI gifs using a calculated column. The name of the Yes/No column was “Approved” so I created the following calculated column:

="<div><img src='/_layouts/images/KPIDefault-"&IF([Approved]=TRUE,0,2)&".gif'/></div>"

For those of you using various regional versions of SharePoint, be careful with the commas after “TRUE”. You might need to change them to semi-colons.

 

The problem with the result from the above calculated column is that it is simply displayed as text. While trying to get it to display as an image, I stumbled across this site, and in particular a script which does exactly that. The script can be downloaded from here. I have added it below for the sake of simplicity.

This script needs to be added to the bottom of the page using the Content Editor WebPart (add it by using the source editor not the Rich Text editor).

 

<script type="text/javascript">
/*
Text to HTML Lite - version 2.1.1
Questions and comments: Christophe@PathToSharePoint.com
*/

function TextToHTML(NodeSet, HTMLregexp) {
var CellContent = "";
var i=0;
while (i < NodeSet.length){
try {
CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}
}
catch(err){}
i=i+1;
}
}

// Calendar views
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);

// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);

</script>