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:

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",
  toolbar: true
}); 

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

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: "pivotContainer",
  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; 
  } 
} 

Live example

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",
  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
}

Live example

How to customize the functionality of an existing 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. Override the handler property of the necessary tab to add the needed functionality.

Check out an example of customizing the export to CSV:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
});

function customizeToolbar(toolbar) {
  // Get all tabs
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    // Find the Export tab
    let exportTab = tabs.find(tab => tab.id == "fm-tab-export");

    // Find the Export to CSV tab
    let exportToCSVTab = exportTab.menu.find(tab => tab.id == "fm-tab-export-csv");

    // Override the Export to CSV tab’s functionality
    exportToCSVTab.handler = () => {
      const fieldSeparator = document.getElementById('CSVFileSeparator').value || ',';
      this.pivot.exportTo("csv", {
        fieldSeparator: fieldSeparator
      })
    }
    return tabs;
  }
}

Live example

How to customize pop-up windows

You can adjust configs available through the Toolbar pop-up windows. See how to:

• Customize the number formatting view.
• Customize the conditional formatting view.

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.

See also

• More examples of how to modify the Toolbar
• Adding localization
• Changing themes
• Defining a format for date and time
• Setting conditional formatting