asked on February 17, 2017
Hi,
We would like to customize the toolbar for Flexmonster. We're using AngularJS (1.5.8.) and are using it via the Angular directive. I didn't find an example on your website on how to customize the toolbar in this case. I tried to reason how it could work in this case, but nothing happens with the example below (not even the console output).
The simple example is from your website (removing a tab), I simply added the function to Angular $scope and then tried to pass it to the directive in the same as with the other parameters.
$scope.customizeToolbar = function(toolbar) {
console.log("testing, made it to customizeToolbar via Angular wrapper.");
// get all tabs
var tabs = toolbar.getTabs();
toolbar.getTabs = function () {
delete tabs[0];
return tabs;
}
}
<div fm-pivot
ng-if="widget.type == 'flexMonster'"
fm-license-key="((OUR LICENSE KEY))"
fm-component-folder="vendor/flexmonster-2.3/"
fm-report="widget.report"
fm-report-complete="onReportComplete(pivot)"
fm-ready="onFlexmonsterReady(pivot)"
fm-toolbar="true"
fm-beforetoolbarcreated="customizeToolbar"
>
</div>
Could you tell me what I'm doing wrong?
⋅ February 17, 2017
Sorry about the formatting but I think you get the point.
fm-beforetoolbarcreated=”customizeToolbar” is the failed attempt to pass the $scope function to the directive.
⋅ February 17, 2017
Hello Vesa,
Thank you for your question. The correct name for the “beforetoolbarcreated” event in Angular is “fm-before-toolbar-created”. Also please note that if method requires some parameters for input it should be mentioned in Angular. All together it will look like the following:
fm-before-toolbar-created="customizeToolbar(toolbar)"
If you still have any questions left, you are welcome to visit our Angular integration repository (https://github.com/flexmonster/pivot-angularjs). We have already updated it.
Let us know if everything works fine for you.
Best regards,
Dmytro.
⋅ February 17, 2017
Hi Dmytro,
not working yet. The example you provided is good, but our context is quite challenging. We are creating several instances with ng-repeat as in this example:
https://github.com/flexmonster/pivot-angularjs/blob/master/06-using-several-pivots-with-ng-repeat.html.
This might make it more challenging. For example this:
fm-ready="onFlexmonsterReady(pivot)" is working correctly as the pivot instance is being passed. Also fm-toolbar="true" does respond, changing this to false will hide the toolbar. But for some reason it would seem that the combination of several instances and the toolbar customization does not work.
Is there a way for me to debug the actual value that is going into the directive with fm-before-toolbar-created="customizeToolbar(toolbar)"? It would be appear that for some reason this value is either null or cannot be used because of the ng-repeat context.
Thanks for your help, probably not the easiest case but should be doable.
-Vesa
⋅ February 17, 2017
Hello Vega,
We have prepared an updated example for you http://take.ms/p4AVh. Please have a look.
Let us know if there are any questions left.
Best regards,
Dmytro.
⋅ February 20, 2017
This started working after I also updated to the very latest version of Flexmonster. One more minor detail: how can I remove the first two tabs (currently CSV & Report) by name or some other unique attribute, not by index? If I simply remove the first two, then those will not necessarily be the same two in future versions.
Thank you for excellent support.
-Vesa
⋅ February 20, 2017
I figured it out myself. Something like this works:
$scope.customizeToolbarFunction = function(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function() {
var filteredTabs = tabs.filter(function(tab) {
return tab.id !== "fm-tab-connect" && tab.id !== "fm-tab-open";
});
return filteredTabs;
};
};
This is good enough for us. Thanks again.
⋅ February 20, 2017
Hello Vesa,
Thank you for your kind words. We highly appreciate your feedback. The solution you have suggested is really good.
We are glad that everything works fine for you.
Best regards,
Dmytro.