Master Detail Version 2.0.0.2Print this Page
Record Navigation Pattern Set
 
Description
Return to Top

The Master Detail design pattern enables users to quickly move through records using a master (table, tree table, or tree), select an individual record from this master, and then view corresponding details about that record in a detailed region below--all on one single dense page.

 
Pattern Set Decision Table
Return to Top
 
Drill-Down Details
Dialog Box Details
Page Details
Master Detail

Is there a lot of object information that needs to be viewed or updated?

Yes

No

Yes

Yes

Does the user need the context of other records while viewing the details of a specific record?

No

Yes

No

Yes

Is there a need to quickly scan through records?

No

Yes

No

Yes

Is there a need to compare certain attributes of these records against each other?

No

Yes

No

Yes

Is the user working on very large objects, spending considerable time focusing on only those details?

Yes

No

No

Maybe

Is the user working through a list of objects quickly?

No

Yes

No

Yes

Is there a need to update or take action on multiple objects as a group?

No

Maybe

Maybe

Yes


When to Use the Master Detail Pattern:

  • Need to provide a professional application where a user is accustomed to high-density screens and needs to easily navigate through lists or hierarchies of information to see details
  • Need the ability to quickly review information across multiple objects where the detail for these objects is dense
  • Need to review content of several objects in order to find particular objects or to perform actions on those objects
  • Need the ability to quickly review or act upon multiple large objects in succession

Why Use the Master Detail Pattern:

  • Reduces physical effort: Provides the ability to quickly view much more information in a constrained area with a single-mouse click.
  • Reduces visual cognitive load: Remains stable as opposed to using a drill down where users would have to reacquaint themselves with changes or a dialog box where users would have to move to or look at an additional window. Users can remain focused on constrained spaces that automatically refresh.
  • Reduces memory burden: When in a drill-down or dialog box, you have little context of larger space or objects without referring to a summary. With the Master Detail pattern, the other objects provide additional context. No memory is required.
 
Layout Options
Return to Top
Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section. In the following examples, the master is represented by the following components. The detail can be any type of layout (label or data, table, tree table, subtabs, and so on).

Navigation of Records on
the Same Page Master Options

Table over Detail

Tree Table over Detail

Tree over Detail

Number of master objects?

Many

Many

Many

Scope of details on page?

Large

Large

Very Large

Type of master object (attribute) information?

Homogenous

Some Homogenous

Heterogeneous

 
Pattern Samples
Return to Top
Table (Master)/Label Data Pairs (Detail)
When the user selects an employee from the master table, the corresponding employee details appear in the region below in a label or data format.
Figure 1. The selected employee's details appear in the region below
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Title
  • Use this format (if the page contains fields that you cannot edit): <Object Type>: <Object Name>

    For example: Employee Information: Sandra Blake

    If the Master page is empty, the header format for the detail section should be: <Detail Type>: <Object Name>
  • Use this format (if the page contains fields that you can edit): Edit <Object Type>: <Object Name>

    For example: Edit Employee Information: Sandra Blake

See the Header usage guidelines for master/detail header syntax.

NA
Page Buttons

If the page contains fields that you can edit:

  • Save Model buttons: See Save Model guidelines for appropriate set of buttons.
  • Cancel button: Cancels any unsaved changes and returns to the page before the record navigation.
NA
Table (Master) Selection Updates the contents in the Detail section.

If the master table is empty, the details section should only contain the
instruction text "No data to display."
NA
Disclosure Icon Button

Hide or collapse either the Master or Detail section.

The location of the Disclosure icon button affects interaction style:

  • Disclosure icon button present at the Master section: Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section; hence, on collapsing the Master section, the Detail section also collapses.
  • Disclosure icon button present at the Detail section: Because the Detail section contains the Disclosure icon button, only the Detail section collapses, not the Master section, as seen in the previous example.
  • Disclosure icon button present at both Master section and Detail section: In this Layout, Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section.
    • If the Detail section is expanded, then on collapsing the Master section, the entire section collapses. Upon expanding the Master section, the Detail section remains expanded as it was prior to collapsing.
    • If the Detail section collapses, then on collapsing the Master section, the entire section collapses. On expansion of the Master section, the Detail section remains collapsed as it was prior to collapsing.
Note: The expand/collapse state of the details
section should not depend on the content of the master table.
     

Table (Master)/Tree Table (Detail)
When the user selects a project from the master table, the corresponding project details appear in a tree table in the region below.
Figure 2. Table master and tree table details
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Title
  • Use this format (if page contains fields that you cannot edit): <Object Type>: <Object Name>

    For example: Employee Information: Sandra Blake

    If the Master page is empty, the header format for the detail section should be: <Detail Type>: <Object Name>
  • Use this format (if page contains fields that you can edit): Edit <Object Type>: <Object Name>

    For example: Edit Employee Information: Sandra Blake

See the Header usage guidelines for master/detail header syntax.

NA
Page Buttons

If the page contains fields that you can edit:

  • Save Model buttons: See Save Model guidelines for appropriate set of buttons.
  • Cancel button: Cancels any unsaved changes and returns to the page before the record navigation.
NA
Table (Master) Selection Updates the contents in the Detail section.

If the master table is empty, the details section should only contain the
instruction text "No data to display."
NA
Disclosure Icon Button

Hide or collapse either the Master or Detail section.

The location of the Disclosure icon button affects interaction style:

  • Disclosure icon button present at the Master section: Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section; hence, on collapsing the Master section, the Detail section also collapses.
  • Disclosure icon button present at the Detail section: Because the Detail section contains the Disclosure icon button, only the Detail section collapses, not the Master section, as seen in the previous example.
  • Disclosure icon button present at both Master section and Detail section: In this Layout, Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section.
    • If the Detail section is expanded, then on collapsing the Master section, the entire section collapses. Upon expanding the Master section, the Detail section remains expanded as it was prior to collapsing.
    • If the Detail section collapses, then on collapsing the Master section, the entire section collapses. On expansion of the Master section, the Detail section remains collapsed as it was prior to collapsing.
Note: The expand/collapse state of the details
section should not depend on the content of the master table.

Table (Master)/Subtabs (Detail)
When the user selects an employee from the master table, the corresponding employee details appear in the region below in a subtab format.
Figure 3. Selecting an employee in the master table displays that employee's details in the subtab region below
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Title
  • Use this format (if page contains fields that you cannot edit): <Object Type>: <Object Name>

    For example: Anderson, Anthony : Employee Details

    If the Master page is empty, the header format for the detail section should be: <Detail Type>: <Object Name>
  • Use this format (if page contains fields that you can edit): Edit <Object Type>: <Object Name>

    For example: Edit Employee Information: Anderson, Anthony

See the Header usage guidelines for master/detail header syntax.

NA
Page Buttons

If the page contains fields that you can edit:

  • Save Model buttons: See Save Model guidelines for appropriate set of buttons.
  • Cancel button: Cancels any unsaved changes and returns to the page before the record navigation.
NA
Table (Master) Selection

Updates the contents in the Detail section.

If the master table is empty, the details section should only contain the
instruction text "No data to display."

NA
Disclosure Icon Button

Hide or collapse either the Master or Detail section.

The location of the Disclosure icon button affects interaction style:

  • Disclosure icon button present at the Master section: Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section; hence, on collapsing the Master section, the Detail section also collapses.
  • Disclosure icon button present at the Detail section: Because the Detail section contains the Disclosure icon button, only the Detail section collapses, not the Master section, as seen in the previous example.
  • Disclosure icon button present at both Master section and Detail section: In this Layout, Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section.
    • If the Detail section is expanded, then on collapsing the Master section, the entire section collapses. Upon expanding the Master section, the Detail section remains expanded as it was prior to collapsing.
    • If the Detail section collapses, then on collapsing the Master section, the entire section collapses. On expansion of the Master section, the Detail section remains collapsed as it was prior to collapsing.
Note: The expand/collapse state of the details
section should not depend on the content of the master table.

Table (Master)/Tables (Detail)
When the user selects a project from the master table, the corresponding project tasks appear in the detail region below in a tabular format.
Figure 4. Selecting a project from the master table displays the corresponding project tasks in the detail region below
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Title
  • Use this format (if page contains fields that you cannot edit): <Object Type>: <Object Name>

    For example: Hospice Care Unit: Tasks

    If the Master page is empty, the header format for the detail section should be: <Detail Type>: <Object Name>
  • Use this format (if page contains fields that you can edit): Edit <Object Type>: <Object Name>

    For example: Edit Hospice Care Unit: Tasks

See the Header usage guidelines for master/detail header syntax.

NA
Page Buttons

If the page contains fields that you can edit:

  • Save Model buttons: See Save Model guidelines for appropriate set of buttons.
  • Cancel button: Cancels any unsaved changes and returns to the page before the record navigation.
NA
Table (Master) Selection Updates the contents in the Detail section.

If the master table is empty, the details section should only contain the
instruction text "No data to display."
NA
Disclosure Icon Button

Hide or collapse either the Master or Detail section.

The location of the Disclosure icon button affects interaction style:

  • Disclosure icon button present at the Master section: Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section; hence, on collapsing the Master section, the Detail section also collapses.
  • Disclosure icon button present at the Detail section: Because the Detail section contains the Disclosure icon button, only the Detail section collapses, not the Master section, as seen in the previous example.
  • Disclosure icon button present at both Master section and Detail section: In this Layout, Master and Detail should be in the same level unless the Master is the header section then the Detail should appear in the sub-header section.
    • If the Detail section is expanded, then on collapsing the Master section, the entire section collapses. Upon expanding the Master section, the Detail section remains expanded as it was prior to collapsing.
    • If the Detail section collapses, then on collapsing the Master section, the entire section collapses. On expansion of the Master section, the Detail section remains collapsed as it was prior to collapsing.
Note: The expand/collapse state of the details
section should not depend on the content of the master table.
 
Related Patterns
Return to Top

Compare Objects

The master object enables a certain level of record comparison; the compare object pattern demonstrates how to extend that comparison ability.

Hierarchies

Hierachies are used to present detail information in a hierarchy, with the ability to expand and collapse branches while presenting multiple dimensions of data in columns.

Information Entry Forms

These forms are used to provide varying amounts of preformatted information, usually short answers to questions. This is a common layout for a detail section in a master/detail layout.

Editing Objects

A variety of update methods pertain to a master/detail layout. This pattern outlines those methods, as well as master/detail use in an update context.

 
Related Guidelines
Return to Top

Form Layout

Guidelines for form layout

Headers

Guidelines for headers and subheaders

Tables

Guidelines for the table component

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