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.
  

Enterprise UI Design Patterns anyone?

As mentioned in my previous post, I have been closely following the UI design patterns published on the Internet. These patterns are really problem solver, however, I feel the majority of the patterns do not apply to the type of web application I am building.

In my current company and previous ones, I build web application for business use. This type of application have their own distinct characteristics and problems:

• Manipulates a lot of data in form layout
• Majority of the operations are CRUD (Create Read Update Delete)
• Data validations
• Hierarchical and flat data structure
• Deals with master-detail relationship
• etc.

I have been identifying some UI patterns that my team and I often use in the web application to tackle the same repeating problems. In the next posts, I will start documenting those UI patterns so that my reader can benefit from it. Feel free to comment on my patterns as I always need to continuously improve them.

UI Design Pattern Galore

Nowadays, there has been a growing number of web sites that collect UI design patterns. The UI design patterns are common solution to recurring problems when designing user interfaces. Whenever I face a usability issue or make a judgement on screen design, I always recall to the collection of UI design patterns. Therefore, it is so useful to bookmark web sites that collects design patterns. My top three sites on the list are:

Yahoo! Design Pattern Library
It has a lot of interesting (read: advanced) patterns like drag and drop, animations, etc. It is good to discover what today's web applications can do. When you are ready to put the patterns into practice, try the companion Yahoo! UI library.

Designing Interfaces
I read the book with the same title first before discovering this site. This is the book/site to discover more UI patterns beyond web page.

Patterns in Interaction Design
Plenty of patterns and tons of screenshots make this site a good reference.

Microsoft hasn't abandon us!

Better late than never. According to this Microsoft blog, Microsoft will release Service Pack 1 for VS.NET 2003. The beta has been out for some time and finally they decide to release it on 15 Aug 2006, if no futher delay introduced.

This is certainly good news for me, who is still using VS.NET 2003. I have been struggling in the past few weeks because of the infamous "Unexpected error creating debug information file ... The process cannot access the file because it is being used by another process". In my case, aspnet_wp.exe process is locking the PDB file, so everytime I want to build the solution I need to kill the process manually. Furthermore, whether this is related or not, my VS.NET debugger is not working properly. When I mouseover a variable, the value does not come correctly. The value will appear much later after I traverse down several line of codes, so the QuickWatch and Watch become useless. This problem is not yet solved until now although I already took drastic measure to uninstall and install VS.NET.

Finger crossed VS.NET 2003 SP1 will fix those problems, otherwise I have to live with it until the next upgrade to VS.NET 2005 :(

Web server and database server time difference

Time difference between web server and database server can cause hard-to-find bugs. This is what I experienced recently after deploying a web application to a live server. Unlike our development server where IIS and SQL Server reside in one machine, in the live server we have a SQL Server sitting in one machine and IIS sitting in another machine.

For some reasons, time syncronization in both servers (Windows 2003) did not work and as a result there was significant time difference between the two servers.
Because of the time difference, application features that depend on comparison between current time and stored datetime value will not work properly. For example, when I save User's password expiry date, I call DateTime.Now from the application (using the web server's time) and save the value to the database. In the stored procedure, I check if a password is expired using statement like:

-- check if password is expired
IF @PwdExpDate <= GETDATE()
    -- password is expired
    ELSE
    -- password is still valid

Since Password Expiry Date is set in the web server and then compared in the database server, this comparison does not work properly due to the time difference.

Although fixing time difference between the two servers is easy, I started to think whether we can always safely assume that both the web server and database server has the same time. Or do we need to introduce a programming guideline here:

"Datetime that is set in one machine can only be safely compared to the current time from the same machine"

In my case, the above guideline implies to moving the comparison logic from stored procedure to the application layer, or the other way around, setting the expiry date at the stored procedure and perform the comparison in the stored procedure as well.