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.
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;
}
}
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
}
You can adjust configs available through the Toolbar pop-up windows. See how to:
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.
You may be interested in the following articles: