Progress Bar for Tasks List in SharePoint 2010

Now we are going to see how to show the progress of tasks in SharePoint

We are going achieve this with the help of Calculated Columns.

The [% Complete] is a default column in tasks lists. We just need to add – in a calculated column - the formulas for this specific use case. Here they are:

- Progress1:

=”<DIV style=’background-color:blue; width:”&([% Complete]*100)&”%;’>&nbsp;</DIV>”

- Progress2:
=”<DIV style=’background-color:red;’><DIV style=’background-color:LimeGreen; width:”&([% Complete]*100)&”%;’>&nbsp;</DIV></DIV>”

- Progress3:
="<DIV style=’position:relative;padding-top:2px;
border:1px solid Gainsboro; background-color: "
&CHOOSE(RIGHT(LEFT(Priority,2),1), "LightSalmon", "LemonChiffon", "Chartreuse")&";’>
<DIV style=’margin:0;padding:0;font-size:0px;border-top:12px solid "
&CHOOSE(RIGHT(LEFT(Priority,2),1),"Crimson","orange","green")&"; width:"
&IF(Status="Not Started","1%",
IF(Status="Completed","100%",TEXT([% Complete],"0%")))&";’></DIV>
<DIV style=’position:absolute; top:2px;left:2px;’>"
&IF(Status="Not Started","0%",IF(Status="Completed","100%",TEXT([% Complete],"0%")))&"
</DIV></DIV>"

Note: the &nbsp; character is mandatory to make this work in Firefox.

Once you have done this, your tasks list looks like this

To achieve our expected result, we have to do one more thing

Add a HTML Form Web Part and enter the below script

Script:

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>


<script type="text/javascript">


$(document).ready(function(){
$(".ms-vb2:contains('<DIV')").each(function(){
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);


});
});
</script>


Now your SharePoint List look like

Cool...........


It works now,  you can do many more things using jQuery and Calculated column.


If you are looking for other colors, here is a very good reference:
http://www.w3schools.com/html/html_colornames.asp



do let us know your experience with this post.
Cheers,