Elegant way to view hierarchical data in a web application

Question

This is a rather frustrating problem I have had to solve on multiple occassions, and I never found the solution I came up with entirely satisfactory.

Say you have a 'complex' hierarchical data structure you have to present to the user of your web application, and most nodes in the hierarchy should be editable, too. For example, say you have to present Project details, where each Project can have multiple Tasks associated with them. Now a user may want to edit a Project (e.g. change its name) or add a particular Task to it, edit a task or remove one etc.

The way I generally go about this is to have a Projects table and a Project form. When a user clicks on a row in the projects table, the form is filled to reflect details of the Project, and another table is filled containing the tasks for that particular Project. This approach seems rather clunky when you have lots of levels in your hierarchy though, and I never know whether to hide data until it is requested and slide it into view or display empty placeholders etc. etc. you probably get the point.

So my questions is: do you know of any examples where this problem has been solved in an elegant way? Is there any concensus as to what is best from a UI design/ best practise perspective? (I have intentionally kept this language/platform agnostic).

All suggestions are appreciated.

Answer 1

Coincidentally I'm currently working with the same kind of project.
The problem doesn't have a "universal" solution. It all depends on context.

• How is the data supposed to be displayed.
• How is the user viewing the data.
• How is the user interacting with the data.

There are a lot questions and each context has it's own answers.
Each user might even have different answers in the same context but to develop something like this to satisfy every single user is impossible. One has to make compromises.

Well... That's my two cents anyway.

Answer 2

Well, for a JavaScript example of nested forms (with heaps of editing and display options), there's the jqGrid Demos. Look under Examples -> Advanced -> Subgrid for one such example.

But yes, there's no one true way to solve this one, but when I come up with it I'll let you know. :)