> For the complete documentation index, see [llms.txt](https://webix.gitbook.io/webix-jet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webix.gitbook.io/webix-jet/part-iii-practical-tasks/nesting-jet-views-into-webix-widgets.md).

# Nesting Jet Views into Webix Widgets

## Placing Jet views into Multiview / Tabview

You can place Jet views inside Multiview.

![Webix Jet views in Webix Multiview](https://4168668210-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBfwSEN2emvHOR268VD%2Fsync%2F586afbc50842f0c9379a62a468e167f5a38fc551.png?generation=1627465175506246\&alt=media)

### 1. Multiview control

Jet views can be included into Multiview. First, you need to create Multiview and put Jet views as *$subviews* into each cell. Next, add a control to switch between Multiview cells - for example, a segmented button. *segmented* needs IDs of the subviews. It is very important not to define IDs outside the file with Multiview, because it is unsafe. A better approach is to give IDs to the contents of the Multiview cells.

```javascript
// views/top.js
import {JetView} from "webix-jet";
import {ChildView1} from "views/childview1";
import {ChildView2} from "views/childview2";

export default class TopView extends JetView {
    config(){
        return {
            rows: [
                { view:"segmented", multiview:true, options:[
                    "Dashboard", "Meta Info"
                ]},
                { view:"multiview", cells:[
                    { $subview:ChildView1, id:"Dashboard" },    //load views/childview1.js
                    { $subview:ChildView2, id:"Meta Info" }     //load views/childview2.js
                ]}
            ]
        };
    }
}
```

[Check out the demo on GitHub >>](https://github.com/webix-hub/jet-demos/blob/master/sources/tabbar.js)

### 2. Tabview

![Webix Jet views in Webix Tabview](https://4168668210-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBfwSEN2emvHOR268VD%2F-LBfwSscFxB7c2rWD0AY%2F-LBfwftGMFeO0PAtN0Fx%2Ftabview.png?generation=1525450733220586\&alt=media)

You can also put subviews into a Tabview. In this case you do not need IDs, you need to import the subviews and place them into the *body* of Tabview cells:

```javascript
// views/top.js
import {JetView} from "webix-jet";
import ChildView1 from "views/childview1";
import ChildView2 from "views/childview2";

export default class TopView extends JetView {
    config(){
        return {
            rows: [
                { view:"tabview", cells:[
                    { header:"Dashboard", body:ChildView1 },
                    { header:"Meta Info", body:ChildView2 }
                ]}
            ]
        };
    }
}
```

You can also add tabs with Jet views into TabView with **addView()**. A new instance of Jet view can be created with the class constructor.

```javascript
// views/top.js
import {JetView} from "webix-jet";
import ChildView1 from "views/childview1";
import ChildView2 from "views/childview2";
import NewTabView from "views/newtab";

export default class TopView extends JetView {
    config(){
        return {
            rows: [
                {
                    view:"button", value:"Add new", click:()=>{
                        this.addTab();
                    }
                },
                { view:"tabview", localId:"tabs", cells:[
                    { header:"Dashboard", body:ChildView1 },
                    { header:"Meta Info", body:ChildView2 }
                ]}
            ]
        };
    }
    addTab(){
        this.$$("tabs").addView({
            header:"New Tab",
            body:new NewTabView(this.app)   //a class view
        })
    }
}
```

[Check out the solution on GitHub >>](https://github.com/webix-hub/jet-demos/blob/master/sources/tabbar.js)

## Jet Views in Webix Dashboard

You can put Jet views on panels of [Webix Dashboard](https://webix.com/widget/dashboard/).

### Static panels

Static panels can be created in *cells*:

```javascript
// views/dashboard.js
import {JetView} from "webix-jet";
import AdminView1 from "views/admin1.js";
export default class TopView extends JetView {
    config(){
        return {
            view:"dashboard",
            gridColumns:4, gridRows:4,
            cellHeight: 200,
            cells:[
                {
                    view:"panel",
                    x:0, y:0, dx:1, dy:1,
                    body:AdminView1
                }
            ]
        };
    }
}
```

### Dynamic panels

You can also create a [dynamic dashboard](https://blog.webix.com/webix-dashboard-layout-how-to-build-appealing-dynamic-dashboards/) with Jet views. For example, panels can be dragged from a list like this:

```javascript
// views/dashboard.js
import {JetView} from "webix-jet";
import AdminView1 from "views/admin1.js";
import AdminView2 from "views/admin2.js";
...
export default class TopView extends JetView {
    config(){
        return {
            cols: [
                { view:"list", id:"list",
                    width:200,
                    drag:"source",
                    template:"#value# - (#dx#x#dy#)",
                    data:[
                        { id:"1", value:"AdminView1", dx:1, dy:1 },
                        { id:"2", value:"AdminView2", dx:1, dy:2 },
                        ...
                    ]
                },
                {
                    view:"dashboard", id:"grid",
                    gridColumns:4, gridRows:4,
                    cellHeight: 200
                }
            ]
        };
    }
}
```

Dynamic Dashboard panels can be created with a [*factory*](https://docs.webix.com/api__link__ui.dashboard_factory_config.html) instead of *cells*.

Save all the Jet views in class properties. After that define the factory that will place Jet views on panels:

```javascript
// views/dashboard.js
import {JetView} from "webix-jet";
import AdminView1 from "views/admin1.js";
import AdminView2 from "views/admin2.js";
...
export default class DashboardView extends JetView {
    config(){
        return {
            cols: [
                // ...list
                {
                    view:"dashboard", id:"grid",
                    gridColumns:4, gridRows:4,
                    cellHeight: 200,
                    factory:(obj) => {
                        obj.view = "panel";
                        obj.resize = true;
                        obj.body = this[$$("list").getItem(obj.name).value];
                        return obj;
                    }
                }
            ]
        };
    }
    init(){
        this.AdminView1 = AdminView1;
        this.AdminView2 = AdminView2;
        ...
    }
}
```

[Check out the demo >>](https://github.com/webix-hub/jet-demos/tree/master/sources/dashboard.js)

## Jet Views as Subviews and Subgrids of Webix Datatable

You can also nest Jet views of any complexity into Datatable by including them into *Datatable subviews* [\[1\]](/webix-jet/part-iii-practical-tasks/nesting-jet-views-into-webix-widgets.md#footnotes).

Let's add subviews into this datatable:

```javascript
// views/top.js
import {JetView} from "webix-jet";
export default class TopView extends JetView {
     config(){
        return {
            view:"datatable",
            columns:[
                { id:"title",   header:"Title", sort:"string",
                template:"{common.subrow()} #title#", width:220 },
                { id:"year",    header:"Year",  width:100, sort:"int"},
                { id:"votes",   header:"Votes", width:100,  sort:"int"}
            ],
            data:[
                { id:1, title:"The Shawshank Redemption", year:1994, votes:678790 },
                { id:2, title:"The Godfather", year:1972, votes:511495 },
                { id:3, title:"The Godfather: Part II", year:1974, votes:319352 }
            ]
        };
    }
}
```

One Jet view class will be used for all subviews, but with different data. Let's use the ability to create Jet class instances with constructors.

{% hint style="warning" %}
This will work only for synchronous Jet views.
{% endhint %}

Let's define the constructor that will call the parent constructor of the JetView class and then get the right data from a parent row of Datatable:

```javascript
// views/subgrid.js
import {JetView} from "webix-jet";
export default class SubLayout extends JetView {
    constructor(app, data){
        super(app);
        this.customData = data;
    }
    config(){
        return {
            rows:[
                { type:"header", template: () => this.customData.title },
                { template:"Subview", height: 30 }
            ]
        }
    }
}
```

Let's include *SubLayout* into the Datatable in *TopView*. **subview** of Datatable can be defined as a function with two parameters:

* **obj** - and object with the item data,
* **target** - the HTML node below the row where the subview will be opened.

The *subview* function must return the UI of the subview.

You can create instances of *SubLayout* with right data inside **config()** of *TopView*. Call the constructor and pass the data as the third parameter. Then, use **this.ui()** to place the *SubLayout* below the row of Datatable and the return the UI of the newly created Jet view:

```javascript
// views/top.js
import {JetView} from "webix-jet";
export default class TopView extends JetView {
    config(){
        return {
            view:"datatable",
            subview: (obj, target) => {
                const sub = new SubLayout(this.app, "", {
                    title: obj.title 
                });
                this.ui(sub, { container: target });
                return sub.getRoot();
            },
            //datatable config
        };
    }
}
```

## Using *addView()* with Jet Views

You can use Webix **addView()** method to add Jet views into Webix layouts [\[1\]](/webix-jet/part-iii-practical-tasks/nesting-jet-views-into-webix-widgets.md#1). You can add new elements on the fly, which is especially important for Dashboard. Also, **addView()** can be used with Layout, Tabview, Multiview, Carousel, etc.

```javascript
this.$$("layout").addView(WebixJetView);
```

[Check out the demo >>](https://github.com/webix-hub/jet-demos/tree/master/sources/addview.js)

## Footnotes

#### \[1]:

Starting with Webix 5.3