Customizing the Toolbar

WebDataRocks Toolbar is designed to make your web reporting experience easier and more convenient. It is possible to customize the Toolbar or create a totally new one to fulfill your requirements.

It is possible to:

• Add new custom tabs to the Toolbar.
• Remove the tabs you don’t need.
• Reorder/change the existing ones.
• Set your custom icons for tabs.

Standard tabs functionality can be found in a Using the Toolbar tutorial.

Important Don’t forget to include into the project the following script:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>

and check if the toolbar property in the pivot instance is set to true.

Let’s see how to customize the Toolbar in practice.

All customization can be made using the beforetoolbarcreated event which is triggered before the Toolbar has been created. Set to it a function which will be responsible for changing the view and functionality of the Toolbar.

How to remove tabs

At first, subscribe to beforetoolbarcreated event. Next, create a function customizeToolbar. It accepts a toolbar as an argument which is used to modify the Toolbar. Retrieve all the tabs using toolbar.getTabs() method. It returns an Array of Objects that describe tabs properties. If you need to remove a certain tab, delete a corresponding Object from the array of tabs.

const pivot = new WebDataRocks({
    container: "#wdr-container",
    beforetoolbarcreated: customizeToolbar,
    report: "https://cdn.webdatarocks.com/reports/report.json",
    toolbar: true
});
 
function customizeToolbar(toolbar) {
    // Get all tabs from the toolbar
    const tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
        // Delete the first tab
        delete tabs[0];
        return tabs;
    }
}

See the full code in our Codepen example.

How to add new tabs

Subscribe to beforetoolbarcreated event. Then create a function customizeToolbar which will add new tabs before the toolbar initialization.

Let’s implement the functionality which will change the theme of the component: add two buttons which will switch between the Default and Light blue themes. In our example, our basic Toolbar icons are used, but you can replace them with the custom ones.

const pivot = new WebDataRocks({
    container: "#wdr-container",
    beforetoolbarcreated: customizeToolbar,
    report: "https://cdn.webdatarocks.com/reports/report.json",
    toolbar: true
});
 
function customizeToolbar(toolbar) {
    // Get all tabs
    const tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
        // There will be two new tabs at the beginning of the Toolbar 
        tabs.unshift({
            id: "wdr-tab-lightblue",
            title: "LightBlue",
            handler: newtabHandlerBlue,
            icon: this.icons.format
        }, {
            id: "wdr-tab-default",
            title: "Default",
            handler: newtabHandlerDefault,
            icon: this.icons.format
        });
        return tabs;
    }
    const newtabHandlerBlue = function() {
        setLightBlueTheme();
    };
    const newtabHandlerDefault = function() {
        setDefaultTheme();
    };
}

The full code with setLightBlueTheme() and setDefaultTheme() functions is available in our Codepen example.

Now the two new tabs are added to the Toolbar. Add any number of tabs by following the same logic.

Even more advanced customization

If you want to create a brand-new Toolbar or change a bit the functionality the Toolbar provides, open the source code of the Toolbar – webdatarocks.toolbar.js file, find a prototype of the toolbar.getTabs() method and investigate how it works. For example, there is no need to write from scratch the functionality of pop-up windows if you need to add some custom options, etc.