Custom Widget with Dynamic Variables

Webix JS
#1

I try to make a custom tabview for a specific project related setup. The general idea of what the tabview should show is like this structure:

  view: "tabview",
  cells: [{
    header: "Children",
    body: {
      view: "datatable",
      url: "groups/"+aid+"/children",
      ...
    }
  },{
    header: "Data",
    body: {
      view: "edgeform",
      edgeurl: "groups/"+aid,
      ...
    }
  }]

As seen, I want this one variable field to be flexible and be taken from the configuration of the component instance. What I tried in general is the direction of:

import * as webix from ‘@xbs/webix-pro’;

  webix.protoUI({
    name: "edgegroup",
    $init: function(config){
      var aid = config.aid;

      .... here i try to add the tabview, like with adding to config.rows ...

    }
  }, webix.EventSystem, webix.ui.view);

But whatever I try, it always ends up with some error or nothing showing up at all. I also tried to use protoUI to extend webix.ui.tabview, but sadly, it always complains about the missing cells definition cause the $init of tabview is called before my $init of my custom component, so i cant attach the cells before it checks.

What would be the most official way to make something so simple? I really just want to have a combination of components that I can spice with dynamic variables.

As a bonus round, how would be made such a thing with a delayed setup? I saw some examples with “deferred layout”, but would be interested in good solution for the classical “show ajax load icon, load stuff, display widget” workflow.

Thanks in advance! :smiley:

#2

Hello,

tried to use protoUI to extend webix.ui.tabview

For your use case it is better to inherit from UI Layout, as it is more suitable for such kind of modifications: https://snippet.webix.com/zrk1pzyb

#3

That was actually the last thing I came to, and when I do that I get no error, but it also doesn’t show any widget, I use that all inside a Datatable subview:

  subview: function(group,target){
    return webix.ui({
      view: "edgegroup",
      aid: group.aid
    },target);
  },

And I had before done all the logic inside that subview function, there it worked (so using webix.ui({ view: tabview, … },target), so it is not a problem of the widget structure itself. Now I just get a little “movement” of the table row so he adds 1-2-3 pixel to it, but it doesn’t show anything.

#4

Subviews require that height is set to them. If you provide some value, they will be shown:

name: "edgegroup",
defaults:{
  	minHeight:300
}

Also, I’ve modified the $init function so that it generates unique cells ids for each widget instance:

https://snippet.webix.com/sorkczmg