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.
Source: http://sharepoint2010tutor.blogspot.in/2011/12/progress-bar-for-tasks-list-in.html
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.
Source: http://sharepoint2010tutor.blogspot.in/2011/12/progress-bar-for-tasks-list-in.html
Comments