Adding custom tab to toolbar
I am using this in my angular 4 application, and my code is like below
<wbr-pivot [toolbar]=”true” [beforetoolbarcreated]=”customizeToolbar” [attr.id]=”‘table’ + indx” [customizeCell]=”customizeCellFunction” [width]=”‘100%'” [report]=”usecase.pivotOptions”>
Report output will appear here
</wbr-pivot>
customizeToolbar(toolbar) {
let tabs=toolbar.getTabs();
toolbar.getTabs=function () {
tabs.unshift({
id:”fm-tab-newtab”,
title:”New Tab”,
handler:newtabHandler,
icon:this.icons.open
});
return tabs;
}
let newtabHandler=function() {
alert(“New functionality!”);
}
}
But new tab is not adding to the toolbar, and newtabHandler function is not executing.
And one more curiosity is can I add or replace existing icons with material icons or Font awesome icons
3 answers
Hello Kiran,
Thank you for the question.
Please use (beforetoolbarcreated)="customizeToolbar($event)" instead of [beforetoolbarcreated]=”customizeToolbar”.
As for the icon, you can set it as HTML using icon property in tab object:
tabs.unshift({
id:"fm-tab-newtab",
title:"New Tab",
handler:newtabHandler,
icon:`<i class="fab fa-angular"></i>`
});
Or, even override existing icons:
toolbar.icons.connect = `<i class="fab fa-angular"></i>`
Hope it helps.
It’s working, thanks
How can I add/align all icons to the right.
Hello, Kiran,
We’re glad it works!
In order to add the tab to the right you need to specify rightGroup: true parameter:
tabs.unshift({
id:"fm-tab-newtab",
title:"New Tab",
rightGroup: true,
handler:newtabHandler,
icon:<i class="fab fa-angular"></i>
});
Hope it helps.
Also, you’re welcome to check out Toolbar source code to investigate how it works.
Regards,
WebDataRocks Team