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

Comments (1) -

D
D
6/18/2010 3:50:21 AM #

I tried using this, but unfortunatley I am not having the Bullet seen with color. Please let me know what should I do. I am not sure if I am using the correct images location

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


Repliques Montres haute qualite vous aider a economiser beaucoup tout en appreciant la valeur du nom de marque. Vous voulez avoir cette montre luxe haut de gamme suisses sur votre main, mais replica uhren l'achat d'une voiture semble une meilleure option. Oui, c'est la realite. Ces montres symbole de statut social co?tent quelque chose replicas de relojes qui est au-dela pour permettre pour une personne normale. Mais ne desesperez hublot replique montres pas si vous ne pouvez pas vous permettre d'acheter ces montres de luxe. Vous avez une belle occasion d'acheter des montres de prestige nom Replique de la marque. Certaines personnes aiment l'aspect d'un veritable montres au poignet, ou replique rolex montres voulez juste nombreuses montres de marque pour correspondre a leur habillement, mais evitez patek philippe replica orologi de depenser des milliers de dollars que une vraie montre mai cots, ils se tournent vers les replique montre montres bonne replique. Si vous ne voulez pas acheter des montres de veritables montres de haute qualite puis de replicas sont votre choix ideal.