protoUI Sidebar

Hi webix team,
I’ve created a Sidebar in the snippet Code Snippet and I want to create a Sidebar protoUI like snippet Code Snippet but in this snippet the icons disappear.

Thanks for advice

Hi @RainerRoss ,
In the case above you can reuse your template by assigning the functon to a constant outside of webix.ui constructor - Code Snippet .

Please, note, that it’s better to avoid changing data in the template fucntion. Template function is used to set the logic of rendering but not to manipulate data.
Rewriting data in the template can end up in bugs. So instead of changing obj.icon there, I would suggest to use let icon = obj.icon and manipulate its value.

When you use ProtoUI in your app:

  1. Please, note, when you set the type property, you should check if the component already uses it . The sidebar widget has deafault type property - sideBar . So basically in your example you rewrite the existing type property and its logic. What you need is not to rewrite it, but extend its functionality.
  2. To extend its functionality you can create a new type, which uses the existing type as baseType for your new type. Then apply the logic to your template.
webix.type(webix.ui[viewname], {
    baseType: "sideBar",
    template: /* ... */
})
  1. Moreover, defaults shouldn’t contain data and event listeners. You should wrap event listeners in the $init method.

Please, check the snippet - Code Snippet