Need a special offer?Find out if your project fits.
+
All documentation
API reference
  • API Reference for older versions
  • 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"
            }
          });
        }
      }
    });

    See also

    Customizing the Toolbar