FusionGPS: Design Patterns: Record Navigation Pattern Set: Master Detail

Master Detail

Version 2.0.0.2

Record Navigation Pattern Set


Description

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

	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

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

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

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

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