Adding Color Columns to Sharepoint lists

by Vishal 2. November 2008 21:02

I was working on a project that used a sharepoint list with a column called "Urgency" that was a choice column with values "Low", "Medium", "High". The client wanted to show the co0lumn in the list view but instead of the text, show a corresponding color - Green for Low, Orange for medium and Red for High. Also I needed to have this configured without downtime or custom code.

I found a great post online here that helped me do exactly that using a calculated column and a content editor webpart, out of the box!

Steps:

  • Create a column in the list called "Urgency Level" for example. Its a choice column with values "(1) Low", "(2) Medium", "(3) High"
  • Create s column in the list called "Urgency" which will display the color. This is a calculated column. The formula for this column is

          =”<DIV style=’font-weight:bold; font-size:24px; color:”&CHOOSE(RIGHT(LEFT(Urgency Level,2),1),”red”,”orange”,”green”)&”;’>&bull;</DIV>”

  • Add a content editor web part to the bottom of the page and copy the below script into it.


<script type="text/javascript">
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length)
{
try
{
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded)
{
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD");
var j=0;
var TDContent = " ";
while (j < theTBODYTDs.length)
{
try
{
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

Thats it! Here was the result:

 

 Also, you would have realised that you can do a lot more than add just colors, you can add any html to be rendered including scripts, mouse overs, colors, images...

Tags: , ,

e-commerce | MOSS | Sharepoint