vSphere Web Client Environment
The design of your solution will make use of the three major areas of vSphere Web Client:
- Navigator—The primary navigation mechanism
- Workspace—The main canvas for your solution
- Global sidebar—A collapsible dock for the Work in Progress, Recent Tasks, and Alarm portlets
The vSphere Web Client is displayed within a web browser at a default size of 1024 by 768 pixels. See Window Size for more information.
The Navigator is what its name implies--the primary navigation mechanism within the vSphere Web Client environment. Selecting an item in the Navigator drives the display of information in the workspace.
The Home (top-level) of the Navigator provides links to major features and solutions. You can include one link at the Home level of the Navigator, and this link must navigate to your solution home page. The Home level of the Navigator also provides access to functions such as Administration, Roles and Permissions, and so on.
The Navigator supports two primary mechanisms for finding objects: inventory trees and inventory lists. In an inventory tree, users traverse a hierarchically-arranged collection of objects. Inventory lists enable users to browse objects by type.
When the user selects an object in the Navigator, information about that object appears in the main workspace. The workspace title matches the text in the Navigator to reinforce the connection.
The workspace (also known as the content area) is the main area in which your solution displays information. The Home page is the initial page the user sees in the workspace. Your icon on this page helps users get to your object inventory faster.
The workspace supports a number of layouts to help users quickly and efficiently navigate data. Use the layout that best matches your solution's needs. The workspace is read-only to prevent users from accidentally changing data.
If your solution details are simple enough, your best choice is to display the data in a single pane.
For larger amounts of data, you can separate the information into logical, related groups, and present each group in its own tab. This pattern is beneficial when your information does not fit or might be too overwhelming to display in the available real estate. This pattern is used for the details and actions for an inventory object.
Tabs + Tab Bar
You can use a tab bar to further categorize data within a tab. The tab bar is visually distinct from the top-level tabs to avoid confusion.
Tabs + Tab Bar + TOC/Detail View
If a third level of navigation is required for a clean segmentation of data, provide a table of contents on the left of the workspace. The detail view on the right presents more information about the item the user selected in the TOC.
vSphere Web Client has several predefined views for presenting object data in the workspace.
A solution-specific view is a list of the objects specific to your inventory. For example, you can list the hosts made only by your solution (and not by other vendors). This view enables navigation to an object's details, where users can view and manage the object.
Object details are presented in a structure of five tabs:
- Getting Started—Introduces users to the object and provides access to getting started actions and help topics
- Summary—Shows high-level characteristics about the object, including its name and location
- Monitor—Helps users understand usage, alarms, issues, and remediation actions
- Manage—Allows users to view and edit system configurations for an object
- Related Objects—Shows the inventory of peer and children objects that influence the state of the object
As users move between like objects in the Navigator, the context in the workspace remains the same. This pattern of navigation is known as "sticky" navigation. For example, if a user views the Manage > Settings tab for an object named "VM_one" and then navigates to an object named "VM_two," the workspace opens to the Manage > Settings for VM_two.
Your solution can also present a workflow within the workspace that is not object centric. For example, your view can summarize information from many different sources in the environment or display information from outside the environment. This free-form data view need not follow the tab structure.
Within the Global sidebar, users see system information that they must monitor frequently. This information is divided into three portlets: Recent Tasks, Work in Progress, and Alarms. While you can add solution-specific items into the portlets, you cannot create a new portlet. This preserves screen real estate.