Upgrading JavaScript API calls for vSphere Client SDK version 6.7
Article ID: 337653
Updated On:
Products
VMware vSphere ESXi
Issue/Introduction
This Knowledge Base article shows the mapping of method calls between the current API and the new API introduced with vSphere 6.7.
Symptoms:
The existing JavaScript API is deprecated as of vSphere 6.7, and partners who use the existing JavaScript API need to start converting their code, testing, and preparing for distribution to their customers using the new API.
Failure to prepare will mean their customers might get errors at a certain point in the future when they migrate to newer versions of the vSphere Client.
Symptoms:
The existing JavaScript API is deprecated as of vSphere 6.7, and partners who use the existing JavaScript API need to start converting their code, testing, and preparing for distribution to their customers using the new API.
Failure to prepare will mean their customers might get errors at a certain point in the future when they migrate to newer versions of the vSphere Client.
Environment
VMware vSphere Client 6.5.x
Cause
The current API is deprecated, as of the vSphere 6.7 release. Partners who plan to maintain compatibility with the vSphere Client SDK in future releases need to transition their code to use the new API.
Resolution
The vSphere Client SDK version 6.7 introduces a new JavaScript API that simplifies plug-in development.
The JS APIs are divided into namespaces/segments based on the H5C areas they are related to, namely:
Client Application JS API
Event JS API
The following old JS APIs do not have a counterpart in the new JS APIs since their usage is handled in another way or no longer supported:
The JS APIs are divided into namespaces/segments based on the H5C areas they are related to, namely:
- Modals
- Applications
- Events
Note: Old APIs are no longer needed. Check the new HTML SDK sample for instructions on how to use the current set of APIs and additional libraries to achieve the same results.
To get/use the new APIs:
Usage: window.frameElement.htmlClientSdk.<namespace>.<api>
Modal JS API
| Old JS API | New JS API | Comments |
|---|---|---|
| openModalDialog(title, url, width, height, objectId) | modal.open(configObj: ModalConfig): void | Opens an application modal. Where configObj is of type ModalConfig:{ url: string title?: string, size?: {width:number, height:number}, closable? boolean, onClosed?: callbackFn, customData?: any, contextObjects?: any[] } Note: The size should be in pixels. |
| closeDialog() | modal.close(data: any): void | Closes the modal. The modal is the one corresponding to the iframe this API was called from. If data has been provided it will be passed to onClose callback function if such was specified in modal.open |
| setDialogSize(width,height) setDialogTitle(title) | modal.setOptions(options: DynamicModalOptions): void | Sets options to the modal. The modal is the one corresponding to the iframe this API was called from options is of type DynamicModalConfig { title?: string, height?: number } |
| modal.getCustomData(): any | Returns the customData that was provided upon opening the modal or null. |
Client Application JS API
| Old JS API | New JS API | Comments |
|---|---|---|
| getObjectId() getActionTargets() | app.getContextObjects(): any[] | Returns current context objects: • In global views, the result is empty because global views are not associated with any vSphere object • In views that are associated with a particular vSphere object, the result contains a JavaScript object with a field named 'id' - the ID of the selected vSphere object • In modals opened through a SDK call to htmlSdk.modal.open(configObj) the result is the value of configObj.contextObjects or an empty array if configObj.contextObjects is undefined • In modals opened through actions defined in the plugin.xml file the result is an array of context objects representing the targets of the invoked action. Each context object is a JavaScript object that contains a field named 'id' which is the id of the corresponding target object. Note: The result will be an empty array if there are no target objects. |
| sendNavigationRequest(targetViewId, objectId) | app.navigateTo(options: NavigationOptions): void | Navigates to a specified view with an optional custom data which will be passed to the view. Where options is of type NavigationOptions { targetViewId: string, objectId?: string, customData?: any } When navigating to a global view, the "objectId" property can be skipped. |
| app.getNavigationData(): any | Retrieves the navigation data passed to the current view by the navigateTo() API. If you have called: htmlSdk.app.navigateTo({ targetViewId: "com.vmware.samples.chassisa.summary", objectId: "urn:vri:samples:ChassisA:chassis-3", customData: {name: "test", filter: true} }); Then, you can use: htmlSdk.app.getNavigationData(); and you will get: {name: "test", filter: true} | |
| getClientType() getClientVersion() | app.getClientInfo(): ClientInfo | Returns the type and version of H5 Client. The returned object is of type ClientInfo { type: string, version: string } |
| getLocale() | app.getClientLocale(): string | Returns the current locale of H5 Client. |
Event JS API
| Old JS API | New JS API | Comments |
|---|---|---|
| setGlobalRefreshHandler(callbackFn) | event.onGlobalRefresh(pluginCallBackFunc: function) | Registers a global refresh handler. The plugin callback function is called when the Global Refresh button of H5 Client is clicked. |
The following old JS APIs do not have a counterpart in the new JS APIs since their usage is handled in another way or no longer supported:
- getString() - Use the getClientLocale() API to retrieve the current client locale. Then use a framework of choice to localize your plug-in. Refer to HTML Sample plug-in for an example.
- getUserSession() - Use the getUserSession() JAVA API to retrieve the current user session.
- callActionsController() - No longer needed, you can just make GET/POST requests to your controller.
- sendModelChangeEvent() - No longer supported.
Feedback
Yes
No
Powered by
