Datagrids
Datagrids are multi-column lists used throughout vSphere Web Client to display information about inventory objects. Datagrids can contain numerical data, text, icons, controls, or any other information that is multivariate in nature.
Usage
A datagrid presents data in rows and columns, making it a good choice for displaying objects with multiple properties. A benefit of displaying large lists of objects in a datagrid is that users can sort and filter the data display.
Guidelines
General
Use these guidelines for determining which features to include in your datagrid:
- If the datagrid lists first-class objects, such as the datagrids in the Related Objects tabs, include the toolbar, filter, find, count, export, and copy controls.
- If the datagrid lists second-class objects or other data, include only the elements required by your design. Datagrids with second-class objects often appear in the Monitor and Manage tabs and inside dialogs and wizards.
Toolbar
The toolbar provides a set of actions that users can take in the current context.
- Provide the most frequently-used actions that make sense for the datagrid.
- Organize the actions into three segments, divided by separators: global actions, actions related to the selected objects, and Actions menu. The Actions menu is for all actions that users can perform on the objects.
- Don't place destructive actions in a toolbar that appears in the main workspace. Destructive actions are only allowed when the datagrid appears in a dialog or wizard because these windows give users the option to cancel the action.
- Display up to seven actions in the toolbar. More than seven crowds the toolbar.
- Use icons (as opposed to text labels) if the toolbar includes more than three actions.
- Disable actions that don't apply for the objects currently selected in the datagrid. The most common reasons for disabling an action are the user doesn't have permission to perform an action and the action is not available due to the state of the object.
- Provide tooltips for all actions in the toolbar. Use only as much information as needed to ensure that users understand the consequences of the action. In some cases, the name of the action is enough, for example, Close All. In other cases, you must add words to help users understand the consequences of the action.
Filter
You can add a filter control so that users can view only the rows that meet a specified criterion. This control appears above the datagrid, on the right. Users can search all columns or narrow their search to a subset of columns.
The search engine performs a plain text search and does not support searching for special characters. Search results are not case sensitive.
For multiple criteria, the search engine performs an OR search, returning text that matches any of the criteria. For example, when filtering a list of virtual machines over the Name and State columns, and the search criterion is "san on," any virtual machine with a name or state containing "san" or "on" is shown.
Find
With the Find control, users can search within the datagrid for specific text. This control appears in the lower left of the datagrid.
By default, highlighting of found items is sequential--users press the Return key to move to the next found item. Users can search all columns or narrow their search to a subset of columns.
The Find control performs a plain text search and does not support searching for special characters. Search results are not case sensitive. Multiple search criteria are not allowed.
In this example, the user searched for the text "on."
Export and Copy
The Export control ( 
) opens a dialog for exporting the contents of the datagrid to a comma-separated values (CSV) file. The Copy control(
) has options for copying items to the clipboard. When present, these controls appear in the lower right corner.
Item Count
The item count shows the number of items in the grid (for example, 15 items) or, if the datagrid is filtered, the number of filtered items out of the entire list (for example, 2 of 15 items).
Columns
- If the datagrid contains first-class objects, make the first three columns show Name, State, and Status. This pattern appears most often in the Related Objects tab.
- By default, show only the subset of columns that are meaningful to the user.
- Set the column width to a default size large enough to accommodate the critical data in the column. For example, in a column that shows state, ensure that the column displays the entire state, "Power On" or "Power Off," and is not truncated to "Powered O…"
- Allow users to drag and rearrange all columns except the first column.
- Favor text only for column headers. You can use an icon instead of text only if the column cells contain icons and the meaning of the icon is clear.
- Use title-style capitalization for column headings.
- Don't put units (for example, MB) in the column headings. The units in the cells might differ (for example, 10 MB and 20 GB).
- When a column shows a count of objects, set the column width just wide enough for the count and use the object name for the column header. The following examples show how to shorten the column header:
Original: Number of VMs
Rewrite: VMs
Original: CPU Count
Rewrite: CPUs
Original: # Datastores
Rewrite: Datastores
Rows
- Select the first row by default so that the actions for the objects in the datagrid are displayed. This way, the user can easily see the actions available on selected objects and whether the datagrid allows inline editing.
- Ensure that clicking in an empty row deselects the selected row.
- If the selected row has a first-class object in the first column, turn the name of the object into a hyperlink that opens the object.
Cell Contents
Within a datagrid, the data in each cell is automatically left-justified.
- If your use case requires it, enable users to modify data directly in a datagrid cell. See Inline Editing for details.
- Use wording specific to the state over "Yes" and "No." For example, use "Enabled" and "Disabled" to indicate the state of a user account. Specific wording aids user comprehension.
- If the cell contains an icon only, provide a tooltip on the icon. The tooltip should state the value of the icon, and the value should be filterable. For example, if only icons are used in a Status column, ensure that the user can filter by entering "error" or "warning" or "normal" as search criteria.
- If the data for the cell is not available, use a dash mark (--).
- When a cell contains a long string, truncate the text with an ellipsis (…) and optionally provide a tooltip that shows the full string.
- When a cell contains multiple strings, allow the contents to wrap, up to three lines. For more than three lines, either truncate the data or seek a shorter form of the data.
- Because it is not feasible for users to select text in individual cells, include an Export action as an alternative.
- Avoid placing multiple data objects inside a single cell. Doing so requires extra action on the part of the user to see the full contents of the cell, changes the layout of the grid, and might cause information in other cells to be obscured. If you have a use case that requires multiple, distinct values in a cell, follow these guidelines:
- Include the number of items represented. Alternatively, use the string "Multiple."
- Link the cell contents to detailed information.
- Consider using a pop-up window or master/detail view to show the full contents.
Scrolling
- Vertical scrolling of datagrids behaves the same as vertical scrolling of other list components.
- Horizontal scrolling of datagrids is allowed, but not encouraged. Whenever possible, limit the amount of information in a datagrid to that which can fit inside the default size of the design area. See the Window Size standard for the dimensions of the design area for the main content area, dialogs, and wizards when the vSphere Web Client is set to the minimum screen size.
- Support locking of the first column so it does not scroll.
Multiple Views of the Data
Showing different views of the same data can help users better understand the relationships of the objects in the datagrid. You can facilitate multiple views by using a drop-down menu. In this example, users can choose to view storage providers or systems.
Inline Editing
- Allow users to modify data directly in the datagrid cell only when the datagrid appears in a dialog or wizard. A datagrid in the main content area is read-only to prevent users from accidentally changing a value in one of the cells.
- Make the control (for example, text box, combo box, or drop-down menu) as large as the cell in which the control appears.
- If the input can be multiline but shows up as a single line in the datagrid, allow the editing area to extend outside the cell for the duration of the editing. Snap back to the normal cell size when the focus leaves the cell.
Hierarchical Datagrids
- Use a hierarchical datagrid when an object or target entity has children that share properties with a parent.
- Include the hierarchy in the first column.
- Avoid going more than one level deep.
- Ensure that sorting of children entities is within the scope of the parent.
Visual Specification
