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.

The <delegate> object requires a <className> property and an <object> element that contains only an embedded <root> element. The <className> property specifies one of the following, depending on whether the action is modal or headless:

com.vmware.vsphere.client.HtmlPluginHeadlessAction for a headless action
com.vmware.vsphere.client.HtmlPluginModalAction for a modal (UI) 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.
`<closable>`	boolean	Hides the top right close button for the dialog. The default value of this property is `true`.

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 specifying com.vmware.vsphere.client.HtmlPluginHeadlessAction as the delegate class name. of the action extension point.

The value of the actionUrl parameter has the following form.
```
/ui/html-sample/rest/vm-headless-ction
```
The value of the jsonData parameter is a JSON map of parameters passed to the actions controller, or null if no parameters are needed.

HTML-Based Headless Action Extension Definition

The following example shows an extension definition for an HTML-based headless action extension.


<!-- Plugin Action set -->
<extension id="com.vmware.samples.htmlsample.vm.actionSet">
  <extendedPoint>vise.actions.sets</extendedPoint>
   <object>
      <actions>
...
         <!-- Plugin Headless Action -->
         <com.vmware.actionsfw.ActionSpec>
            <uid>com.vmware.samples.htmlsample.vm.headless.action</uid>
            <label>#{vmHeadlessActionLabel}</label>
            <delegate>
               <className>com.vmware.vsphere.client.HtmlPluginHeadlessAction</className>
               <object><root>
                  <actionUrl>/ui/html-sample/rest/vm-headless-action</actionUrl>
               </root></object>
            </delegate>
         </com.vmware.actionsfw.ActionSpec>
...
      </actions>
   </object>
   <metadata>
      <objectType>VirtualMachine</objectType>
   </metadata>
</extension>

When the headless action is invoked the JavaScript API makes a POST request to the actions controller on the Tomcat 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.

When you define a UI action, you can supply an additional property for the <delegate> class to specify whether the dialog displays an X button to close the dialog. The default is to display an X button. To suppress the X button, add the closable property with a value of false.

HTML-Based UI Action Extension Definition

The following example shows an extension definition for an HTML-based UI action extension.

<!-- Plugin Action set -->
<extension id="com.vmware.samples.htmlsample.vm.actionSet">
  <extendedPoint>vise.actions.sets</extendedPoint>
   <object>
      <actions>
...
         <!-- Plugin UI Action -->
         <com.vmware.actionsfw.ActionSpec>
            <uid>com.vmware.samples.htmlsample.vm.modal.action</uid>
            <label>#{vmUiActionLabel}</label>
            <delegate>
               <className>com.vmware.vsphere.client.HtmlPluginModalAction</className>
               <object><root>
                  <actionUrl>/ui/html-sample/index.html?view=vm-modal-action</actionUrl>
                  <dialogTitle>#{vmActionModalTitle}</dialogTitle>
                  <dialogSize>600.250</dialogSize}
                  <closable>false</closable>
               </root></object>
            </delegate>
         </com.vmware.actionsfw.ActionSpec>
...
      </actions>
   </object>
   <metadata>
      <objectType>VirtualMachine</objectType>
   </metadata>
</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.

locale - The current locale that is used.

After the dialog form is submitted or the operation is canceled, the code calls modal.close(data).