Sneak Peek: HTML Calculated Column v3


One of the great benefits of running online workshops is that it pushes me to refine my solutions.

The cornerstone of Tuesday’s visualization workshop is the HTML calculated column. So for the occasion I revisited my script and worked on several improvements. The main one is to make the filter menu work for HTML calculated columns (see screenshot).

Another enhancement I am working on is to allow the use of HTML calculated columns for grouping (see second screenshot).

The first to benefit from the improvements will of course be the workshop participants, as the filter menu will be included in the script they’ll receive. The complete version (v3) of the HTML Calculated Column with all the enhancements should be published by the end of the year.

HTMLgroupUpdate [11/01/2009] Another screenshot of my work in progress: HTML calculated columns used for two level grouping.

A workshop calendar loaded with demos


I had planned to introduce my demo page featuring the EUSP Fall workshop calendar, but Mark Miller beat me to it. You can read his comments, and/or explore the page by yourself to try and discover all the featured customizations.

I’ll share more details in future posts. For now, here is the flat list of customizations, all added through the SharePoint UI (no SharePoint Designer, no server side change):
– Calendar displaying three months, not just the current month.
– Sundays have been removed (but we are open on SharePoint Saturdays!).
– The calendar height has been adjusted to fit in the page.
Easy Tabs, that automatically generate the tabbed interface for the calendar months.
– Content types: workshops have a colored background, while a flag is displayed next to US holidays. Conferences have the standard SharePoint look.
– color coding based on the trainer’s name, for both the calendar views and the list views.
Beauty Tips (jQuery plugin): there are many jQuery tooltip plugins around. I have selected this one for its ability to pull data from another page (in this case the display form) , and auto-position the popup in the largest available area – very useful in cases like mine where the popup has a significant size. Also, I love all the customization options. A great plugin!
HoverIntent (jQuery plugin): another very useful plugin that analyzes your mouse movements. It waits until the user’s mouse slows down enough before triggering the tooltip.
– “learn more” button in the events list.

These customizations will of course be presented in detail in the upcoming workshops:
Easy Tabs Interface, on September 23rd.
Calendar solutions, on October 16th.
– Color coding and animations workshops, in November/December.

The HTML Calculated Column, one year later

I started this blog one year ago, and one of the first techniques I shared was the “HTML Calculated Column”.

I’ve talked about many other topics since then, but to date the “HTML Calculated Column” remains by far the most popular. The original post has been viewed more than 45,000 times, while its little sister explaining how to use the technique for color coding has been viewed 27,000 times.

Online workshops coming soon

In the past year, I have refined this technique and published more tutorials. I have also created a formula generator to handle simple cases. The latest version of the script is on this same page (under the Download tab).

The “HTML Calculated Column” technique has also been relayed by many SharePoint bloggers. On for example, you’ll find Paul Grenier’s jQuery version of the script, and a detailed example by Jim Bob Howard: the payroll schedule.

However it was still not enough to answer all the users’ requests. So I worked with Mark Miller to set up two online workshops that will include this topic.
The first one in October actually focuses on calendars, color coding being one of the featured solutions.
The second one, in November, will be dedicated to the HTML Calculated Column. During the workshop, I’ll answer your questions and we’ll work on your specific use cases.

To be informed of upcoming workshops offered by, you can check out this page or subscribe to the RSS feed.

HTML Calculated Column – Updated script

I have released a new version (v 2.0) of the “HTML calculated column”. The new script covers lists (SharePoint 2003 and 2007) and calendars. Its purpose is to replace the scripts currently published here and here.

I am proposing this update as people were confused by my recent changes, with the use of DIV tags for lists and SPAN tags for calendars. The new code accepts various html tags. You can now use “DIV” or “SPAN” tags, but also “A” tags, “IMG” tags, etc.

The files are available for download on this page (right click on the file name and save as):

Use the .dwp Web Part on a SharePoint page, or store the .txt file in a document library and connect to it from a Content Editor Web Part (detailed tutorials coming soon).

Note: I am not displaying code in this blog anymore, as I’ve had too many editing issues in the past.

 I have also cleaned up the code to deal with grouped lists. Instead of overwriting the default SharePoint JavaScript, I append my own code to it.

This is still work in progress, I have chosen to make it available now to get your feedback. Next week I’ll publish more detailed explanations and I’ll update the old posts.

Trend reporting

I have already published several examples of progress bars: the initial post, an example proposed by Peter Allen, more color coding, and printable charts.

This week, Mark Miller at End User SharePoint published a new article I wrote on trend reporting (see above picture).

The original idea is from Ben Schlaepfer. I have adapted it for users who are looking for an OOTB solution, without SharePoint Designer. I have also tweaked it to make it work in Firefox.

Video: “My Tasks” on a dashboard

Mark Miller at EndUserSharePoint has created an 8 minute screencast that showcases my “HTML calculated column”. The video, called “SharePoint Dashboards – My Task Assignments”, is part of a series about creating dashboard pages.

The other videos of the series are also worth a look, as they’ll give you an idea of what can be done using only the SharePoint UI. What I like in Mark’s screencasts is the combination of a high level presentation with drill-downs that capture key details.

The “HTML calculated column” is a method that allows you to use SharePoint calculated columns to write HTML. It has multiple applications, and can often replace heavier customizations done through SharePoint Designer or programming. The whole series, including the method and various examples, is available on this site:

Display a random picture on your home page

In my last post I introduced the URL protocol for SharePoint lists. Today, let’s see how to use it to display a random picture on a page.

You’ll find other examples on the Web that are based on the same principle. Here is a very popular slide show from Todd Bleeker:

A major difference with the above example is that my code is cross-browser (IE and Firefox), as is usually the case for the other scripts I publish. In this case in particular the behavior of Internet Explorer 7 is actually closer to Firefox than to IE 6.

Continue reading

A simple drop-down menu, the SharePoint way

SharePoint comes with buit-in drop-down menus. To view the scripts in action in SharePoint 2007, open a SharePoint page in your browser, open the source (view > source), and search for this tag:
<td class=”ms-siteactionsmenu” id=”siteactiontd”>
It contains the “Site Actions” menu of your page.

You can leverage this code for your own needs. For SharePoint 2003, several blogs covered this topic, here is my favorite: Continue reading