Sunday, November 18, 2007

iGoogle and Newsvine Dashboards

I've always been partial to dashboards and often write about it. I've done a number of prototypes just to experiment with visualizations.

Dashboards allow you to organize and see the information you want without adding too much clutter.

Here's my implementation. It works in IE, Firefox, Safari and Opera.

I particular like the visualizations found in the iGoogle and Newsvine dashboards. They provide nice feedback on the container that you're moving and where you'll drop it. So, I've copied that.

When you move a container, everything is **real** size -- not a sliver for where you'll drop the container. For me, the argument that you cause too drastic of a visual change to the layout doesn't hold water.

You're only moving one container at a time and it's not a common operation. You basically move a container, get it into the fold and view it.

You're also only dealing with a **few** containers. This is a dashboard.

The key to the implementation is controlling the container's drag over behavior. Each container needs to react to the container that's being dragged over it. So, pick a library that the supports such behavior ( you can pick Bindows, but keep in mind that if you do, you won't be able to see the dashboard if you turn JavaScript off; of course, with any library, turning it off means that there's no behavior at all! ).

My implementation uses YUI 2.3 which easily handles drag over with the drag and drop library.

In this case, a drag over, inserts a temporary marker above the container.

When you drag out, the marker is removed and the container list collapses ( each container is statically positioned ).

All of the JavaScript is really short and pretty much self explanatory. Run the example and view the source. Use and improve it.

Have fun!


Pawy said...

Thanx a lot for that. I need to create a dashboard and am very new to yui. I was very excited to find your implementation. it helped me a lot.

skypoet said...

Great! Glad to help out!

Manivannan said...

Very Very useful implementation.

Double Thumb up !!

Romain said...

Very well done thanks a lot man!

Neil said...
This comment has been removed by the author.
Neil said...

That's awesome...How can collect the new container positions in a hidden form element so i can save the users settings?

skypoet said...

Hi Neil,


The containers are positioned statically so all you really need to do is store them in order per column. The actual positions aren't necessary. This simplifies what you need to pass into your form.

As for the actual implementation of the form, I'll leave that up to you.

Neil said...

Hi Skypoet.
Sorry...i'm a little bit of a newbe :) You lost me a little... I can create a form with a submit button but how would i know the new order "i.e. after i dragged and dropped" to place it in a form? Am i lost? :)

Any help would be appreciated!