Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Customizing the Toolbar

    This guide describes how to customize the Toolbar in Flexmonster.

    The Toolbar is a collection of the most commonly used Flexmonster features (e.g., connect to a data source, open a report, save a report). Here is how the Toolbar looks by default:

    Default Toolbar view

    How to enable the Toolbar

    To enable the Toolbar, set the toolbar parameter to true when calling the new Flexmonster() constructor:

    const pivot = new Flexmonster({
      container: "pivotContainer", 
      componentFolder: "node_modules/flexmonster/",
      toolbar: true
    }); 

    Ensure that your flexmonster/ folder includes the toolbar/ folder, and that toolbar/ is not empty. See how to get Flexmonster.

    Note To get a reference to the Toolbar after Flexmonster is initialized, use the toolbar property of the component’s instance. See an example on JSFiddle.

    How to customize the Toolbar

    The Toolbar can be customized using the beforetoolbarcreated event. Inside its handler, you can get all tabs using the toolbar.getTabs() method. It returns an array of TabObjects that describe Toolbar tabs. Modify this array to add, remove, and customize tabs and buttons.

    This guide shows how to remove and add a tab. For all examples of the customization, see the Examples page.

    How to remove a tab

    Step 1. Subscribe to the beforetoolbarcreated event and assign an event handler (e.g., customizeToolbar).

    Step 2. Inside the handler, get an array of all tabs using the toolbar.getTabs() method.

    Step 3. Filter the necessary tab from the array by the tab's id.

    The following example will remove the Connect tab:

    const pivot = new Flexmonster({
      container: "pivot-container", 
      componentFolder: "node_modules/flexmonster/",
      toolbar: true, 
      beforetoolbarcreated: customizeToolbar 
    }); 
    
    function customizeToolbar(toolbar) { 
      // Get all tabs
      let tabs = toolbar.getTabs(); 
      toolbar.getTabs = function () {
        // Remove the Connect tab using its id
        tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
        return tabs; 
      } 
    } 

    Open the example on JSFiddle.

    How to add a new tab

    Step 1. Subscribe to the beforetoolbarcreated event and assign an event handler (e.g., customizeToolbar).

    Step 2. Inside the handler, get an array of all tabs using the toolbar.getTabs() method. 

    Step 3. Insert a TabObject into the array to add a new tab:

    const pivot = new Flexmonster({ 
      container: "pivotContainer", 
      componentFolder: "node_modules/flexmonster/",
      toolbar: true,
      beforetoolbarcreated: customizeToolbar 
    }); 
    
    function customizeToolbar(toolbar) { 
      // Get all tabs 
      let tabs = toolbar.getTabs(); 
      toolbar.getTabs = function () {
        // Add a new tab 
        tabs.unshift({
          // An attribute that is used for CSS styling
          id: "fm-tab-newtab",
          // The tab’s label
          title: "New Tab",
          // A  function that handles clicks on this tab
          handler: newTabHandler,
          // An HTML element with a tab icon
          // You can choose an icon defined in flexmonster.toolbar.js
          icon: this.icons.open 
        });
        return tabs;
      }
    }
    
    function newTabHandler() {
      // Add new functionality
    }

    Try this example on JSFiddle.

    Further customization

    For further customization, we recommend exploring the existing code for the Toolbar. In the project with Flexmonster, open the flexmonster/toolbar/flexmonster.toolbar.js file and find the function expression that starts with the following line of code:

    FlexmonsterToolbar.prototype.getTabs = function() {

    Examine this function to understand how the Toolbar works and how to customize it.

    If necessary, see how to get Flexmonster.

    In addition, you can change the appearance of the Toolbar (e.g., colors or font styles) by applying a CSS theme.

    What’s next?

    You may be interested in the following articles: