FusionGPS: Design Patterns: Hierarchies Pattern Set: Overview/Tree/Detail Pane

Overview/Tree/Detail Pane

Version 2.0.0.0

Hierarchies Pattern Set


Description

The Overview/Tree/Detail Pane pattern places a supporting hierarchical display (a tree and detail) below a defined object. The defined object presents overview details in a one- or two-column layout. The defined object provides users with context for what they will find in the tree hierarchy.

Examples of patterns that lead users to the Overview/Tree/Detail Pane are those found in the Search Results and Browse pattern sets.


Pattern Set Decision Table

	Categorized Content	Tree Table	Tree/Detail	Overview/Tree/ Detail	Pivot Table
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 (sort retains hierarchy)	No	No	Yes (sort retains hierarchy)


Pattern Sample

The overview area provides the user with context for the tree. Clicking nodes of the tree refreshes the detail area with information about that node.

Figure 1. Clicking a node of the tree to view information about that node in the detail pane

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Splitter	Vertical splitter divides two panes. Left pane contains the tree with the categories and items. Right pane contains the details of the selected item in the tree.	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	If the page contains noneditable fields, use this format: <Object Type>: <Object Name>\| For example: Employee Information: Sandra Blake If the page contains editable fields, use this format:Edit <Object Type>: <Object Name> h For example: Edit Employee Information: Sandra Blake	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.

About Oracle | Legal Notices | Terms of Use | Your Privacy Rights