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:

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 Live example.

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; 
  } 
}

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

Live example

How to customize pop-up windows

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

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: