Progress Bar in Sharepoint Task List

My client makes use of most of the out of box features that are available with Sharepoint, many of the company managers frequently make use of the out of box sharepoint task list for resource assignment, tracking etc. Recently one of the group managers asked me if it is possible to create a visual indicator of the task, meaning he wanted a visual progress bar for the status of each task. After researching on the subject I discovered that Bamboo solution have a product for this need and can meet what exactly he was looking for. It would have done what we expected but the product does not seems to be more customizable so I started to look for doing this myself with some customization efforts.

I was able to do this using little html knowledge and a great javascript available from the pathtosharepoint website. Below are the steps that I did to achieve this.

1. Created a calculated column called "Progress Bar" and "Progress Bar 2" and then added the following formulas to each of the columns.

- Progress Bar:

=”<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>”

2. I downloaded a script from the pathtosharepoint site, added it to an content editor webpart on the same page as my task list. To download the code please click here

3.Once the content editor webpart is saved, you will see that the progress bar will start to show up in the columns Progress Bar and Progress Bar 2 as I have shown in the screen image above.

I also recommend my blog readers to visit http://pathtosharepoint.com , the author has really put great efforts to build and present some of the cool sharepoint custom components that are very useful in today's custom needs for Sharepoint.

I have always enjoyed working with sharepoint customizations and I am hoping that my research and these small tips help someone in Sharepoint development world.

Keep watching this space for more sharepoint development tips. Cheers to Sharepoint !!!