Cloning toolbar

Webix JS
#1

I have a really long form, so I would like to have the toolbar show at top and bottom.

I used a column definition variable and tried just applying it directly (as in snippet http://webix.com/snippet/ef2d10ce or http://webix.com/snippet/0564dd0c).

In both cases, only one of the “Edit” buttons gets hidden. In my application, there are totally different buttons, so please don’t get hung up on the “Edit” label.

My actual toolbar configuration is close to 30 buttons. Each of them is hidden or displayed based on user roles, so that nobody should see more than 6 buttons at a time.

Is there a way to clone the toolbar that would permit me to hide both “Edit” toolbar buttons (bottoms of the same id/name/label), without having to clone the configuration object to give each button a unique ID? I am hoping to save coding time and loading time.

Thanks, in advance!

#2

The common approach is slightly different, but it is still possible to reduce the work:

isolate property of layout allows using the same IDs in different layouts, but these components have to be called through the unique parent’s name:

$$("layout").$$("populatedId")

http://webix.com/snippet/9b45a4fc

Another good point is to use webix.copy for multiple initialization (or data parsing) to prevent any conflicts.

#3

Or even further, you can create a custom toolbar-based component with the support of IdSpace:

http://webix.com/snippet/8343f039

In such case, you need to define its core logic only once, but the inner components are available the same way.

#4

Thank you! For this use case, I will stick with your first example snippet, but I can see where the second option offers more power for more complex objects.