A progress bar for your tasks list and Printing

Today, let’s see how to show the progress of your tasks in SharePoint:

We’ll rely on this method: using calculated columns to write HTML. Easy, and entirely done through the SharePoint UI.
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:
=”<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>”
Note: the   character is mandatory to make this work in Firefox.
If you are looking for other colours, here is a very good reference:
http://www.w3schools.com/html/html_colornames.asp


Printable progress bars

You may have noticed that when you print lists including my examples of progress bars, the colours are not rendered. This is actually the expected behaviour: when printing Web pages, background colours are usually ignored by the browser.
So what can you do if you want to print your progress bars?
A first possibility is to modify your browser settings to print backgrounds. In Internet Explorer for example, follow this path:
Tools | Internet Options | Advanced | Printing.
A second option is to modify the formula and use colors instead of background colors, or use images. Here is an example of workaround for the above screenshot, where I used border colors (instead of background colors in the original post):
view plaincopy to clipboardprint?

="<DIV style='position:relative;'><DIV style='font-size:0px; border-top: 14px solid "&CHOOSE(INT([%]*10) +1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&"; width:"&([%]*100)&"%;'> </DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>" 

="<DIV style='position:relative;'><DIV style='font-size:0px; border-top: 14px solid "&CHOOSE(INT([%]*10) +1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&"; width:"&([%]*100)&"%;'> </DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>"
As usual, feel free to share your own solutions!
This behaviour was first reported to me by Peter Allen