# Transition from Dashboard to UIbuilder

**URL:** <https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194>\
**Category:** General\
**Created:** [29 August 2020 19:02 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194 "2020-08-29T19:02:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [29 August 2020 19:02 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/1 "2020-08-29T19:02:37Z")

</div>

I have been reading about different dashboard options and have just about concluded that I want the inherent flexibility of using UIbuilder instead of Dashboard. I recognize the UIbuilder offers great power through Vue, Angular, React, etc. I am preparing to work my way through the Getting Started steps, but wanted to do a little expectation setting for myself.

I have a few items that I am showing through dashboard using template nodes. They are generally pretty basic (specifically colored buttons that flash when selected, etc.). Is it likely that it will be easy enough to move them over with minimal adaptation or will I have to really understand one of Vue, Angular, React, etc before I can even get started with these simple items that are basically CSS and HTML?

If the answer is finish the getting started portion and then I will understand the answer then I apologize for taking up your time when I could just RTM.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [29 August 2020 19:36 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/2 "2020-08-29T19:36:18Z")

</div>

> or will I have to really understand one of Vue, Angular, React, etc before I can even get started

No you dont have to.

The idea of ui-builder is that you can choose, ui-builder provides an interface to/from node-red and _how_ you want to use that is up to you. I have [made some very basic templates](https://gist.github.com/bakman2/8e8232f144c7ac34d4dbbd08cd9fc97b) to get started with vanilla javascript or vuejs.

---

<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:43 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/3 "2020-08-29T19:43:08Z")

</div>

You will need to know a little more about HMTL, CSS and your chosen framework than when getting started with Dashboard. You will find however, that by the time you've started trying to do complex things with Dashboard, the level of knowledge required evens out.

If you have never used any framework before, I would recommend either sticking with the default VueJS/bootstrap-vue or going with jQuery.

jQuery is a lot easier to start with if you already have some programming knowledge. Vue is much better if you want to get the most responsive data-driven UI with minimal boilerplate. Vue has a slightly higher learning curve.

Vue will let you easily change button colours and even animate the change.

Angular is really only useful if you are part of a large team creating a really complex UI. REACT falls somewhere in the middle.

One advantage of both jQuery and Vue over the others is that you are much less likely to need a build step.

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [29 August 2020 19:47 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/4 "2020-08-29T19:47:03Z")

</div>

Thanks for the feedback. I thought that was the case, but since I was already teaching myself what I needed to know about HTML and CSS to use the template nodes, I was hoping that I didn't have to learn much more to do the basic things I had in mind.

It seems that once I get it set up the main difference is that

```auto
 console.info(' property msg changed!', msg)

```

in dashboard temple node will become

```auto
uibuilder.onChange('msg', function(newVal){
    console.info('property msg changed!', newVal)
})

```

and

```auto
ng-click="send({payload: 'on', room: 'game'}

```

will become

```auto
uibuilder.send( {payload: 'on', room: 'game'})

```

---

<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 20:10 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/5 "2020-08-29T20:10:18Z")

</div>

> [@tmichaeltx](#):
>
> since I was already teaching myself what I needed to know about HTML and CSS to use the template nodes, I was hoping that I didn't have to learn much more to do the basic things I had in mind.

You won't need to know that much more. Though if you decide to use Vue, there will be a small learning curve for that as well.

> [@tmichaeltx](#):
>
> `console.info`

Sort of, though your Dashboard example would need to be a lot more complex to be equivalent to the uibuilder version. The uibuilder version runs in the browser and the function is triggered whenever a msg is received from Node-RED via the uibuilder node. In the ui\_template example, to be really equivalent, you would need to include a `watch` function. There is an example somewhere on my blog or in the Node-RED Cookbook.

> [@tmichaeltx](#):
>
> `ng-click`

Not quite. That part belongs in the HTML whereas your uibuilder example belongs in the JavaScript. You will still need to trigger the uibuilder.send from a function. The default template has the example already coded though and you can easily adapt it.

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [29 August 2020 20:21 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/6 "2020-08-29T20:21:52Z")

</div>

I am good at cutting/pasting/modifying, so it sounds like this is the right path for my needs. Of course the responsiveness of everyone in the forum has made node red a great environment. I am sure I will be able to get help if needed unless I am doing something truly bizarre.

---

<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 20:58 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/7 "2020-08-29T20:58:29Z")

</div>

> [@tmichaeltx](#):
>
> unless I am doing something truly bizarre

Actually, you may get even more help then 🤣

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [30 August 2020 01:12 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/8 "2020-08-30T01:12:01Z")

</div>

When building inside UIbuilder, have people had experiences that definitively use Font Awesome 4.x or 5.x or whichever has what you need? I am planning to only use free icons either way.

---

<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:** [31 August 2020 16:13 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/9 "2020-08-31T16:13:13Z")

</div>

Personally, I tend to go grab the SVG versions of what I want and just use those. I don't need to use the font or library versions typically. That lets me just add the images I want into the uibuilder instance src folder (or a sub-folder if you prefer). You could also use the shared folder or even Node-RED's static folder, any would work since you are only loading a simple image file.

If you do want to use the font or library versions, you can either load via a CDN or use uibuilder's library manager to install it from npm.

---

<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:** [30 October 2020 16:13 UTC](https://discourse.nodered.org/t/transition-from-dashboard-to-uibuilder/32194/10 "2020-10-30T16:13:22Z")

</div>

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