Master/Detail View

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


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.



  • 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.


  • 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.


Tabbed Pane

Stack Editor





Visual Specification

Related Topics

Average (0 Votes)