Documentation menu
JS React Angular Vue
JS React Angular Vue

Customizing the Toolbar

WebDataRocks Toolbar is designed to make your web reporting experience easier and more convenient. You can customize the Toolbar in the following ways:

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

Important Before customizing the Toolbar, ensure it is enabled.

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 is created. The event’s handler will be responsible for changing the Toolbar.

How to remove tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. To remove a tab, delete a corresponding object from the array of tabs.

Your code should look similar to the following example:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  beforetoolbarcreated: customizeToolbar,
  report: "https://cdn.webdatarocks.com/reports/report.json",
  toolbar: true
});
 
function customizeToolbar(toolbar) {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    // Delete the Connect tab
    tabs = tabs.filter(tab => tab.id !== "wdr-tab-connect");
    return tabs;
  }
}

See the full code in our Codepen example.

How to add new tabs

Step 1. Assign a handler (e.g., customizeToolbar) to the beforetoolbarcreated event. The handler function has the toolbar as a parameter that contains information about the Toolbar.

Step 2. Inside the handler (e.g., customizeToolbar), retrieve all the tabs using the toolbar.getTabs() method. It returns an array of objects that describe tabs’ properties.

Step 3. Add a new tab to the array of tabs.

The example below implements the functionality that changes the theme of the component.

const pivot = new WebDataRocks({
  container: "#pivot-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() {
    // There will be two new tabs at the beginning of the Toolbar 
    tabs.unshift({
      id: "wdr-tab-lightblue",
      title: "LightBlue",
      handler: newtabHandlerBlue,
      // You can replace icons with custom ones
      icon: this.icons.format
    }, {
      id: "wdr-tab-default",
      title: "Default",
      handler: newtabHandlerDefault,
      // You can replace icons with custom ones
      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.

Even more advanced customization

In this guide, we mentioned how to remove the Toolbar tabs and how to add a new one. For further customization, you can reorder the tabs, set the custom icons for the tabs, or implement new functionality. We recommend investigating the existing code to understand how the Toolbar works:

  1. Open the source code of the Toolbar – webdatarocks.toolbar.js file.
  2. Find a prototype of the toolbar.getTabs() method.
  3. Investigate how this method works.

You can also change the appearance of the Toolbar by changing the component theme.

See also