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:

<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";

const customizeToolbar = (toolbar) => {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  if (tabs.length > 0) {
    // Delete the Connect tab
    tabs = tabs.filter(tab => tab.id !== "wdr-tab-connect");
  }
  toolbar.getTabs = () => tabs;
};
</script>

<template>
 <div>
  <Pivot
    toolbar
    :beforetoolbarcreated="customizeToolbar"
  />
 </div>
</template>

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.

Your code should look similar to the following example:

<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";

const customizeToolbar = (toolbar) => {
  // Get all tabs from the Toolbar
  let tabs = toolbar.getTabs();
  toolbar.getTabs = () => {
    // Add a new tab
    tabs.unshift({
      id: "fm-tab-newtab",
      title: "New Tab",
      handler: yourCustomFunction,
      icon: toolbar.icons.open,
    });
    return tabs;
  };
};

const yourCustomFunction = () => {
  // Your functionality
}
</script>

<template>
 <div>
  <Pivot
    toolbar
    :beforetoolbarcreated="customizeToolbar"
  />
  </div>
</template>

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