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..!!!