# UIBUILDER variable does not update
**URL:** https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744
**Category:** General
**Tags:** uibuilder
**Created:** [9 November 2023 16:23 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744 "2023-11-09T16:23:41Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Mbessing](https://discourse.nodered.org/u/Mbessing)
#### Post date: [9 November 2023 16:23 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/1 "2023-11-09T16:23:41Z")
Hi,
I have Node-RED installed on a Rasperry Pi with a Flowfuse agent running on it. I am trying to set up a stand-alone web server by using the uibuilder node. I want to show a value of a variable that changes frequently. However, I am only able to show the name of the variable and not the actual value. I tried to install vue, however it seems to be still not working. I am not sure if something fails during the installlaton or what happens. The same flow works on a local instance on my computer. These error messages are shown:
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [9 November 2023 17:34 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/2 "2023-11-09T17:34:10Z")
I don't use Flowfuse I'm afraid so I may not be able to help if the issue stems from that.
For uibuilder itself, those errors show that your reference to the VueJS library is not correct. The best place to start is with one of the built-in example flows as those will definitely run unless there is a local configuration issue. Once you have an example flow working, you can begin to amend it to your needs.
By the way, if you are using uibuilder v6.6, you don't need Vue to be able to show a dynamic variable. Instead you can use `` and change the variable using the set command - e.g. send a msg to uibuilder containing this:
```json
{
"_uib": {
"command": "set",
"prop": "myvar",
"value": "my value"
}
}
```
Or you can do it in front-end code with:
```js
uibuilder.onChange('msg', (msg) => {
uibuilder.set('myvar', msg.payload) // or whatever data you want
}
```
---
### Author:  [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [10 November 2023 11:22 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/3 "2023-11-10T11:22:55Z")
> [@TotallyInformation](#):
>
Julian,
what if myVar is a JSON? How can I display single elements from: `` ?
---
### Author:  [@Mbessing](https://discourse.nodered.org/u/Mbessing)
#### Post date: [10 November 2023 13:44 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/4 "2023-11-10T13:44:29Z")
Thanks for your reply. I talked to Flowfuse support and they did not think it stems from Flowfuse. By any change, do you have a simple example flow of displaying and chaning af variable, for example with ?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 November 2023 14:36 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/5 "2023-11-10T14:36:08Z")
> [@fmarzocca](#):
>
> what if myVar is a JSON? How can I display single elements from: `` ?
I knew someone would ask that! 🙂
Quite simple - use a second managed variable set to the appropriate property of the first.
```auto
uib.set('mycomplexvar', {fred:32, jim:42})
uib.set('jimsAge', uib.get('mycomplexvar').jim)
```
Obviously not perfect since updating jim's age in `mycomplexvar` (`uib.set('mycomplexvar.jim', 52)`) does not directly update the `jimsAge` variable.
This was the 1st release of this component though and I am certainly open to ideas for improving it.
> [@Mbessing](#):
>
> By any change, do you have a simple example flow of displaying and chaning af variable, for example with ?
Do you mean getting Vue working or using ``?
For Vue, look in Node-RED's import library under Examples and uibuilder and import the "Templates" example flow. This has a whole flow tab showing examples for each of uibuilder's templates. There are several VueJS related templates both for Vue v2 and Vue v3.
For uib-var, here are some examples:
```auto
[{"id":"60a8489436d0ee43","type":"debug","z":"ff1a7711.244f48","name":"uib Std Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":865,"y":2980,"wires":[],"l":false},{"id":"ff050c4347776e67","type":"uibuilder","z":"ff1a7711.244f48","name":"","topic":"","url":"uib-var-test","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.6.0","showMsgUib":true,"title":"","descr":"","x":700,"y":3020,"wires":[["60a8489436d0ee43"],["86ffc76eb5838f6c"]]},{"id":"86ffc76eb5838f6c","type":"debug","z":"ff1a7711.244f48","name":"uib Control Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":865,"y":3040,"wires":[],"l":false},{"id":"b9605e7d0a662387","type":"link in","z":"ff1a7711.244f48","name":"uib in","links":["6a4c985e0fc73c31","5c5965ac4682fc53"],"x":565,"y":3020,"wires":[["ff050c4347776e67"]]},{"id":"6a4c985e0fc73c31","type":"link out","z":"ff1a7711.244f48","name":"uib ctrls out","mode":"link","links":["b9605e7d0a662387"],"x":865,"y":3260,"wires":[]},{"id":"ab72b1d0039a5cb3","type":"inject","z":"ff1a7711.244f48","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":385,"y":3120,"wires":[["7c499ac47dc01640"]],"l":false},{"id":"e33a29855f036e79","type":"uib-element","z":"ff1a7711.244f48","name":"","topic":"","elementtype":"html","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"md001","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"last","positionSourceType":"str","passthrough":false,"confData":{},"x":680,"y":3120,"wires":[["5c5965ac4682fc53"]]},{"id":"7c499ac47dc01640","type":"template","z":"ff1a7711.244f48","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"\n UIBUILDER Version: \n
\n Random # from Node-RED: (No Value)\n","output":"str","x":480,"y":3120,"wires":[["e33a29855f036e79"]]},{"id":"2d07723a33514785","type":"inject","z":"ff1a7711.244f48","name":"SET myrandom var","props":[{"p":"_uib","v":"{\t \"command\":\"set\",\t \"prop\":\"myrandom\",\t \"value\":$formatInteger($random() * 100, \"0\")\t}","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":690,"y":3340,"wires":[["6a4c985e0fc73c31"]]},{"id":"5c5965ac4682fc53","type":"link out","z":"ff1a7711.244f48","name":"uib ctrls out","mode":"link","links":["b9605e7d0a662387"],"x":865,"y":3120,"wires":[]},{"id":"29f2d5712c08232b","type":"uib-tag","z":"ff1a7711.244f48","name":"","topic":"","tag":"uib-var","parent":"#more","parentSource":"","parentSourceType":"str","elementId":"uibvar03","elementIdSourceType":"str","position":"last","positionSourceType":"str","slotSourceProp":"Default value","slotSourcePropType":"str","attribsSource":"{\"variable\":\"myvar3\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":670,"y":3180,"wires":[["5c5965ac4682fc53"]]},{"id":"130704c99e375d77","type":"inject","z":"ff1a7711.244f48","name":"Blank myvar3","props":[{"p":"_uib","v":"{\"command\":\"set\",\"prop\":\"myvar3\",\"value\":\"\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":710,"y":3260,"wires":[["6a4c985e0fc73c31"]]},{"id":"0e7d0e2fdb0cc462","type":"inject","z":"ff1a7711.244f48","name":"Random myvar3","props":[{"p":"_uib","v":"{\t \"command\":\"set\",\t \"prop\":\"myvar3\",\t \"value\":$formatInteger($random() * 100, \"0\")\t}","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":700,"y":3300,"wires":[["6a4c985e0fc73c31"]]},{"id":"eeb24d2935b76147","type":"inject","z":"ff1a7711.244f48","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":515,"y":3180,"wires":[["29f2d5712c08232b"]],"l":false},{"id":"a29c18dfe4a6926b","type":"comment","z":"ff1a7711.244f48","name":"Dynamic add HTML with 2 shown vars","info":"","x":1070,"y":3120,"wires":[]},{"id":"bebda3baf75a1209","type":"comment","z":"ff1a7711.244f48","name":"Add single shown vars dynamically","info":"","x":1060,"y":3180,"wires":[]},{"id":"f2591948e1dea11e","type":"comment","z":"ff1a7711.244f48","name":"Blank 3rd var","info":"","x":990,"y":3260,"wires":[]},{"id":"22c52f9ce8e9ea37","type":"comment","z":"ff1a7711.244f48","name":"Set 3rd var to random number","info":"","x":1040,"y":3300,"wires":[]},{"id":"5f237a9ee055b71d","type":"comment","z":"ff1a7711.244f48","name":"Set 2nd var to random number","info":"","x":1040,"y":3340,"wires":[]}]
```
The next release of uibuilder (v6.7) will have uib-var examples available.
---
### Author:  [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [10 November 2023 15:39 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/6 "2023-11-10T15:39:44Z")
> [@TotallyInformation](#):
>
> Obviously not perfect since updating jim's age in `mycomplexvar`
I have objects with 10-20 fields.... Maybe I should manage them in JS (with `uibuilder.onChange`) to properly unpack and not use the `html` syntax.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 November 2023 20:45 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/7 "2023-11-10T20:45:57Z")
> [@fmarzocca](#):
>
> I have objects with 10-20 fields.... Maybe I should manage them in JS (with `uibuilder.onChange`) to properly unpack and not use the `html` syntax.
That is certainly the most flexible way. I will continue to try and think up some better ways to manage deep object changes but it isn't easy and even things like Vue can have difficulties and they are much larger frameworks.
If you think of something that might help in this area, do let me know. Maybe something about javascript object proxies.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [9 January 2024 20:46 UTC](https://discourse.nodered.org/t/uibuilder-variable-does-not-update/82744/8 "2024-01-09T20:46:47Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.