Menu Bar

Add additional icons into the menu bar that can open a slide out panel or display a component in the content area like the built in dashboard.

The icon can refer to an existing icon bundled with Visallo, or one registered with registerFile in a plugin. For best results, use a white mono-chromatic icon.

Tutorial

Web Plugin

Register the plugin, a component for the pane, and a template for the Welcome to Visallo card.

app.registerJavaScript("/org/visallo/examples/menubar/plugin.js", true);
app.registerJavaScriptComponent("/org/visallo/examples/menubar/Pane.jsx");
app.registerJavaScriptTemplate("/org/visallo/examples/menubar/welcome.hbs");

Register Extension

Register the menu bar extension by pointing to the component and template. This one will use a bundled icon.

visallo.registry.registerExtension('org.visallo.menubar', {
    title: i18n('org.visallo.examples.menubar.title'),
    identifier: 'org-visallo-examples-menubar',
    action: {
        type: 'pane',
        componentPath: 'org/visallo/examples/menubar/Pane'
    },
    welcomeTemplatePath: 'hbs!org/visallo/examples/menubar/welcome',
    icon: '../img/glyphicons/white/glyphicons_066_tags@2x.png',
    options: {
        placementHint: 'top',
        placementHintAfter: 'search',
    }
});

Component

Create a basic React component that displays some text and a button. Add some padding around the panel to match other panes.

define([
    'react'
], function(React) {
    'use strict';

    const MenubarExamplePane = React.createClass({
        render() {
            return (
                <div style={{padding: '1em'}}>
                    Example Panel
                    
                    <button 
                        style={{display: 'block', width: '100%'}}
                        class="btn">Example</button>
                </div>
            )
        }
    });

    return MenubarExamplePane ;
});

results matching ""

    No results matching ""