B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > B l o g P o i n t > Posts > Calculated Column - HTML - The Progress Bar
Calculated Column - HTML - The Progress Bar
This is one of the best finds for SP that I have come across. Part of it has to do with I am implementing several project management sites for the company. One has to do with the Product to Market process and the others have to do with PMO. The development of these sites needed to communicate progress in an easy way.

I looked at using KPI's, but I was not impressed with what I could do with them. They to me did not make it easy to tell the story of how the project was progressing. Most people used to progress bars and so I went searching for a way to do this with SP. I looked far and wide and it was looking like I would need to purchase a third party tool. Did not like the prospect of having to convince upper managment of the tool or to have to convince IT to install a thrid party tool, they are not keen on doing this.

Then I found the site Path to SharePoint. Christophe provided a solution that cost nothing and required no installation from IT. The solution used the caclualted column to do html and you could base it on caculations from any field. It was this post that got me all excited about what could be done. A progress bar for your tasks list. I then played around with it and developed a solution that met the needs of my users.



In the interest of sharing, Peter Allen from California has sent me his own implementation of the progress bar for task lists.
I’d be surprised that his example exactly fits your needs, but the purpose here is to show that the method can be pushed far beyond the basic examples I used in my tutorial.
Peter takes into account three fields to build the progress bar: process status (choice), progress (choice) and % complete. Here is the formula:

="<DIV style='background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",([% Complete]*100),100)&"%;'></DIV></DIV>"


The legend at the bottom is plain HTML inserted in a separate Content Editor Web Part:

<SPAN class=style7><STRONG>Legend</STRONG></SPAN><SPAN class=style6>:&nbsp; <FONT style="BACKGROUND-COLOR: #c0c0c0">[&nbsp;&nbsp;&nbsp; ]</FONT> Not Started&nbsp; <FONT style="BACKGROUND-COLOR: #ccff66">[&nbsp;&nbsp;&nbsp; ]</FONT> On Track&nbsp; <FONT style="BACKGROUND-COLOR: #ffff99">[&nbsp;&nbsp;&nbsp; ]</FONT> Early warning of potential risk&nbsp; <FONT style="BACKGROUND-COLOR: #ff5050">[&nbsp;&nbsp;&nbsp; ]</FONT> Serious risk to completion&nbsp; <FONT style="BACKGROUND-COLOR: #99ccff">[&nbsp;&nbsp;&nbsp; ]</FONT> Completed&nbsp; <FONT style="BACKGROUND-COLOR: #000000">[&nbsp;&nbsp;&nbsp;&nbsp; ]</FONT> Excluded</SPAN>

Update [09/30/2008]Below a second version that displays the % complete value on the chart. Note the use of absolute positioning, so that the value doesn’t interfere with the bar. The formula is written for both Internet Explorer and Firefox.



="<DIV style='position:relative; background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),TEXT(1,"0%"))&";'>&nbsp;</DIV><DIV style='position:absolute;top:0px;left:0px'>"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),"")&"</DIV></DIV>"
 
Related info on BitsOfSharePoint:

Comments

There are no comments yet for this post.
Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Addition: 2 + 1 = *


Please complete this equation.

Email


This is optional.
Attachments

 T o p i c P o i n t

 E x a m p l e P o i n t