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)&”%;’> </DIV>”
Progress Bar 2 :
=”<DIV style=’background-color:red;’><DIV style=’background-color:LimeGreen; width:”&([% Complete]*100)&”%;’> </DIV></DIV>”
Progress Bar 3:
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,
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)&”%;’> </DIV>”
Progress Bar 2 :
=”<DIV style=’background-color:red;’><DIV style=’background-color:LimeGreen; width:”&([% Complete]*100)&”%;’> </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 character is mandatory to make this work in Firefox.
Once you have done this, your tasks list looks like this
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,
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. :(
ReplyDeleteMe too, i can only see the code!
ReplyDeleteHi all,
ReplyDeleteCreate columns(Multiple lines of text) for progress bar and add the script to it..
Check this video:
ReplyDeletehttp://www.youtube.com/watch?v=--3YxzkP-NQ
its a help ful ...thanks a lot for sharing this link...
Deleteprogress bar 3 does not show the progress as expected but remains at 0. progress bar 2 works perfectly.
ReplyDeleteany idea what i could be doing wrong with version 3
Progress bar 3 is controlled by not only the percentage completed but the status itself as well
DeleteI see the bar in the standard view but not the Datasheet view.
ReplyDeleteDatasheet view do not support this.
DeleteMy 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?
ReplyDeleteI was trying to implement this on our Sharepoint, unfortunately it does not work.
ReplyDeleteI 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
I would rather suggest you to download the jquery from http://jquery.com/ and use it
Deletefinally a solution that works! thx
ReplyDeleteI 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