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:
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.
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
.
var pivot = new WebDataRocks({ container: "#wdr-container", beforetoolbarcreated: customizeToolbar, report: "https://cdn.webdatarocks.com/reports/report.json", toolbar: true }); function customizeToolbar(toolbar) { var tabs = toolbar.getTabs(); // get all tabs from the toolbar toolbar.getTabs = function() { delete tabs[0]; // delete the first tab return tabs; } }
See the full code in our Codepen example.
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.
var pivot = new WebDataRocks({ container: "#wdr-container", beforetoolbarcreated: customizeToolbar, report: "https://cdn.webdatarocks.com/reports/report.json", toolbar: true }); function customizeToolbar(toolbar) { // get all tabs var 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; } var newtabHandlerBlue = function() { setLightBlueTheme(); }; var 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.
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 in writing from scratch the functionality of pop-up windows if you need to add some custom options, etc.