Tuesday, May 11, 2010

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>

4 comments:

  1. http://diggtraffic.net
    Traffic Is The Key To Success Online! Start the traffic tsunami right NOW. Don't Use Adwords, SEO, Article Writing, Media Buys, Blogging, Classified Ads, Social Bookmarking, Social Networking, Link Building, Joint Venture Partners, eMail Drops, Adswaps Or Any Of The 'Traditional' Traffic Generating Techniques Everyone Is Talking About!
    http://diggtraffic.net
    And Once You Download This System You'll Begin To Generate A Motherload of Targeted Traffic With An Endless Rush Of Cash-Paying Customers Almost IMMEDIATELY! A step by step traffic getting system where you can understand it in the most simplest format, apply it effortlessly and cash in massively...http://diggtraffic.net
    Step System To Drive Millions Of Visitors To Your Site Or Affiliate Site!
    Click here to get started NOW...
    http://diggtraffic.net

    ReplyDelete
  2. Would you please specify whether you are using SharePoint 2007 or 2010

    ReplyDelete