Whiteboard wiki recipe - now with Acquia Drupal

Last year DrupalCon Szeged 2008 introduced a few new technologies for helping people find out where things are happening both in terms of on-site conference activities and extracurricular fun. We've introduced a digital whiteboard which was using fixed size Drupal node displays set up in a wiki form, so everyone could edit any whiteboard item. This was helpful for people checking in from hotel rooms for announcements and also on-site because the building was so huge (see below) that running to the whiteboard every so often was not an option.

Even after 1.5 years, people keep asking about certain things on the website, so I decided to start off with the whiteboard and explain how we did it. Sharing the exact solution we used to do would not cut it though, since we used Drupal 5 and some custom code based formatting, which would not be up to today's standards. So I recreated the whiteboard using the latest Acquia Drupal codebase instead, merely configuring some content types, permissions and a view.

For this starter recipe I used Drupal core and Views only from the Acquia Drupal package, so you can also repeat with just these modules only.

Initially, I've set up a "Whiteboard note" content type and set it to be published by default, but not show up on the front page. I've also turned on new revision tracking, so we know who changed what on whiteboard notes. Then I went to managing permissions and granted every authenticated user to create whiteboard notes and edit any of the existing whiteboard notes as well. This gives the whiteboard notes a wiki type of usefulness, where people can edit and add new notes as needed. While we were a bit concerned about spam, it did not happen at all, partly because we limited the feature to those registered for the site.

Additionally you can also play with input formats using Markdown or some other module to add an easy to use input format for whiteboard notes. If you'd like to aggregate tweets tagged in a certain way or posted on your official event twitter account, you can reach back to my recipe of aggregating tweets with Feeds module. While twitter is an often quick stream of chatter going away quickly if you are not paying attention, your event whiteboard can contain the most important highlighted information. We used it for example to spread information of a train accident which slowed down traffic at the last day of the event, when people wanted to catch flights back home. Also, your own whiteboard can be used to make certain information sticky, people can go back and edit notes and include images or interactive maps.

So now that we have a content type which everyone can edit, and history is kept for edits, let's build the display logic for it. The simplest way currently is probably to create a View for node listings, which has filters for published whiteboard notes. Sort criteria included stickyness and post date, both descending. I used the node row style displaying teasers and the grid style displaying 3 nodes in a row. You can pick a decent number of nodes to display per page, like 36 to have 12 rows. You'll also need to add a page display specifying a path and a page title.

A basic grid view will look a bit broken, the width (and height) of the table cells will depend entirely on node content, so you'll need to add a bit of CSS to set the width and height of cells. The reason I think it is useful to set both to be limited is that people can have a good overview of the whiteboard notes, and they all appear as "post it" notes of the same size. This will of course require notes to have scrollbars on them. You can still highlight items by the built in sticky feature, since marking notes sticky will keep them on top. The default styling for that puts those nodes out of alignment from the listing, so those also need a bit of a CSS touchup. You can include these CSS overrides in your site theme. I have hacked these CSS changes to the header part of the view for easier sharing, which is not at all good for maintenance, so I'd not suggest doing this on a live site.

The end result quite closely replicates the whiteboard we had in Szeged without any custom PHP code whatsoever. I've attached the Views export for your reuse. Have fun!


dereine's picture

What about creating a feature, and export also the contentype the view and some more stuff.

Thx. for sharing it!

Gábor Hojtsy's picture

A feature version of this is absolutely welcome. I decided to write up how I did it instead of sharing actual code, because all is doable on the UI and I'm not volunteering to maintain this code. I've already did this from Drupal 5 to 6, from custom code to Views, so I decided to write down the steps instead of sharing actual code which would need more maintenance to be useful later in time. I'm not actually using this on a live site at the moment, so I was not interested in a maintained version of the code.

Add new comment