Tuesday, May 12, 2015

Traffic lights on the SharePoint calculated column

Lets say we have a calculated column "Status" in a SharePoint list with the formula.

=IF([Available Budget]>0,"/_layouts/images/completed_green.gif",IF([Available Budget]=[Original Budget],"/_layouts/images/yellow.gig",IF([Available Budget]<0,"/_layouts/images/red.gif","/_layouts/images/blue.gif")))

"Available Budget" being a numeric column.

and would like to display the images (traffic lights) on the list view. The javascript snippet in a CEWP can achieve this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
  var id = $("TD:.ms-vb2");
  for(i=0 ; i<id.length ; i++){
    if(id[i].innerHTML.indexOf('red.gif') > 0 || id[i].innerHTML.indexOf('yellow.gif') > 0 || id[i].innerHTML.indexOf('completed_green.gif') > 0){
      //alert(id[i].innerHTML);
      id[i].innerHTML = "<img src='"+id[i].innerHTML+"'/>";
      //return;
    }
  }
});
</script> 

No comments: