[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.
Parameter/Type | Description |
---|---|
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. |
This object describes a Toolbar tab. It has the following properties:
Property/Type | Description |
---|---|
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 . |
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"
}
});
}
}
});