Replacing a view multiple times

Webix JS
1

I’m trying to replicate the admin-app subview replacement when clicking on the accordion items.

Using webix.ui( view_object, $$(‘layout’), $$(‘subview’)) leads to id duplication (“non-unique view id” error).

It seems that the admin-app is using a custom function “app.create(subview)” which strategy is to recursively remove the children of the previous subview.

Do you plan to add a method in ui.layout to do this dirty job ? Something like .replaceView() ?

2

Here is what I came up with :
http://webix.com/snippet/908614d6

Is there a better way ?

3

There are few alternative strategies.

a) if structure of layout is consistent you can use code without fixed view id

function subview(config) {
  webix.ui(config, $$('layout').getChildViews()[2]);
}

http://webix.com/snippet/da89c214

b) use sublayouts

{ id:"content", rows:[
        { template:"Replace me by clicking on the buttons above" }
    ]},

and later

function subview(config) {
  webix.ui([config], $$("content"));
}

http://webix.com/snippet/41aaf05e

4

As for app.create(subview) it solves issue with reusing IDs ( when new view has ID the same as old one, or some child of old one ). We will backport it to the main library in next updated, as part of standard webix.ui and addView command.

5

Excellent, thanks for the detailed answers !

6

I want to build a similar app.
Is it possible to use two objekts like
var mychart1= webix ui(){…},
var mychart2= webix ui(){…},
and change this two views by button click?

subview(mychart1) … subview(mychart2)…?

7

If you are using Webix Jet, it just a matter or URL changing ( from some/chart1 to some/chart2 )

If you are using a standalone Webix components, you can use a multiview with two cells, and when necessary just call mychart2.show();

http://docs.webix.com/desktop__multiview.html