Dashboard Toolbar Item

Allows custom buttons to be rendered next to the cards configuration button. These buttons (displayed as icons) can send an event on click, or specify content to be rendered in a popover.

Tutorial

Web Plugin

Register resources for the plugin, the component, and the toolbar icon.

app.registerJavaScript("/org/visallo/examples/dashboard_toolbaritem/plugin.js", true);
app.registerJavaScript("/org/visallo/examples/dashboard_toolbaritem/popover.js", false);
app.registerResourceBundle("/org/visallo/examples/dashboard_toolbaritem/messages.properties");
app.registerFile("/org/visallo/examples/dashboard_toolbaritem/trash.png", "image/png");

Register Extension

Register the toolbar extension, specifying the component that will be rendered in a popover on click, and icon.

visallo.registry.registerExtension('org.visallo.dashboard.toolbar.item', {
    identifier: 'org-visallo-examples-dashboard-toolbar',
    canHandle: function(options) {
        return options.extension.identifier === 'org-visallo-web-notifications'
    },
    tooltip: 'My Example Action',
    icon: '/org/visallo/examples/dashboard_toolbaritem/trash.png',
    action: {
        type: 'popover',
        componentPath: 'org/visallo/examples/dashboard_toolbaritem/popover'
    }
});

Create Popover Component

The popover component must be flight component, this one just renders some text. The dashbord handles the creation of the popover and simply renders this component in the content area.

function ExampleToolbarPopover() {

    this.after('initialize', function() {
        this.$node.text('Example Popover');
    });

}

If content is updated in the popover and the size changes, the component should trigger an event to notify the popover parent component. This will adjust the anchor point to match the size change.

this.trigger('positionDialog');

results matching ""

    No results matching ""