Communications Among UI Components in the vSphere Client

The vSphere Client user interface loads both its own components and the components belonging to the plug-in user interface. The vsphere-ui service reads the plug-in manifest file to determine where it should insert plug-in components in the user interface.

The user interface components loaded in the browser are organized as shown in the following diagram.

Figure 1. User Interface with a Sandboxed Plug-in
This diagram shows communications between components that run in the browser.
Paths:
  1. Internal JavaScript methods
  2. window.postMessage() method in browser
  3. Public JavaScript methods

The plug-in user interface operates within its own IFrame, isolated from other plug-ins. The plug-in loads a copy of the vSphere Client JavaScript API client library, which is its sole connection to other client code. The plug-in code communicates with the client library code using JavaScript method calls.

The client library communicates with the sandbox component that the vSphere Client provides to interface with the plug-in UI components. The communication with the sandbox uses the browser's window.postMessage() API. This makes it possible for the IFrame and its parent window to be loaded from different origins.
Note: In the vSphere 6.7 Update 1 release of the vSphere Client, the IFrame and its parent window share the same origin. Do not depend on this to remain the same in future releases.

The plug-in sandbox communicates with other components of the vSphere Client user interface by using internal Javascript APIs.

If the vSphere Client has more than one plug-in active, each plug-in is allocated its own sandbox, and operates within its own IFrame, as shown in the following illustration.

Figure 2. User Interface with Two Plug-ins in Separate Sandboxes
This diagram shows communications between components in the browser when two plug-ins run in separate iFrames.
Paths:
  1. Internal JavaScript methods
  2. window.postMessage() method in browser
  3. Public JavaScript methods

In this case, each plug-in UI communicates with its own back-end server.