Declaring Webix UI objects, and using them later

Webix JS
#1

I am trying to create a multiview where each view is a different data table. My idea was to declare the data tables separately, and then dump their references in a multiview object at the end. But this doesn’t seem to work. I get the first datatable to show up, but no tabs, and no second table. Here is a sample of my code:

<div id="mainPanelArea"></ div>

<script type="text/javascript">

    webix.ready(function() {

        //TABLE 1
        var table1 = new webix.ui({
            id:"table1ID",
            view:"datatable",
            columns: [...],
            ...
        });
        
        //TABLE2
        var table2 = new webix.ui({
            id:"table2ID",
            view:"datatable",
            columns: [...],
            ...
        });
        
        //TAB BAR
        var tabbar = {
            view: "segmented",
            multiview: true,
            options: [
                { value: "tab1", id: "table1ID" },
                { value: "tab2", id: "table2ID" }
            ],
            height: 40
        };
        
        //MAIN PANEL VIEWS
        var mainPanelViews = {
            cells: [
                table1,
                table2
            ];
        };

        //UI LAYOUT
        webix.ui({
            container: "mainPanelArea",
            rows: [
                tabbar,
                mainPanelViews
            ]
        });
        
        
    }); //end webix.ready

</ script>

Did I make a mistake? I copied the format of the example on multiviews.

#2

Nevermind. I found my mistake. I should have declared the tables like so:

var table1 = {
id:“table1ID”,
view:“datatable”,
columns: […],
…
};

using new webix.ui probably implies that it will become visible, so to declare objects in the background, avoid that syntax, and just use {…}.

#3

Yep, webix.ui command will contstruct the UI. if you want just define a part of UI for later usage - you can store configuration object as common javascript variable.