vSphere Design Standards

Master/Detail View

A master/detail view includes a datagrid and a detail view of the currently selected list item.

Usage

Use a master/detail view when users need to see more information about the data in a datagrid than just a few key attributes.

Within the common tab structure in vSphere Web Client, you can use the master/detail view in the Manage and Monitor tabs only. You can also use the master/detail view in dialogs and wizards.

Guidelines

Layout

Orient the two views in a way that makes best use of the screen real estate. Typically, the details view is placed below the master list.
Strive to use equal amounts of screen real estate for the master list and detail view.
Use a split bar between the master list and detail view to enable users to adjust the relative sizes of the views.

Selection

Select the first line in the master list by default and show information for that object in the detail view.
When the user selects an object in the master list, show the the details of that object in the detail view.
If the user selects multiple objects, show a message in the detail view. For example, "The detail view can only show the details for one object at a time."

Master List

Follow the guidelines presented in the Datagrids standard.
Avoid horizontal scrolling.

Detail View

Start the detail view with a header. Preferably, match the text of the header to the text of the identifying column of the master list, typically the first column.
Display the details in a form that best matches your needs, for example, a datagrid, tabbed pane, stack view, portlet, or graphic.
Use bold font and sentence-style capitalization for the header. Alternatively, use dark gray text.
Repeat some of the key attributes shown in the master list to help orient users in the detail view.
Use the full horizontal width of the detail view and limit the amount of vertical scrolling.
Never require horizontal scrolling.

The following table shows several forms for the detail view. Click a thumbnail for a larger image. For more information, see the standard for the specific UI component.

Datagrid