Multiview

Webix JS
#1

I have the following code that worked in webix 5 (webixjet):

import View1 from "views/view1";
import View2 from "views/view2";
import View3 from "views/view3";

export default class StartView extends JetView {
  config() {
       			  
    var uiFrame = {view: "form", id:"myviews", borderless:true, padding:0,
			elements: [	{view:"multiview", id:"mymultiview", cells:[									
									{$subview:View1},
									{$subview:View2},
									{$subview:View3},									
									],
						 }
                                          ]
				  }
				  
    // Return UI
    return uiFrame;
  }
  init() {
	  
        this.view1  = this.ui(View1);
	$$("view1_form").hide();	
        this.view2 = this.ui(View2);	
	$$("view2_form").hide();	    
        this.view3    = this.ui(View3);
	$$("view3_form").hide();	

       // initialize first view 
	this.view1.initView('');		
	
  }
  changeView(viewID,data) {  	  
	  
	if (viewID == 'view1') {this.view1.initView(data); $$("view1_form").show(); }
	if (viewID == 'view2') {this.view2.initView(data) }
	if (viewID == 'view3') {this.view3.initView(data) }
			
  }	  
  
};

I call the changeView function from within views 1,2,3 to switch to a different view.

The code is actually a shortened version because there are about 7 more views in the actual code that I change between.

After upgrading to webix 7 (webixjet) I get a lot of duplicate id error messages when I start this view from a menu. I can see why since i’m loading the views a second time so I have access to the initView functions in the views. How can I do this differently?

Thank you,
Pieter

#2

Hello @Pieter,

After upgrading to webix 7 (webixjet) I get a lot of duplicate id error messages when I start this view from a menu. I can see why since i’m loading the views a second time so I have access to the initView functions in the views. How can I do this differently?

As you have correctly stated yourself, the duplicate id error stems from the fact that you are initializing the same exact views with the same global ids a second time. There is no need for such manipulations, as the JetView class can be referenced from within the ready() handler via the getSubView() method. Naturally, this also means that the corresponding methods of the referenced class will also be accessible. In your case, this will approximately look as follows:

import {JetView} from "webix-jet";
import View1 from "./sub/view1";
import View2 from "./sub/view2";
import View3 from "./sub/view3";

export default class StartView extends JetView {
	config() {
		let uiFrame = {view: "form",
			id: "myviews",
			borderless: true,
			padding: 0,
			elements: [{view: "multiview",
				localId: "mymultiview",
				cells: [
					{$subview: View1, name: "view1"},
					{$subview: View2, name: "view2"},
					{$subview: View3, name: "view3"}
				]}
			]
		};

		// Return UI
		return uiFrame;
	}

	ready() {
		this.getSubView("view1").initView();
                // or this.view1 = this.getSubView("view1") -> ...
	}

	changeView(viewID, data) {
		let view1 = this.getSubView("view1");
		let view2 = this.getSubView("view2");
		let view3 = this.getSubView("view3");

		if (viewID === "view1") { view1.initView(data); webix.$$("view1_form").show(); }
		if (viewID === "view2") { view2.initView(data); }
		if (viewID === "view3") { view3.initView(data); }
	}
}

Please note that the subview can only be accessed in the ready() handler. This is due to the fact that the ready() method is called when the current view and all of its subviews have been rendered, while the init() method would get called as soon as the current view is initialized (and the subviews aren’t initialized yet).

As a side note: please refrain from using global ids while developing an app on Webix Jet. You can use local ids(the appropriate way to reference them is also mentioned via this link) instead and avoid a miriad of possible problems (you’ve just experienced one of them - duplicate ids, although in your case it wasn’t the actual issue). If you absolutely must use a global id, please refer to it via the webix.$$ method (this.$$ can be used as well).

#3

Using the ready() handler and getSubView() function works great!

Thank you,
Pieter