Search This Blog

Tuesday, January 31, 2012

Color Coding for SharePoint Tasks Lists

In this post I will tell about how to give the color code to the tasks list which can be very attractive in knowing the status of the tasks.


  • Create a task list , in this example I have taken the default task list. 

  • Now create a column by the name "Color" and select the column type as "Calculated" and enter the following logic in the formula column and click Ok.
         =IF(OR(Status="Not Started",Status="Deferred"),"Yellow",IF(OR(Status="In  
        Progress",Status="Complete"),"Green",IF(Status="Waiting on Someone Else","Red")))



  • Now in the similar fashion create a new column by the name "Color Status", choosing column type as the "Calculated" and entering the logic in the formula section as given below.
          <DIV style='font-weight:bold; font-size:24px; color:Yellow;'>•</DIV>
  • Now your list will look like something like this:
  • Now create a text file and add the following code in that:
                <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>
  • Upload the text file on the sharepoint site (say in the shared document library)
  • Now add the task list webpart on the page you want to display.
  • Edit the webpart and select the columns that are of use.
  • Now add the content editor webpart right below the task list webpart (otherwise it will not work).
  • Edit the webpart and change the content link to the link where the text file was uploaded.(as i have uploaded in the shared document library)
  • Set the content editor webpart to be hidden and  chrome type to be none.
  • Now save the page and the list will look something like this.

Happy Coding..!!!

1 comment:

  1. For Color Status, choosing column type as the use color:"&Color&" instead of yellow in above div tag

    ReplyDelete