Humans are visual by nature so creating a graphic icon for a list of items or tasks can be extremely beneficial when trying to sort through data. Without having to configure SharePoint Designer or writing custom code, you can create a simple color coded icon that will enhance your list tremendously in just a few minutes.
Step 1- Create a “Color” column in your list. This column can either be calculated using other data with in the list or selected manually on creation.
Example:
=IF(OR(Status="Not Started",Status="Deferred"),"Yellow",IF(OR(Status="In Progress",Status="Complete"),"Green",IF(Status="Waiting on Someone Else","Red")))
· Tip - For a list of available colors, click
here.
Step 2- Create a “Status” column that is a calculated value. The output is a single line of text. Copy and paste this into the calculated field:
="<DIV style='font-weight:bold; font-size:24px; color:"&Color&";'>•</DIV>"
Step 3- Add the list to your web part or wiki page
Step 4- Edit the web part to show the Status column
Step 5 – Add a Content Editor Web Part directly underneath the List/Task Web Part
Step 6- In 2010, you will need to load the below code to a location on your site in a text file and point the content editor to the location. In 2007, you can copy and paste the below code into the content editor settings box itself.
You have now completed you color coded list! If you want to learn more about color coding lists and other ways SharePoint can benefit your business, please contact me at
Anjali.Bharadwa@dmcinfo.com.
<script type="text/javascript">
//
// Text to HTML
//
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>