...
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
/* Put your CSS here */
.detail-group table td.detail-actions .pluginAction a span.icon {
background: url('action-icon.png') no-repeat 0 0;
} |