Defining Individual Actions for HTML-Based Action Extensions

HTML-based extensions do not use the <command> property of the ActionSpec object. Instead they contain a <delegate> object.

HTML-based extensions use delegated actions instead of the command classes used by Flex-based extensions. The HtmlActionDelegate object requires a <className> property and an <object> element that contains only an embedded <root> element.

The <className> property must specify the HtmlActionDelegate object for HTML-based extensions.

<className>com.vmware.vsphere.client.htmlbridge.HtmlActionDelegate</className>

The <root> element specifies the UI dialog box used to initiate the HTML-based action.

The following table lists the properties that you can use in the <root> element.

Property	Type	Description
`<actionURL>`	string	Identifies the HTML resource to be displayed. The value can be an absolute HTTPS URL or a bundle context path. If the value is a bundle context path, the relative URL must end with the .html extension to enable session authentication. For absolute URLs, the framework does not use session authentication.
`<dialogTitle>`	string	Specifies the title of the dialog box. Add this property to the `<root>` element, or the action is treated as headless. Can be localized.
`<dialogSize>`	string	Indicates the width and height of the dialog box, in pixels, separated by commas.
`<dialogIcon>`	string	Specifies an optional icon resource for the dialog.
`<showCloseButton>`	boolean	Hides the top right close button for the dialog. The default value of this property is `false`.

There are two types of HTML-based action extensions. One type, known as a UI action, displays a modal dialog box for user input or confirmation before submitting a service request. The other type, known as a headless action, initiates a request to a service without additional user input. An extension definition for a UI action specifies the size and title of the dialog box, while a headless action definition omits the dialog box properties.

Invoking Headless HTML Actions

Your HTML-based action extension can invoke headless actions on its own initiative by calling the WEB_PLATFORM.callActionsController(url, jsonData) JavaScript function.

■

The value of the url parameter has the following form.

/vsphere-client/chassis/rest/actions.html?actionUid=<actionUid>

■

The value of the jsonData parameter is a JSON map of parameters passed to the actions controller, or null if no parameters are needed.

Example: HTML-Based Headless Action Extension Definition

The following example shows an extension definition for an HTML-based headless action extension. The extension must use a <delegate> object instead of the <command> object used by a Flex-based extension. The action in this definition is associated with a custom object type called Chassis.

<extendedPoint>vise.actions.sets</extendedPoint>
<object>
   <actions>
      <com.vmware.actionsfw.ActionSpec>
         <uid>com.vmware.samples.chassis.deleteChassis</uid>
         <label>#{chassis.deleteAction}</label>
         <icon>#{deleteChassis}</icon>
         <delegate>
            <className>com.vmware.vsphere.client.htmlbridge.HtmlActionDelegate</className>
            <object><root>
               <actionUrl>/vsphere-client/chassis/rest/actions.html</actionUrl>
            </root></object>
         </delegate>
      </com.vmware.actionsfw.ActionSpec>
...

When the headless action is invoked the HTML bridge makes a POST request to the actions controller on the Virgo server, using the actionUrl property. The following parameters are added to the URL.

■	actionUid - The `<uid>` of the ActionSpec object defined in the plugin.xml file
■	targets - A comma-separated list of `objectIds`

By default, the targets parameter takes only one objectId. To specify more than one objectId, set the flag acceptsMultipleTargets to true.

In this example, the full URL takes the following form.

/vsphere-client/chassis/rest/actions.html?actionUid=com.vmware.samples.chassis.deleteChassis&targets=objectId

UI Actions

You can implement a UI action that displays a modal dialog in response to a menu click or a toolbar button. You can implement also other types of pop-up dialogs that are specific to an object view or a global view. To open such modal dialogs, invoke the WEB_PLATFORM.openModalDialog(title, url, width, height, objectId, scrollPolicy, showCloseButton) JavaScript function. Note that such modal dialogs cannot be nested and the view from which they are invoked disappears temporarily until they are closed.

Example: HTML-Based UI Action Extension Definition

The following example shows an extension definition for an HTML-based UI action extension. The extension must use a <delegate> object instead of the <command> object used by a Flex-based extension. The action in this definition is associated with a custom object type called Chassis.

<extension id="com.vmware.samples.chassis.listActionSet">
   <extendedPoint>vise.actions.sets</extendedPoint>
   <object>
      <actions>
         <com.vmware.actionsfw.ActionSpec>
            <uid>com.vmware.samples.chassis.createChassis</uid>
            <label>#{chassis.createAction}</label>
            <icon>#{addChassis}</icon>
            <delegate>
               <className>com.vmware.vsphere.client.htmlbridge.HtmlActionDelegate</className>
               <object><root>
                  <actionUrl>/vsphere-client/chassis/resources/createChassisDialog.html</actionUrl>
                  <dialogTitle>#{chassis.createAction}</dialogTitle>
                  <dialogSize>500,400</dialogSize>
               </root></object>
            </delegate>
            <privateAction>true</privateAction>
         </com.vmware.actionsfw.ActionSpec>
      </actions>
   </object>
</extension>

When the action is invoked the platform opens a modal dialog containing the HTML document specified in the actionUrl property. The following table contains the parameters that are added to the URL.

■	actionUid - The `<uid>` of the ActionSpec object defined in the plugin.xml file.
■	targets - A comma-separated list of `objectIds`.
■	locale - The current locale that is used.

By default, the targets parameter takes only one objectId. To specify more than one objectId, set the flag acceptsMultipleTargets to true.

In this example, the full URL takes the following form

/vsphere-client/chassis/resources/createChassisDialog.html?actionUid=com.vmware.samples.chassis.createChassis&targets=objectId&locale=en

The dialog script uses the REST API to GET or POST data requests. For instance, to get object properties by using the Data Access API, you use a request similar to the following.

/vsphere-client/htmltest/rest/data/properties/objectId?properties=properties-list

After the dialog form is submitted or the operation is canceled, the JavaScript code calls WEB_PLATFORM.closeDialog().