| Tree/Detail | Version 2.0.0.0 |
||
|
|||
| Description | |
The Tree/Detail pattern organizes large, deep, and heterogeneous data sets while providing an understanding of the type, relationship, and distribution of objects. This pattern is capable of presenting large amounts of data about each object. The detail pane enables users to get information about an object before taking action on it. The attributes of each object may be different. This pattern is appropriate for experienced users who need to see detailed information about an object. |
| Pattern Set Decision Table | |
Tree/Detail |
|||||
How many levels of hierarchy within a data set do you require? |
4+ |
3 – 7 |
4+ |
3+ |
3 – 7 |
What is the maximum number of levels that you need to display? |
2 |
3 – 7 |
4+ |
3+ |
3 – 7 |
How many data dimensions (columns) do you require? |
1 |
2+ |
2+ |
3+ |
2+ |
What is the user type? |
Casual |
Trained/Power |
Trained/Power |
Experienced |
Power |
Is analysis of trends a primary user task? |
No |
No |
No |
No |
Yes |
Do you want to enable users to open or close branches? |
No |
Yes |
Yes |
Yes |
Yes |
Are objects sortable within groups? |
No |
Yes |
No |
No |
Yes |
| Pattern Sample | |
| The user drills down through categories using a tree until objects are listed. Clicking the object name displays information about the object in the adjacent pane. |
![]() |
| Figure 1. Drilling down through hierarchies in a tree and selecting items to appear in the detail pane |
| Required Screen Elements | ||
| Component Type | Required Components | Customizable or Extendable Components |
| Splitter |
|
NA |
| Tree | Categories hierarchy and items are listed in a tree. | Toolbars and menu bars can optionally be added to perform actions on the tree contents. |
| Detail Pane Title |
|
NA |
| Related Patterns | |
| Master Detail | A method of navigating through records using a master object and corresponding details refreshed in the area below |
| Related Guidelines | |
| Tree | Navigation is a series of investigative digging using expandable nodes at different hierarchical levels. |
| Panel Splitter | Splits the window into panes. Selecting information in one pane displays read-only content in the adjacent pane. |