[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.
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).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: "https://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" } }); } } });