beforetoolbarcreated

[starting from version: 2.3]

It is triggered before the creation of the Toolbar. Use this event to override the default Toolbar and customize it without changing flexmonster.toolbar.js.

Data passed to the handler

toolbar – Object. Has the following properties:

• getTabs – Function. Use it to override existing tabs and set custom ones. Each tab object should have the following structure:
  • title – String. The tab’s label.
  • id – String. Id used in CSS styles.
  • handler – Function. The function that handles clicks on this tab.
  • icon – String. The HTML tag containing your custom icon for this new tab. You can choose one of the basic vector icons defined in the flexmonster.toolbar.js file.
  • args (optional) – Any. Arguments to pass to the handler.
  • menu (optional) – Array. Dropdown menu items.
  • mobile (optional) – Boolean. When set to false, the tab does not show on mobile devices. Default value: true.
  • ios (optional) – Boolean. When set to false, the tab does not show on iOS devices. Default value: true.
  • android (optional) – Boolean. When set to false false, the tab does not show on Android devices. Default value: true.
  • rightGroup (optional) – Boolean. When set to true, the tab is positioned on the right side of the Toolbar. Default value: false.
• showShareReportTab – Boolean. Indicates whether the Share tab is shown on the Toolbar. This tab can be used to share a report. Default value: false (the tab is hidden).
  If needed, you can set custom options that will be used when sharing a report (see the second example below). For the options’ structure, refer to the Share Report Connection Object.

Examples

1) Hide all default tabs and add a new tab to load a CSV file:

let pivot = new Flexmonster({ 
    container: "pivot-container", 
    toolbar: true, 
    beforetoolbarcreated: customizeToolbar 
}); 

function customizeToolbar(toolbar) { 
    // override tabs 
    toolbar.getTabs = function() { 
        let tabs = []; 
        tabs.push({ 
            id: "fm-tab-connect",
            icon: this.icons.connect,
            title: this.Labels.connect,
            handler: function() {
                this.pivot.connectTo({
                    type: "csv",
                    filename: "http://cdn.flexmonster.com/data/data.csv"
                }); 
            }
        });
        return tabs;
    }
} 

Try the example on JSFiddle.

2) Setting custom options for report sharing:

let pivot = new Flexmonster({
    container: "pivot-container",
    toolbar: true,
    beforetoolbarcreated: toolbar => {
        toolbar.showShareReportTab = true;
        toolbar.shareReportHandler = () => {
            toolbar.pivot.shareReport({
                url: "https://flexmonster-data-server.com:9500",
                requestHeaders: {
                    "MyHeader": "MyHeaderValue"
                }
            });
        }
    }
});

See also

Customizing toolbar tutorial