This article is part of the “HTML calculated column” series. You’ll find “teasers” in this post, in the form of links to live demos, but no tutorial or code.
If you missed the previous episodes…
In the past three months, we have played with the “HTML calculated column” to enhance SharePoint lists: font styles, color coding, hover effects, etc. A few lines of JavaScript have allowed us to apply these customizations to flat lists, grouped lists (expanded or collapsed), calendar views and display forms.
In our examples so far, we have used calculated columns to write “simple” HTML strings, mainly DIV tags and hyperlinks to Web pages or pictures.
Widgets and REST Web services
In the past few weeks, I have started exploring two powerful ways to extend the possibilities of the “HTML calculated column”: widgets and REST Web services. Both can easily be embedded in HTML strings.
Widgets come in different flavors: Flash, Silverlight, plain HTML, jQuery, etc. Joel Oleson recently wrote about including widgets in SharePoint pages. My approach here is a little different, as I use widgets in the lists themselves, at the item level.
To see how REST works, let’s take an example from Google:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World
By clicking on the link, we call the Google service, which returns a picture. All the parameters needed to create the picture are included in the URL. Such URLs can easily be built using a calculated column.
Why no tutorial?
There’s a long way from a simple demo to ready-to-use content, and this is especially true here.
The first difficulty is the range of opportunities to explore. It’s not easy to sort out all the options and identify the meaningful ones.
Then, we are talking about integrating external tools or services with SharePoint. This brings about a number of questions linked to reliability, sustainability, security. It also involves licensing terms.
So I have chosen a different approach. I have set up demos to showcase my work in progress. I hope to get some feedback and maybe new ideas that will help me sort this out. I’ll then write tutorials for the most popular demos.
The first 5 examples use the “HTML calculated column” method as is. For the others, additional scripts are required. For example the jQuery demos rely on the jQuery and jQuery UI libraries.
Enough talk, let the show begin!
1. World Clock
Link: http://8002.freesharepoint2007.com/Lists/WorldClock/AllItems.aspx
The Flash widget provided by ClockLink is highly customizable, as you can enter the shape (“code” in the above screenshot), color and location as parameters. This is a perfect fit for a calculated column.
Update: see the tutorial.
2. Countdown
Link: http://8002.freesharepoint2007.com/Lists/Tasks/AllItems.aspx
Another example of Flash object. I have also created a calendar view of this same countdown:
http://8002.freesharepoint2007.com/Lists/Tasks/Calendar.aspx
Note that the demo also includes the countdown from Alexander Bautz (“Traffic Light” column).
3. Stock quotes
Link: http://8002.freesharepoint2007.com/Lists/StockQuotes/AllItems.aspx
I am pulling charts from Yahoo! Finance, using the company symbol as parameter. I used the hover effect to keep a clean layout.
Update: see the tutorial.
4. Charts
Link: http://8002.freesharepoint2007.com/BlogStats/Forms/AllItems.aspx
This demo calls the Google chart API. My example shows for each week (43, 44, etc.) the number of pageviews for a given post.
Update: see the tutorial.
5. Easylistener
Link: http://8002.freesharepoint2007.com/Lists/Easylistener/AllItems.aspx
This one uses the Yahoo! Easylistener widget. I have chosen a collapsed view for performance reasons: items are called by SharePoint on demand when you expand a group.
We could for example imagine a list dedicated to SharePoint podcasts.
6. Technorati
Link: http://8002.freesharepoint2007.com/Lists/Technorati/AllItems.aspx
This demo uses two Technorati widgets, one to retrieve the authority and the other to retrieve the number of reactions.
In the same view I have included the Google PageRank and Alexa rank, from ChromeFans.org.
As I was in contact with Joel Oleson recently, I proposed to use this method to build a dynamic list of his top 100 SharePoint blogs. I haven’t received his response yet.
7. Star rating
Links (same as the Technorati demo):
list: http://8002.freesharepoint2007.com/Lists/Technorati/AllItems.aspx
display form:
http://8002.freesharepoint2007.com/Lists/Technorati/DispForm.aspx?ID=1
This one is based on a jQuery widget. What I haven’t completely figured out yet is how to count the votes…
A slider for Gantt views
Link: http://8002.freesharepoint2007.com/Lists/Gantt/GanttDefault.aspx
I wanted to share this last demo as well, although it is not based on the HTML calculated column.
Here I am using a jQuery slider to adjust the scale of a SharePoint Gantt chart. To change the scale, move the handle or click on a target position on the slider.
Update: see the tutorial.
Looking forward to your comments! Feel free to use the comments section or contact me directly: Christophe@PathToSharePoint.com
Path to SharePoint... and Beyond! 
Amazing stuff – truly inspiring!
Looking forward to the tutorials. 🙂
Hi Christophe,
Awesome stuff! And yes, it would be a great idea to build up a list of the Top 100 SharePoint blogs.
Can’t wait for the tutorials 🙂
Pingback: Follow-up on the 7+1 demos « Path to SharePoint
I love the top 100 blogs idea especially. I’ll get it running on myblog site. Though I don’t know if joel’s spreadsheet will be enough.
Tom
Hi Chris,
I’m very interested in No4 where you pull in google chart based on a data list. Just wondering if you have figured a way to pull in data from different rows? Because at the moment, I can only show data on a single row, not multiple. And probably also to graph it by the sum of the columns? wonder whether that’s possible.
Apart from that, awesome stuff!!! =)
Christophe
You have done some fantastic work here…it helps a novice like me appear professional!
SB
Can’t wait for the tutorials! SB
Ming, I am not even trying to pull in data from different rows as there are so many complications (collapsed views or multipage views for example).
For this I’d turn to other methods, using Data View Web Parts, Web Services or the URL protocol.
Task – Countdown Feedback
– The labels are hard to read when rendered sideways – as far as the time portion I’d hope that everyone is familier enough with he HH:MM:SS format to not need labels – and would save space too. The Days (and perhaps weeks or months?..) could then just have a simple “D”, “W” or “M” after them?
– Drop the leading zeroes for the day number, again, the leading zeroes works for the time (again a standard) but is just added clutter elsewhere.
– Colour-code the numbers based on the same logic as the traffic light.
– can’t help but think that I’d need some more information about the task’s timing – a gantt-like bar – which gives me a quick heads-up as to what that time remaining means as a percentage of the total effort or time.
Ouch! Why did I ask for feedback 😉
Let me try and provide some answers.
The downside of the method I am showing is that you don’t have full control on what you get, as you rely on an external tool or service. My only way to address your first three comments is to try and find another tool/service to do the job… or create my own.
As for your last comment: I already gave a partial answer by showing the countdown in calendar view. I’ll set up another demo with a Gantt chart.
Thanks for your feedback, Greg. I am sorry I can’t easily answer your requests, but at least it gives me the opportunity to insist again on the constraints that come with this approach. Before you adopt it, be sure to assess the solution in terms of reliability, flexibility, sustainability, security, confidentiality (not to mention the terms of use).
Sorry I didn’t realise you were using an external source for the countdown ( I was REALLY looking forward to the code in THAT calculated column!!)
And please don’t apologise for “failing” to deliver, I would never presume to make a request – just feedback or suggestions (with a faint hope that maintain the dedication!)
Having said that, I’ll try and explain my last point better – I was imagining a background colouring of two tones to indicate % complete as done in your other examples.
The point of the demos is to take advantage of existing widgets or APIs. In most cases it’s a black box for the user.
You’re also asking about a combination of countdown and Gantt. It should not be a problem, but I’ll start with two separate explanations!
Pingback: Sparklines and other charts in SharePoint lists « Path to SharePoint
Pingback: JQuery for Everyone: HTML Calculated Column | End User SharePoint
Wonderful ways to make SharePoint more graphical and visually interesting! Can’t wait for the tutorials!
The details for the charting examples (3 and 4) are here:
https://pathtosharepoint.wordpress.com/2008/12/08/sparklines-and-charts-in-sharepoint-lists/
Pingback: A slider for the Gantt view « Path to SharePoint
Hi, where can I get the code or instruction on how to set up a star rating system for a list? Thanks.
Patrick, this was just a proof of concept and is not operational. I am not going to put much effort into this as star rating becomes an out of the box feature in SP 2010.
Pingback: A2life » Showing a list from another SharePoint Site
Pingback: A2life » SharePointクロスサイトのリスト表示をJQueryで行う
Christophe, why not to make the star rating an operational option?, like much others im stucked in 2007…
It’s not that easy… Contrary to other solutions I have published, the star rating requires to write back to the server. If I did it, I would want to use the REST interface…which is not available in SP 2007!
I am a fan of Google API this stuffs is really great!.
Hello Christophe
I know this is an old post, but I’m hoping your slick new blog-o-sphere will ship this message to you.
I’ll get the brown nosing out of the way now – Love Easy Tabs, Color Coded Calendar, Image Rotator, your making me look good while I’m learning and for that I thank-you.
Anyhow I’m in the process of creating a Company wide Movember voting system on MOSS 2007 and I’ve used ‘Sharepoint Javascripts’ post http://sharepointjavascript.wordpress.com/2011/05/28/hit-counter-and-star-rating-for-sharepoint/
to Allow Star Rating that talks back to a RatingList.
My next line of attack is to use Laura Rogers Join Lists in a DVWP and then create a group and Count/Average of each Photos rating from their peers and have this post back an Average Rating to utilise your HTML Unicode Graphics.
Just thought I’d post about the Script I’d found, you’ve probably already seen it, but it might be handy for others.
Pingback: More pocketSOAP examples: Pie and Bubble Charts | Path to SharePoint