Adding custom tab to toolbar

Resolved

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

WebDataRocks Team WebDataRocks August 16, 2018

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.

Kiran August 16, 2018

It’s working, thanks
How can I add/align all icons to the right.

WebDataRocks Team WebDataRocks August 17, 2018

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

Please login or Register to Submit Answer