Wednesday, December 21, 2011

Progress Bar for Tasks List in SharePoint 2010


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:


Progress Bar 1 :


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


Progress Bar 2 :


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


Progress Bar 3:



="<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, 

14 comments:

  1. I added the script in the HTML Form Web Part, but it is still only showing the html code instead of the actual progress bar. :(

    ReplyDelete
  2. Me too, i can only see the code!

    ReplyDelete
  3. Hi all,

    Create columns(Multiple lines of text) for progress bar and add the script to it..

    ReplyDelete
  4. Check this video:
    http://www.youtube.com/watch?v=--3YxzkP-NQ

    ReplyDelete
    Replies
    1. its a help ful ...thanks a lot for sharing this link...

      Delete
  5. progress bar 3 does not show the progress as expected but remains at 0. progress bar 2 works perfectly.
    any idea what i could be doing wrong with version 3

    ReplyDelete
    Replies
    1. Progress bar 3 is controlled by not only the percentage completed but the status itself as well

      Delete
  6. I see the bar in the standard view but not the Datasheet view.

    ReplyDelete
    Replies
    1. Datasheet view do not support this.

      Delete
  7. My progress bar is running from right to left instead of left to right so it looks like progress would be 60% when it should be 40%. How do I fix this?

    ReplyDelete
  8. I was trying to implement this on our Sharepoint, unfortunately it does not work.

    I guess the "jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";" is not available anymore.

    Does anyone have any suggestions so I can still make this work?

    Many thanks,

    Bob

    ReplyDelete
    Replies
    1. I would rather suggest you to download the jquery from http://jquery.com/ and use it

      Delete
  9. I am having the same issue as Samantha Sparks (July 24, 2013, post) where the progress bar is right justified instead of left justified. Any response?

    ReplyDelete