Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Code Block
languagejs
titlecsMyFirstPlugin.js, adding action to existing UI
 cloudStack.plugins.csMyFirstPlugin = function(plugin) {
      // Add an action to an existing section
      // First, find the correct path to the respective section you want to extend
      // -- standard practice in the UI is to put all actions under the detail view
      var section = cloudStack.sections.events;
      var actions = section.sections.events.listView.detailView.actions;
      // Then, define a new action, using standard widget syntax
      // (see other actions in CloudStack code as examples)
      actions.pluginAction = {
          label: 'Test plugin action', // Label that will appear as alt tag/quickview label
          messages: {
              confirm: function(args) {
                return 'Please confirm you want this test action performed' // This appears before the action runs
              },
              notification: function(args) {
                  return 'Test plugin action' // This will appear in the notifications box when action is performed
              }
          },
          // Determines whether action will be shown/hidden;
          // this is evaluated on load/refresh of detail view
          //
          // return true to show action, false to hide
          preFilter: function(args) {
              var context = args.context; // Stores any existing JSON data loaded into the UI
 
              return isAdmin(); // isAdmin() causes action to only be shown to root admins
          },
          action: function(args) {
              // ... ajax calls, etc here
              //
              // -- call args.response.success() when action is completed,
              //    or args.response.error(errorMsg) if there was an error, and pass in errorMsg to display
              args.response.success();
          }
      }
  };

 

To add a new action icon, just edit csMyFirstPlugin.css and add/override any required styling, using the CSS tools in Firebug/Web Inspector as a reference.

For example, to add an icon for the new action we added to the events detail view:

Code Block
languagejs
titleAdding an action icon
/* Put your CSS here */
.detail-group table td.detail-actions .pluginAction a span.icon {
    background: url('action-icon.png') no-repeat 0 0;
}