# Node-RED-Dashboard widget nodes inside UI Builder

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175>\
**Category:** Dashboard\
**Created:** [29 August 2020 07:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175 "2020-08-29T07:14:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![spillz](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@spillz](https://discourse.nodered.org/u/spillz)\
**Post date:** [29 August 2020 07:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/1 "2020-08-29T07:14:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 August 2020 07:29 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/2 "2020-08-29T07:29:25Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 August 2020 19:56 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/3 "2020-08-29T19:56:59Z")

</div>

Hi Sandy, welcome to the discussion. 🙂

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.

---

<div class="post-metadata">

**Author:** ![spillz](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@spillz](https://discourse.nodered.org/u/spillz)\
**Post date:** [1 September 2020 03:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/4 "2020-09-01T03:30:04Z")

</div>

Hi Julian,  
Thanks for the update ,

> [@TotallyInformation](#):
>
> 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.

I believe you are talking about this =\> [Uibuilder + VueJS + SVG = visual IoT floorplan](https://discourse.nodered.org/t/uibuilder-vuejs-svg-visual-iot-floorplan/17461).

> [@TotallyInformation](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 September 2020 06:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/5 "2020-09-01T06:30:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 September 2020 09:38 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/6 "2020-09-01T09:38:41Z")

</div>

> [@spillz](#):
>
> If we could form a small working group where your ideas can be discussed . i can contribute some time into developing it .

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:

> [@Uibuilder: Component Design + Example Components](https://discourse.nodered.org/t/uibuilder-component-design-discussion/32293):
>
> Hi all, this topic is to capture ideas and decisions regarding the design of a VueJS component standard for uibuilder. uibuilder VueJS components will be standard pieces of front-end code with an agreed msg schema for communications from/to Node-RED. They will be the uibuilder equivalent of Dashboard widgets. However, where those send the code as well as the data from Node-RED to the front-end, uibuilder components will only send data since the code is developed using standard web development m…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 October 2020 09:38 UTC](https://discourse.nodered.org/t/node-red-dashboard-widget-nodes-inside-ui-builder/32175/7 "2020-10-01T09:38:50Z")

</div>

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