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/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.

TabObject

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`.

Examples

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

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

beforetoolbarcreated

Data passed to the handler

TabObject

Examples

See also