Injecting a JetView into a tabview or a multiview

Hello,

I can’t figure out how to insert a JetView into a tabview or multivien.
Their respective methods addView expect a jsonConfig object to build the new view, so, I’ve tried many things without success.

Here are the 2 views involved:

// form.js
import { JetView } from "webix-jet";

export default class ViewForm extends JetView {
    config() {
        return {
            template: "My form"
        }
    };

    init() {
        //...
    }
}


// main.js
import { JetView } from "webix-jet";
import ViewForm from "./form";

export default class ViewMain extends JetView {
    config() {

        var tabbar = {
            id: "app-tab-bar",
            view: "tabbar",
            multiview: true,
            options: [
                { value: 'First tab', id: 'app-nav', close: false, width: 320 }
            ]
        };

        var ui = {
            id: "app-root",
            cells: [{
                id: "app-nav",
                template: "Content of tab 1"
            }]
        };

        return {
            rows: [
                tabbar
                ui,
            ]
        }
    }
}

How can I add my JetView in the multiview?

The following works (badly) and is a horrible hack. Furthermore, when we do this, we lose the benefits of the JetView api (auto init, events…) :

let form = new ViewForm();
let formConfig = form.config();

// Add a new content area
$$("app-root").addView(formConfig);

// Add a new tab
$$("app-tab-bar").addOption(formConfig.id, formConfig.id.toString(), true);

So, what’s the proper way to add a JetView in to a multiview layout?

Still stuggling to insert a JetView inside a ‘multiview’ layout (also a Jetview).
The method ‘addview’ of multiview only takes objects as parameter, but can’t take an instantiated Jetview.

Any thought concerning the method to achieve this properly?
I couldn’t find any examples on the forum or stackoverflow.

try getRoot()
$multiview.addView(this.getRoot())

Thank your for your answer. I’ve tried it, but it give me the same result => this.getRoot() only returns the root config element of the view.

What I’d like to do is to insert some Jetviews in the cells of a multiview, to be able to use the Jetview API for each inserted view.

It works for me in the similar scenario.
Can you share some code?

Hello,

The code of the 2 Jetviews is above, and below is the code I’m currently using to insert the ‘ViewForm’ JetView into the ‘ViewMain’ JetView.

It works, but it’s a workaround because I should not instantiate the JetView by myself using the ‘new’ keyword.

The result here is a ‘fake’ Jetview where I’m only using the config property to feed the addView method.

let form = new ViewForm();  // <= Jetview I want to insert in a cell
let formConfig = form.config();

// Add a new CELL to the multiview 'MainView'
$$("app-root").addView(formConfig);

// Add also a new tab
$$("app-tab-bar").addOption(formConfig.id, formConfig.id.toString(), true);

Error using this syntax:

$$("app-root").addView(form.getRoot());

=> webix_debug.js:4592 Uncaught TypeError: Cannot read property 'container' of undefined

Error using this syntax:

$$("app-root").addView(ViewForm.getRoot());

=> __WEBPACK_IMPORTED_MODULE_0__view_form__.default.getRoot is not a function

Instead, what I would like to do is simply to add the Jetview itself in the multiview cell. Something like this:

$$("app-root").addView(ViewForm);

But the addView method doesn’t support it.

It would be great if the snippet tool could accept Webix Jet testing! We could share code directly…

my working code is

var form = this.ui(ViewForm);
var formRoot = form.getRoot();
var tabConfig = {
    id: formRoot.config.id,
    value: formRoot.config.id.toString() // "Header"
};
$$("app-tab-bar").addOption(tabConfig);
$$("app-root").addView(formRoot);

Okay, thanks, I didn’t try the “this.ui(ViewForm)” to instantiate my JetView. It may work better this way. I have to test it.

Great! It’s working.
The trick was to use this.ui(…)

Thanks a lot for your help.

Hi there,

just a quick question on the above problem.
Ive faced the exact problem.My solution was also the same as David_Grossi’s solution of “fake” jetview class, with its own methods.

let form = new ViewForm(); // <= Jetview I want to insert in a cell
let formConfig = form.config();

// Add a new CELL to the multiview ‘MainView’
$$(“app-root”).addView(formConfig);

// Add also a new tab
$$(“app-tab-bar”).addOption(formConfig.id, formConfig.id.toString(), true);

while that works, i was wondering if there could be an advantage of forcing the “Jetview” method proposed.

Hello @faseel,

while that works, i was wondering if there could be an advantage of forcing the “Jetview” method proposed.

While there is no substantial difference between the two methods (as both of them will work), the solution provided by intregal is the preferred way to go. This is due to the fact that this method utilises Webix Jet API instead of relying on the standart JS methods (i.e. this.ui() method is used to correctly instantiate a JetView class, instead using the new() method).

Hello,

This is the only post related to webix-jet and multiview.

Does injecting cells dynamically is the only way ?

Did you guys succeed to make something like this ?

Any help will be REALLY appreciated. I think this use case is classic (3 levels navigation) and should be an example in webix-jet demo.

Struggling with this since 2 weeks.

In a first time, i have this :

URL: /

---------|--------------------------------
sidebar  | welcome page (template ..)
         |
  topic1 | 
  topic2 | 
         | 
         | 
         |
         |
         |
         |
         |
         |
         |
         |
         | 
---------|--------------------------------

Then, let’s click topic1 on the sidebar

URL: /topic1
---------|--------------------------------
sidebar  | datatable for topic1
         |
  topic1 | row 1
  topic2 | row 2
         | row 3
         | .....
         |
         |
         |
         |
         |
         |
         |
         |
         | row N
---------|--------------------------------

After selecting a row, i’d like to split the right part to show this:

URL: /topic/details/subtopic1?rowId=x
---------|--------------------------------
sidebar  | datatable for topic1
         |
- topic1 | row 1
- topic2 | row 2
         | row 3
         | .....
         |
         |--------------------------------
         | tabbar (multiview)
         | subtopic1 | subtopic2
         |--------------------------------
         | widget for subtopic1
         |
         |
         | 
---------|--------------------------------

Then, when clicking on subtopic2:

URL: /topic/details/subtopic2?rowId=x
---------|--------------------------------
sidebar  | datatable for topic1
         |
- topic1 | row 1
- topic2 | row 2
         | row 3
         | .....
         |
         |--------------------------------
         | tabbar (multiview)
         | subtopic1 | subtopic2
         |--------------------------------
         | webix widget for subtopic2 (form, datatable ..)
         |
         |
         | 
---------|--------------------------------

I started webix-jet since 2 months now, it’s really powerfull. But i’m lost in some concepts for now.

Again, any help is really welcome.

Reference: Webix-jet and multiview - #4 by franck34

Done !

https://snippet.webix.com/5oc7syj7