Trying to study uibuilder

I've been studying uibuilder for a couple of days and I would have some doubts to clarify.
From what I understand, each uibuilder node corresponds to a specific app and url, and all flows must converge to that node to create a dashboard. I currently have a dashboard with 12 Tabs, full of groups and widgets. Wanting to design the new dashboard with uibuilder, I would have to write an app that includes several pages, with a menu, but what I don't understand is how to connect ALL nodes of all flows to the same uibuilder node.

Maybe there's something I'm missing ...

Ok, I found what I was missing: the uib-sender node!

1 Like

You can also use link nodes of course :slight_smile:

Yes, but I hate them...

Haha, well uib-sender not really that different, some similar principals except that it works off a common event handler rather than node ID references.

Once you've got over your initial learning curve and are getting into your own custom nodes :rofl: you can use my common event package in your own nodes and so will be able to write your own uibuilder extension nodes ! :sunglasses: :exploding_head: :man_mage:

Yes, I'll be happy to do it.
I was thinking if there is a sort of template which can be arranged for a multipage dashboard. Something using i.e. flex or other frameworks with cells/rows/columns.
Just to save some html/js/css coding and don't start from a blank page.

A number of ways to approach this, I just don't know I've yet found the best :slight_smile:

However, the next release of uibuilder will let you load a UI configuration from either a JSON file (could be served via uibuilder itself of course, or from somewhere else) or a web API that returns JSON. That configuration will build the UI using any combination of standard HTML elements and framework elements. You can also mix it with hand-coded HTML &/or hand-coded framework HTML (Vue, REACT or whatever).

Then, of course, you will be able to update the UI from messages or more JSON. However you like.

In addition, there will be a new uibuilder node, uib-list that will be an example of building Dashboard-like nodes. You give it a simple set of data and it will create/update a list in the front-end for you. And at some point, it will work a little like the uib-sender node so that you can even send data back so that it carries on in the flow it came from.

THe "multi-page" thing is, of course, a ruse in Dashboard. Dashboard is a single-page app so those "pages" are not. They are tabs in the same page that hide and show different parts of the UI. You can absolutely do that with uibuilder right now and if you are using a framework like Vue and bootstrap-vue, the latter has a tabs component already available as do many other frameworks. It also isn't so very hard to build your own but I've also a test version in my web-components library (it doesnt' do anything useful yet, needs more work).

As you get more familiar with modern HTML and CSS, you will also come across both grid and flexbox layout types. These are CSS capabilities that let you do grid and column layouts. I know you've seen my web-components library so you've already experiences the flexbox layout since that is what is configured when you use the <simple-container> component. Flexbox lets you easily define columns and overflows and lets you change positions simply by changing a number in the CSS.

1 Like

PS: I forgot to say that you can, of course, also create true multi-page UI's with uibuilder. With shared or separate code as desired. The main limitation is that a single uibuilder node will try to send messages to all loaded pages unless you include the _socketId.

But having multiple uibuilder nodes is also absolutely fine. On both my live and dev systems, I always have many.

Yes. Few years ago I made from scratch a full multipage dashboard client for a nodejs (express) server I made. The client app was all jQuery.

My idea for uibuilder is to have a main app, with a menu that switches to other separate pages (each page with its proper uibuilder node). Sure I will then face with GUI problems (GUI has to be the same for all pages), but it is not the time to think to it. I still have to study the basic.
Thanks again

And you can use that with uibuilder as well of course :sunglasses:

It will be interesting to see the route you take especially when uibuilder 5.1 is released.

There are several ways to achieve that with the help of uibuilder. Web components would be an interesting way, if perhaps more complex to get started.

Another would a common JSON file loaded at page load. That would configure all of the common elements. You might see a bit of a flash of change on load though if you weren't careful. I suspect that I probably need to optimise some code in the new library for that.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.