September 21, 2012

Add Indicators to Custom List

I spent some time trying to figure out how to add an indicator to a custom list in SharePoint.  I finally cam across this: http://sytrea.blogspot.com/... who references another blog (http://blog.pathtosharepoint.com/).

It's quite helpful so I don't want to lose it and have included it here.  The example he provided I've copied here and uses a Yes/No column, a calculated column, and some java script in a content editor window.

  1. Create the Yes/No column and name it "Approved".
  2. Create a calculated column and enter this as the calculation:      ="<div> <img src='/_layouts/images/KPIDefault-"&IF([Approved]=TRUE,0,2)&".gif'/></div>"
  3. On the page where you want the images displayed add a Content Editor web part and include this as the source code:
<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>

From here changes can be made to fit the current needs... the images, column, etc...