SharePoint 2007: Priority/Progress Bar using color coding within a SharePoint List

Posted at September 28, 2011 // CSS, Windows

This article was inspired by these two articles Apply color coding to your SharePoint lists and Status/Progress Bar. the final calculated column is a priority/progress bar that uses the default Priority options within a task list in combination with the [% complete] column to finally give you something like this:

As you may have notice, I have a task that is flagged as “Complete”, however, because I forgot to update my percentage from 75% to 100% SharePoint will, by default, list that in the [% complete] column, while with my solution, this has been taken care of, the percentage is displayed correctly at a “100%”. The same thing apply if you listed a task as “Not Started” but provided a percentage greater than “0%”. all you have to do now is hide the [% complete] column. The advantage of this solution is that you have your progress bar and priority color coding combined within the same column just like you would have in a Gantt view.

This customization was entirely done through the SharePoint WSS UI and here is how:

The method:
Again, I’m using the same technique found here using calculated columns to write HTML.

The formulas:
You will have to create a new calculated column and add this formula:

="<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 that you can further customize this solution using images instead of background colors by changing the css in the formula. I hope you find this useful.