Building app with modular parts

Webix JS
#1

Hello,

I am trying to do things which I believe require Webix Jet, but if I can avoid having to deal with yet one more layer of complexity, I’d prefer it.

So what I want is simply to be able to have some of my views being loaded on demand and swapped in/out.

So for instance, say I have sth like this

webix.ui({
rows: [
{ view: …, id: … },
{ view: …, id: “variablepart” },
{ view: …, id: … },
]
})

And I would like to be able to change that ‘variablepart’ view to something completely different (i.e. maybe it’s currently a table, but I’d want it to become a pivot). Where I could do something like

$$(“variablepart”).setview( /* some new view */)

At the moment my entire app is rather static, with a lot of panes that collapse/expand, but I got to the stage where there’s not much room left, and so ideally some of the parts should just be loaded on-demand.

How can I achieve that?

#2

I think this Dynamic UI Modifications of Guides, Configuring Components Webix Docs has the answer I was looking for.

#3

Hi @joelhoro ,

You are correct - the dynamic UI modification will fit the described scenario if you prefer to avoid Webix Jet.
Still, this feature is quite simple and should be used carefully (explained below).
If you plan to build a single-page application with a lot of dynamic views, I would recommend considering Webix Jet as a framework atop of UI that will help to manage navigation and view init. From our experience, it is the most convenient way to implement such use-case.

ideally some of the parts should just be loaded on-demand.

In case of loading JSON, the replacement can be implemented in the following way: Code Snippet
As JSON can contain a few value types in its structure (boolean, string, number), the logic of interaction should be assigned after UI is loaded.

If you use JSON/JS objects that are already available on the client-side and plan to reuse them, please note the following:

  • view IDs in the current scope of existing Webix views should be unique
  • to reuse objects with configuration, always use a new instance created with a copy or extend methods starting from the first usage. The constructor webix.ui accepts the parameters as-is, and therefore can modify the incoming object during initialization.