Building an expandable outline for the web

For part of a major work project I found myself needing to view a hierarchical list in an expandable outline form on the web.

On my Mac I used Omni Outliner which works great, but that didn’t work for my colleagues who work in Windows. They translated the list into a Word outline, but outline view in Word is not all that great, and who wants to fire up Word just to view an outline?

No, the answer was definitely to be able to view this list in a web browser, but how to build that?

We’ve been managing most of the work on this project we’ve using a Sharepoint site, but I couldn’t find a way to build a simple expandable list in Sharepoint. Later I found some articles on how to build one in Sharepoint, but they require developer access to Sharepoint, which I don’t have, and some coding in Visual Studio, which left me out in the cold at home over the long weekend with my house full of Macs.

In casting around I came up with two AJAX toolkits that both have expanding and collapsing tree controls – the DOJO toolkit and the Yahoo! UI Library.

I spent some time this weekend trying out the tree controls in both libraries. I was impressed with both – the features and design of both of these toolkits is pretty amazing.

I spent some time with Dojo’s tree control, but I couldn’t figure out how to apply styles to all the nodes at a given level (e.g. all the top level nodes should be green, second level nodes should have smaller type, etc.). Perhaps I just didn’t spend enough time with it – I’m sure it must be possible.

I was able to implement the controls and styles I needed using Yahoo!’s TreeView control, though it took a couple of hours to understand how to fit the elements of the UI Library together – all of these kinds of tools have their own learning curve. I never did get the tree to build from existing markup in an unordered list – I built my tree content in the Javascript code.

I should mention that these are tools for web developers – they’re not just things where you can drop a line of javascript into a web page and use – they take some savvy and some time to use. But it’s a heck of a lot easier than building tools from scratch!

I’m incredibly impressed with the maturation of the market of freely available tools for web developers since I last looked. I’m also struck again by the maturation of the entire concept of what it means to be a web developer now – it’s not just technical know-how, and it’s not just design ability, but a blending of the two in a way that I think is a fundamentally new discipline. It’s interesting to think about where that discipline finds its home in our academic institutions – at present I don’t really think it has one.