Node-RED-Dashboard widget nodes inside UI Builder

Dashboard
1

Hello NR Experts,
My First post , since playing around with NR for a year, as most of my issues were resolved in this forum by searching.

Since i see the ease of node-red-contrib-dashboard and flexibility of UI builder , is it possible to use (call) the node-red dashboard widgets (groups) inside UI builder, which could help build new layouts , look and feel , while still not spending time on coding widgets in ui builder?.

Regards,

Sandy

2

Hi Sandy, welcome to the forum.

There is no way of using dashboard widgets in UI builder. It has been covered in the forum a few times (but not so easy to find).

3

Hi Sandy, welcome to the discussion. :slight_smile:

Dashboard uses the Angular v1 framework which you could also use in uibuilder (since it doesn't care what framework, if any, that you use). However, Dashboard works completely differently to uibuilder in that it pushes code to the front-end. I think this is a strong anti-pattern so uibuilder was set up such that your front-end code is developed in a much more standard way. You create files that the uibuilder node serves up to your browser using the built-in ExpressJS service. So you can use standard web development tooling to develop your front-end code, uibuilder acts as the glue that ties everything together.

Now, it is possible to create "components" that would work similarly to Dashboard's widgets (though you wouldn't normally want to send that code via the uibuilder websocket like Dashboard does). Indeed, I created an example component that mimics Bart's SVG node for Dashboard.

If ever life lets up a bit, or others decide to jump in and help, I've plenty of plans to create other components to make using uibuilder easier to use for non-coders. Each component would be front-end code though and not a new node. That's because we only need to agree a standard for the data that flows between the uibuilder node and the front-end component, we don't need to pass the full code. That would mean that it would be installed via uibuilder's library manager (or manually using npm on the command line) rather than as another Node-RED node.

4

Hi Julian,
Thanks for the update ,

I believe you are talking about this => Uibuilder + VueJS + SVG = visual IoT floorplan.

If we could form a small working group where your ideas can be discussed . i can contribute some time into developing it .

Thanks for much Julian and Steve

BR,
Sandy

5

Don't forget there is also node-red-contrib-componemt-dashboard that already has some widget as components

6

Fantastic! Lets start with a new topic here on the forum so that the most people will be able to see and contribute. If that topic gets too big, we can investigate somewhere else to carry on. Watch out for the new topic. I'll paste a link here.

Here is the new topic:

7

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