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:

    import { Component } from '@angular/core';

@Component({  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})

export class AppComponent {
  customizeToolbar(toolbar: any) {
    // Get all tabs from the Toolbar
    let tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
      // Delete the Connect tab
      return tabs.filter((tab: any) => tab.id !== 'wdr-tab-connect');
    }
  }
}
    <app-wbr-pivot
 [toolbar]="true"
 (beforetoolbarcreated)="customizeToolbar($event)">
</app-wbr-pivot>

    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:

      import { Component } from '@angular/core';

@Component({  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})

export class AppComponent {
  customizeToolbar(toolbar: any) {
    // 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: () => this.yourCustomFunction(),
        icon: toolbar.icons.open,
      });
      return tabs;
    };
  }

​​  yourCustomFunction() {
    // Your functionality
  }
}
      <app-wbr-pivot
 [toolbar]="true"
 (beforetoolbarcreated)="customizeToolbar($event)">
</app-wbr-pivot>

      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