# Question Regarding uibuilder

**URL:** <https://discourse.nodered.org/t/question-regarding-uibuilder/38854>\
**Category:** General\
**Created:** [9 January 2021 16:35 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854 "2021-01-09T16:35:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [9 January 2021 16:35 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/1 "2021-01-09T16:35:04Z")

</div>

I have been practicing programming` uibuilder` with `vue` & `bootstrapVue`. I have worked up a database manipulation program following an excellent tutorial and I can get data through the network with a `vue method` using `async` and `fetch()`.

However, what I actually want to do is get the data from Node-red. I have achieved this by sending a `msg` to Node-red with `uibuilder.send` and updating `vue data` properties when the return `msg` is identified by `uibuilder.onChange` in the `mounted` section of the `vue` app.

The question is; is there any other way of getting a `msg` object into the `vue` app other than through the `onChange` event in `mounted`? I have looked at the exposed methods and apart from `uibuilder.send` have not been able to get anything out of them when used in the `vue methods` or `watch` sections.

I would point out that I am pretty new at Javascript & vue so I am probably missing something that is obvious. If so, if someone would point me in the direction of an explanation I would be most grateful.

---

<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:** [9 January 2021 17:29 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/2 "2021-01-09T17:29:17Z")

</div>

> [@Buckskin](#):
>
> is there any other way of getting a `msg` object into the `vue` app other than through the `onChange` event in `mounted` ?

Urm, what else would you want?

This exactly mirrors what happens in a Node-RED node and that is deliberate so that the processing is very familiar.

I am looking at some additional helper methods that would let you directly update a Vue data variable given a specific incoming msg.topic or via some pre-defined data schema in the send msg. However, I haven't yet managed to get the code stable and I needed to get v3 live so I pulled it from v3.0.0.

All that will do however is make it easier to directly update a Vue variable based on crafting a specifically formatted msg from Node-RED. It slightly simplifies your front-end code but will not offer anything you cannot already do using a simple onchange function (that also has the advantage that it isn't Vue specific and so can be used with other frameworks, one of the key design principles of uibuilder).

To be clear, the `uibuilder.onchange('msg', function(msg){})` function is triggered every time Node-RED sends a msg to the uibuilder node. Consider it equivalent to using a function node in Node-RED except that it has no output only an input. It is in the `mounted` section of the Vue app to ensure that it doesn't start working before Vue has set up its responsive variable handling.

If you can identify something that would make life simpler for beginners, please let me know. I'm always open to new ideas.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [9 January 2021 20:55 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/3 "2021-01-09T20:55:20Z")

</div>

I think I was trying to be too `vue` and not enough `Node-red`. What I was trying to do was run a method in the `mounted` section - send a `msg` back to Node-red to trigger the sending of a `msg` with the required data - and get the resultant `msg` in the method (the problem I was having is that there is no `async` way I could think of doing this ).

The idea was to reduce the possible number of targets for a returned `msg`. As you say, the easiest and obvious way is to update the `vue` properties in the `onChange`

I am not sure about making things simpler for beginners but one thing may help (well me anyway) and that is some examples of the usage of the `uibulder methods`. `send` and `onChange` are well documented in the examples but I could not find any using the other methods. (particularly `uibulder.msg` as I have not been able to get this to work, so obviously have a wrong idea of how it DOES work)

---

<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:** [9 January 2021 22:08 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/4 "2021-01-09T22:08:32Z")

</div>

> [@Buckskin](#):
>
> could not find any using the other methods. (particularly `uibulder.msg`

If you look in the unminimised version of uibuilderfe.js, you will see some example usage. Also there may be some examples in the docs folder.

[https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/front-end/src/uibuilderfe.js#L1115-L1121](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/front-end/src/uibuilderfe.js#L1115-L1121)

In that specific example, `uibuilder.msg` is just a helper in case you ever need to retrieve the last inbound msg. In reality I am not sure you ever would need that when working with Vue as it is best to set a Vue data variable from the onchange function. Then you can just focus on using the vue variable. It might be useful for people not using Vue though.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 January 2021 21:47 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/5 "2021-01-11T21:47:02Z")

</div>

My main problem with uibuilder methods was a misunderstanding of what properties are involved .The problem with uibuilder.msg was that on my system there is ~100 millisecond delay between sending a msg to a Node-red function and getting an answer back. I have followed your advice and just worked with onChange and a Vue data variable.

On use of uibuilder & Vue by beginners, I have tried the `Load Vue components without a build step (modern browsers only)` and have found the alternative using `http-vue-loader` to be much easier and straight-forward. Trying to sort out how to get a scoped style section in a `.js` file was one step too many. Also, most examples I have found use a `.vue` file.

---

<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:** [11 January 2021 21:59 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/6 "2021-01-11T21:59:02Z")

</div>

> [@Buckskin](#):
>
> Trying to sort out how to get a scoped style section in a `.js` file was one step too many

Can't say I'm surprised. That documentation was as much a note to myself so that I don't forget it. In the future, I think it will become the standard. Once browsers catch up and Vue moves forward.

For myself, I always try to see if you can just load the component in a script tag first. If you can, it is by far the best approach. If that isn't possible, http-vue-loader is the second choice.

Glad you are moving forward anyway.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 January 2021 22:40 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/7 "2021-01-11T22:40:01Z")

</div>

Errm. Just updated to uibuilder 3.0.1, is there un update somewhere. I finally realised (remembered something you said elsewhere) that I had to add bootstrap & bootstrap-vue to the libraries

---

<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:** [11 January 2021 22:49 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/8 "2021-01-11T22:49:13Z")

</div>

you should be fine - what version were you using before?

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 January 2021 22:51 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/9 "2021-01-11T22:51:28Z")

</div>

3.0.0. Everything worked in 3.0.1 once I loaded the bootstrap libraries

---

<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:** [12 March 2021 22:51 UTC](https://discourse.nodered.org/t/question-regarding-uibuilder/38854/10 "2021-03-12T22:51:28Z")

</div>

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