UI Design Patterns: Hierarchical Master Detail

Problem Summary

The user needs to traverse through a hierarchical or tree-like structured data and do CRUD (Create, Read, Update, and Delete) operations.


Screenshot (click to enlarge)

Use When

• The data is structured in a hierarchical manner. Example: organization structure, web pages.
• The amount of fields/columns in the data is sufficient enough to be displayed as a form in one screen-length.
  

Don't Use When

• The data is flat
• The data consists of very few fields, e.g. only key and value, or consists of many fields that span across several screen length.

Solution

• Divide the screen into two columns.
• The left column contains a tree view control to let the user navigates through the hierarchical data. On top of the tree view control is a toolbar (or collection of buttons) to work on the tree view. In the screenshot, it has "Add Child" to add a child node, "Add Root" to add root node, and "Remove" to remove a node.
• The right column contains a form that the user can use to add new data and update existing data
• The form on the right will only appear when there is selected node on the left.

Suggested Improvement

• Drag and drop among nodes in the tree view. Drag and drop is a sophisticated operation that moves a branch of hierarchical nodes from one parent to another parent.
• Clone node feature for faster creation of new data. Instead of always starting with blank form, the user is aided with a copy of data from another node.
• Load on demand treeview to handle large hierarchical data.
• Banding to improve the performance when there are too many children under one parent node
• Hierarchical delete. When the parent node is removed, all its direct and indirect children nodes are also deleted. If this is not possible, then the user should only be able to delete from the bottom-up.