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
30 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..
October 7, 2009 at 8:26 am
Online Workshop – Easy Tabs for Project Dashboard « Path to SharePoint
[...] goes to Craig Lowrie for the color coded Gantt, and Claudio Cabaleyro for the pie chart. An HTML calculated column was used to create the bar [...]
December 10, 2009 at 7:16 am
SharePoint Wednesday CodePlex Roundup #2 - Fear and Loathing
[...] field type that displays progress as a graphic. While you can do this with a calculated column (click here to see how to do this), this project offers a field type that you can just drop in and forget [...]
December 10, 2009 at 7:36 am
SharePoint Wednesday CodePlex Roundup #2 | I love .NET!
[...] field type that displays progress as a graphic. While you can do this with a calculated column (click here to see how to do this), this project offers a field type that you can just drop in and forget [...]
January 4, 2010 at 1:03 pm
HTML Calculated Column and Unicode Graphics « Path to SharePoint
[...] of visual indicators in SharePoint lists. You’ll find many examples on my blog: – KPIs – Progress bars – Color gradients – [...]
April 22, 2010 at 10:57 pm
Samuel
Thanks for the progress bars. I have one issue, when we try to print the page that has the progress bar, it does not display. Any thoughts?
April 28, 2010 at 1:11 am
Christophe
By default printers don’t print background colors, so this is the expected behavior.
One option is to change your printer settings. Or search my blog for other examples of progress bars, including a printable version.
May 11, 2010 at 5:19 am
Case study: course compliance report (Part II) « Path to SharePoint
[...] Total Another Idea came from a progress bars and adding color. Currently this CC totals [% Complete] and [% Exempt] as total progress. Because [...]
May 14, 2010 at 10:38 am
Kishore
I already developed a webpart by using SPGridView.
Now I want to make that web part as CEWP, so that I can put one column as progressbar. Please suggest me
July 16, 2010 at 10:22 am
Daniela
I have huge list containg tasks to do and their status sorted by subgroup.
e.g.
Subgroup Task Status
A Imp. Doc Completed
A Test In Progress
….
B Build a house NotStarted
I would like to create an overview which gives an overview about the progress for each subgroup and if it is possible in a coloured way or visualized.
Completed In Progress NotStarted Total
Subgroup A 2 4 5 11
Subgroup B 4 2 0 6
..
..
..
Do you have an idea how i can manage this in Sharepoint?
Thanks.