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 colors, here is a very good reference:
http://www.w3schools.com/html/html_colornames.asp
21 comments
Comments feed for this article
September 2, 2008 at 8:30 am
Greg O
Have just found your blog through EndUserSharepoint.com. Some really good, unique content you have here. Thanks for sharing and please keep it up!
Thanks,
Greg
September 18, 2008 at 5:03 pm
Erich
Just tried to copy and paste the HTML of both progress bars into a calculated column, and what I get displayed is just the formula, and not the progress bar as it shows above. Am I missing something here?
September 18, 2008 at 11:40 pm
Christophe
Erich: the formulas themselves do nothing, as you have experienced. You have to add the script (see the reference to the method in the above article).
On this site I have several articles like this one, where I just point to the original article where the script is published.
September 29, 2008 at 3:20 am
Another example of progress bar « Path to SharePoint
[...] In the interest of sharing, Peter Allen from California has sent me his own implementation of the progress bar for task lists. [...]
October 15, 2008 at 8:24 pm
Owen
How can I do conditional red, yellow & green coloring? Can’t I just do a nested IF statement?
I’m trying to figure out the syntax, but I’m stumped. I’d like the bar to move and change color, all based on the value of the % Complete column.
October 16, 2008 at 6:44 am
Christophe
Owen: as this topic is very popular, I am going to publish a third article on progress bars. I’ll include your use case.
There are various ways to apply conditional formatting. Using nested IF statements is the standard way. When applicable, I prefer the CHOOSE function which is lighter. Sometimes, you can also use math formulas as a workaround.
I suggest that you check out the following posts (the first one uses the CHOOSE function):
http://pathtosharepoint.wordpress.com/2008/09/01/apply-color-coding-to-your-sharepoint-lists/
http://pathtosharepoint.wordpress.com/2008/09/29/another-example-of-progress-bar/
October 17, 2008 at 5:52 pm
Coming soon: more examples of progress bars « Path to SharePoint
[...] 17, 2008 in Uncategorized There seems to be a lot of interest around my posts on progress bars (here and here), so I have decided to publish a third article with more [...]
October 21, 2008 at 8:52 am
Progress bar + color coding « Path to SharePoint
[...] in Calculated Columns, SharePoint 2007, The HTML calculated column This post is an answer to Owen’s question about progress [...]
October 28, 2008 at 8:00 am
The “HTML calculated column”: stay tuned! « Path to SharePoint
[...] learn how, thanks to a simple script, you can: – apply color coding to your issue lists – create progress bars for your task lists – enhance your contact lists – open hyperlinks in a new window – [...]
January 16, 2009 at 5:16 am
Brian Merrifield
Christophe,
How can I get the percent complete in sub-tasks of a major task? Basically, I have “Issue A” and there are 10 sub-tasks. If seven sub-tasks are complete, resulting in “Issue A” being 70% complete – how do I “roll-up” that percentage and then use the calculated columns above to display overall status of “Issue A”.
I’m guessing another calculated column?
Thanks,
Brian
January 16, 2009 at 5:41 am
Christophe
Brian, how do you build the task hierarchy in your list?
SharePoint works by entry (row), and calculated columns won’t allow cross-row calculations.
March 30, 2009 at 7:49 am
Jeff
Hi Christophe
Your article on progress bars for tasks list was exactly what I was looking for – thanks.
However, I have added your script to the source editor of a new content editor web part on the same web page as the list; and your html to a new calculated column Progress, and it does not work.
The Progress column displays as follows:
% Complete Progress
10%
40%
100%
I am using the Project Task list template.
Any suggestions?
Thanks in advance
Jeff
March 30, 2009 at 9:47 am
Christophe
Jeff: first double check your formula (do not copy/paste directly from my post because of text formatting issues), and see if this troubleshooting page helps:
http://pathtosharepoint.wordpress.com/2008/11/01/troubleshooting-your-html-calculated-column/
March 30, 2009 at 1:19 pm
Jeff
Hi christophe
Have checked the formula – retyped etc and also read through /tried all the potential fixes in the trouble shooting.
I also tried a different (but similar solution) from someone else: http://blog.ray1.net/2008/01/enabling-html-andor-images-in.html
But no success, the formula runs (i.e. calculates the width % from the % Complete) but does not generate the html, only shows the html code as written in the formula.
Do you think it is because of permissions on Project Tasks lists? the Sharepoint features?
I really have no idea why it is not running. Any help would be greatly appreciated
Jeff
March 30, 2009 at 1:24 pm
Christophe
Jeff: send me your formula, and a screenshot of your page in edit mode:
Christophe@PathToSharePoint.com
March 30, 2009 at 1:28 pm
Jeff
No worries – have found the error – positioning of content editor web part on page.
Doesn’t work if not below list.
Had it above / to the side etc. Thanks for script and help.
Do you think it would be better to use: http://blog.ray1.net/2008/01/enabling-html-andor-images-in.html
and change the xml file?
Jeff
March 30, 2009 at 2:28 pm
Christophe
Perfect
. btw this is mentioned in the troubleshooting page.
I just discover the above post, and the idea is very similar to mine, except that it’s done on the server side. I don’t know how reliable it is – one of the comments reports an issue.
My blog is mainly for people who don’t have access to the server, and for whom that method is not an option.
March 30, 2009 at 2:43 pm
Jeff
Thanks for the help – some great stuff you have done. Looking into your events stuff now – really impressed.
You wouldn’t know anything about summarizing items in a list would you?
e.g. recreate “dashboard” on change request management template (under project management section).
i.e. Can you create a calculated field in one list that summarizes the records from another list?
I am guessing that since you can link multiple lists by lookup, you should be able to summarise them?
June 24, 2009 at 12:07 pm
Neeta
Hi,
I tried the above but instead of the progress bar, it displays the html text in the column.
Should i do some other setting?
Thanks
June 24, 2009 at 12:35 pm
Christophe
Neeta, follow the links mentioned in the post for more details. In particular see the troubleshooting page:
http://pathtosharepoint.wordpress.com/2008/11/01/troubleshooting-your-html-calculated-column/
June 25, 2009 at 5:00 am
Neeta
It is working now!!!
Thanks a lot for the help and sharing such a wonderful port..