How to create a Countdown in a SharePoint list

Date:May 17th, 2011 Author: Tags: , , , , ,
Category: Highlighter, SharePoint Development, SharePoint Free Tools, Training Comments:0 ;

countdown

If you’ve got a list containing important dates (such as the above example), it’s very useful to be able to easily see how long is left before that date, or how long since it has passed. Unfortunately basing a calculated column on the current date isn’t supported by SharePoint natively, as discussed in my previous article: How to use [Today] in a SharePoint list

So how can we work around this shortcoming without having to wave signs and shout outside Microsoft’s offices? The are a few options available to us:

  • JavaScript: Use a Content Editor Web Part.
  • Designer: Create a custom view in SharePoint Designer.
  • Code: Make your own custom field type from scratch.
  • SharePoint Highlighter: Buy our custom field type.

JavaScript document_into83

Since SharePoint is so uncooperative about using the current date on the server side (i.e. with a calculated column), we can wait until the information gets to our browser and fix it there with JavaScript.

We can get JavaScript onto a page using a Content Editor Web Part, which is added just like any other web part. Christophe at Path to SharePoint has put together a script that displays the date difference on hover, that can be modified slightly to display just the countdown: Countdowns – A second method

Adding a CEWP to each page your list is displayed on can become quite arduous if it’s displayed in a lot of places. In addition to this, information in a CEWP is quite vulnerable to accidental edits, as they are accessible to any user that can edit page content.

Designer designer3013

SharePoint Designer is a free and powerful tool from Microsoft for customizing SharePoint. Unfortunately, because it can do so much, its use is often frowned upon by site administrators (and sometimes even banned).

If you’re lucky enough to be allowed to use it, then (in an unusual twist) Christophe may once again be the person to look to. In a break from his many and various JavaScript solutions he’s put together a Designer solution for this problem too: A countdown for tasks lists

As with the JavaScript solution above, the Designer changes will have to be made on each view web part you want to see the countdown on, but fortunately the changes can only be overridden by someone else using Designer, or an administrator.

Code studio63

If you already have the backbone of a custom field type coded, then adding the XSLT to display this in 2010 should be reasonably straightforward. Alternatively this can be done within the custom field type class.

If you’re using 2007, then CAML rendering unfortunately fails you here, and it’s necessary to use a JavaScript workaround in one form or another.

Creating a custom field type from scratch for this sole purpose is probably going to be remarkably costly (in terms of time). Actually making the foundations of a custom field type is a bit of an investment, but thankfully Microsoft has put together a walkthrough to at least help you get started.

The benefit of using this method is that columns created from a field type are displayed on every page without having to add any additional code to the page itself.

SharePoint Highlighter currency_dollar43

Of course, it is possible to get all the benefits of a custom field type with much less pain: Buy a commercial solution.

If you have a glance at out handy product comparison, you can see the wealth of products we managed to find that offer this functionality. So far that grand total is… One: SharePoint Highlighter.

So if you’re looking for a commercial solution it looks like we’re the only option. If you know otherwise then please do tell us; but for the time being we’ll cheerfully carry on being the front-runner in this one horse race.

Tags: , , , , ,

Leave a Reply

Anti-Spam Quiz: