☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation

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. Learn more in this guide: Customizing the Toolbar.

Data passed to the handler

Parameter/TypeDescription
toolbar
Object
Contains information about the Toolbar.
toolbar.getTabs
Function
Use it to override existing tabs and set custom ones. Each tab is described by a TabObject.
toolbar.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). For the options' structure, refer to the ShareReportConnectionObject.

TabObject

This object describes a Toolbar tab. It has the following properties:

Property/TypeDescription
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
optional 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
Any
optional Arguments to pass to the handler.
menu
TabObject[]
optional Dropdown menu items.
mobile
Boolean
optional When set to false, the tab does not show on mobile devices.
Default value: true.
ios
Boolean
optional When set to false, the tab does not show on iOS devices.
Default value: true.
android
Boolean
optional When set to false, the tab does not show on Android devices.
Default value: true.
rightGroup
Boolean
optional When set to true, the tab is positioned on the right side of the Toolbar.
Default value: false.

Examples

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

const pivot = new Flexmonster({ 
container: "pivotContainer",
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: "https://cdn.flexmonster.com/data/data.csv"
});
}
});
return tabs;
}
}

Try the example on JSFiddle.

2) Setting custom options for report sharing:

const pivot = new Flexmonster({
 container: "pivotContainer",
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 the Toolbar