Things I need to do:

  1. display a list of items related to a parent item (contacts on a quote)
  2. be able to remove an item from its list (remove contact from quote but not delete contact)
  3. be able to edit an item from its list
  4. be able to create a new item and add it to its list (with a minimal form)
  5. be able to find existing items and add one or more of them to the list [6. be able to browse existing items (example "recent contacts") and add one or more of them to the list]

there would be several related lists that i would need to do this for one on parent object (contacts, tradeins, line items, etc)

is there a common, standard, or accepted way to do this?


There are three common designs.

Drill Down A link or other control in the parent window opens a separate window (or page) that lists the child items for the parent. This is preferred when the users occasionally need to transition from the parent to the children, but also need to regularly navigate to the children page directly for some tasks. The latter tasks may include searching for contacts on some criteria or browsing Recent Contacts irrespective of the parent.

Master Detail In a single window (or page) the top portion shows the parent data, and the bottom shows the list of child items. This is preferred when the user needs to work on the parent and child data together, frequently switching attention between them. It includes situations when you have multiple parent objects in the same window (e.g. they themselves are a list), so now the user is switching among multiple parents and multiple children within parents.

Tree Control If you do have multiple parent objects in the same window, they could be top level nodes in a tree, where expanding any one of them displays its child items directly underneath the parent. This is best when the hierarchy depth is variable among parents and/or relatively complex (e.g., more than just two levels like you describe).

I’ve details and illustrations of each of these at Taking Panes.

Creating, editing, and deleting are the same in all three. Editing is best if it’s edit-in-place, where the user can modify fields directly as they appear in the window (including the list). An Insert or Add button or menu item creates a blank object (e.g., inserts it in the list) for input. An alternative is to have a blank record always available for input, but that only works well with lists. A Delete button or menu item deletes an object.

There are two models for specifying the object or class of object to act on.

Duplicate Controls There’s the web-style of having separate controls for each object or class. For example each item in your list has a Delete button. The parent item also has a Delete button to distinguish deleting the parent from deleting a child.

Selection – Action Then there’s the desktop-style of having a single centralize control for each action and an icon or other control that allows the user to select one or more objects (parent or children) for the subsequent action to act on.

The advantage of Duplicate Controls over Selection-Action is it takes only one click, rather than two, to perform any action. The primary advantage of Selection-Action is that you can dedicate more window space to data and less to controls.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.