Overview/Tree/Detail Pane Version 2.0.0.0Print this Page
Hierarchies Pattern Set
 
Description
Return to Top

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
Return to Top
 
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
Return to Top
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
Return to Top
Master Detail A method of navigating through records using a master object and corresponding details refreshed in the area below
 
Related Guidelines
Return to Top
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