You are currently browsing the monthly archive for October 2008.
I was reviewing the SharePoint calendar styles, and came across this:
.ms-cal-monthitem b{
font-weight:normal;
color:#8c8c8c;
}
So what we read here is that in the month calendar, text within “bold” tags (b) will be rendered with a normal font weight. I wonder what made them do that…
This post shows a first attempt to use my “HTML calculated column” method to display Gantt views.
Why would I do this, knowing that SharePoint already offers Gantt views? Well, this addresses a few issues of the built-in solution:
- adjust the timescale
- add color coding
- use grouping options on the chart itself
- add various behaviors like context information
On the other hand, my solution doesn’t display a scale. Also, like the built-in SharePoint Gantt, it won’t manage task dependencies (Finish to Start, etc.).
You may have noticed that when you print lists including my examples of progress bars, the colors are not rendered. This is actually the expected behavior: when printing Web pages, background colors 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):
="<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 behavior was first reported to me by Peter Allen, who is also the author of this example. His workaround is to use hr tags (horizontal rules). Unfortunately this doesn’t work well for me as hr tags have a different behavior in Internet Explorer and Firefox.
If you are a SharePoint end user and haven’t heard about the “HTML calculated column” yet, I recommend that you first read this series. You’ll 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
- etc.
If you are already using this method, I’d like to give you a heads up of what’s coming next.
The idea
The home page is a natural place to expose the content of your SharePoint site. However, often this page becomes over packed, and this affects the user experience.
One way to improve readability is to append an expand/collapse button to each Web Part. At page upload, only the main Web Parts are expanded, but the user has the option to open other Web Parts he/she is interested in.
The idea is not from me, a script for SharePoint 2003 was posted on a blog a couple years ago [Placeholder for the credits – unable to locate the original post at this time]. But this script doesn’t work on SharePoint 2007.
This week, a reader reminded me about this, and asked me if I had a solution for SharePoint 2007. So here it is! Note that I have written my script from scratch using a different method, specific to SharePoint 2007.
This post is an answer to Owen’s question about progress bars:
“How can I do conditional red, yellow & green coloring? Can’t I just do a nested IF statement? [...] I’d like the bar to move and change color, all based on the value of the % Complete column.”
Though nested IF statements are an option, in this case the CHOOSE function will provide a more elegant solution, easier to read.
The first formula below has a choice of 11 colors. The choice will be decided by “INT([%]*10)+1″, an integer function of the % complete column (0% returns 1, 100% returns 11).
Update [October 29] I have added a non-breaking space to both formulas. This is needed in Firefox.
="<DIV style='position:relative;'><DIV style='background-color:"&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>"
Another example with only three colors:
="<DIV style='position:relative;'><DIV style='background-color:"&CHOOSE(INT([%]*3)+1,"red","Orange","Lime","Lime")&"; width:"&([%]*100)&"%;'> </DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>"
For other examples of conditional formatting, check this post about color coding.
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 examples.
Here is what I plan to address:
- color gradient, function of the % completed (see screenshot)
- simple Gantt views
- how to print progress bars
All these examples come from questions or comments I received from the readers of this blog.
If you have other use cases to propose - either because you are stumped or because you found an interesting answer you’d like to share (like Peter here) – please let me know and I’ll include it in the post I’ll publish next week.
In part I, we reviewed the benefits of SharePoint lists. Let’s now see what Excel has to offer.
Recent Comments