# UI-Builder formatting of the output variables (upgrade v3-v5)

**URL:** <https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [6 February 2026 10:15 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324 "2026-02-06T10:15:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [6 February 2026 10:15 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324/1 "2026-02-06T10:15:50Z")

</div>

Hi, I'd like to upgrade from UI-Builder version 3.3.1 to UI-Builder version 7.5.0. Unfortunately, I'm having trouble with the formatting.

I want the background to change depending on the value of the variable.

In version 3.3.1, this worked as follows:

```auto
<a class="link short" style="margin: 477px auto auto 609px;">
  <div id='p2' div class="nio" v-bind:style="TempOven>=0 ? 'background-color:lime' : 'background-color:red'">
    {{TempOven.toFixed(0)}}
  </div>
</a> 

```

Is there a way to include the variable in a way that preserves the formatting?

Thanks for your help.

---

<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:** [6 February 2026 14:33 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324/2 "2026-02-06T14:33:41Z")

</div>

Hi, so are you continuing to use VueJS with UIBUILDER?

If so, there shouldn't be any changes needed in your code.

_Except_ that, I can't quite remember when I moved vendor libraries from using Node-RED's `userDir` to using the `uibRoot` folder instead. I suspect though, that is the issue. Check the library manager tab in your uibuilder node to see what is installed - probably nothing? If so, you simply need to add the appropriate libraries that you need. You might also need to adjust your `index.html` so that it loads the libraries from the updated location. Sorry, it's been so long since v3 that I can't remember whether the links changed.

Also, take care when installing VueJS because they changed the default from v2 to v3 some years back. If you are using Vue v2, you can install that in the library manager simply with `vue@v2`.

You should also double-check your `index.html` for other changes needed. For example, you will need to use the "new" rather than the old uibuilder client library. The easy thing to do is to add a new uibuilder node, give it a test name, deploy and then check the default index.html for the updated template. Note that you no longer need to manually load the [socket.io](http://socket.io) client library, all of that is now built into the uibuilder client library for ease of use.

You will also note that your `index.js` no longer needs `uibuilder.start()`. Newer versions of the client library are far more able to work out the correct connections without needing any help.

You will be glad to know that these kinds of more major changes that require changes to your front-end code are things of the past now. The whole service is now a lot more stable. Major version changes now only really happen when Node-RED itself has a new major version uplift and that is really only to change to a newer baseline node.js version which allows ongoing improvements to code.

One final thing to note, I currently recommend using no more than node.js v22. The next minor release of uibuilder has a fix for a small issue in node.js v24+.

---

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [9 February 2026 06:46 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324/3 "2026-02-09T06:46:56Z")

</div>

Thanks for the quick reply.

It worked after installing Vue.js.

Just out of interest, how would it work with the new method?

And thanks again for the quick reply.

---

<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 February 2026 10:58 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324/4 "2026-02-09T10:58:40Z")

</div>

Instead of  
`v-bind:style="TempOven>=0 ? 'background-color:lime' : 'background-color:red'"`  
There are various ways you could do this. A vanilla way would be to use `uibuilder.onChange('msg', ...)` to set the style on the element directly when you receive a temperature change. Or set a dataset value to true if \>=0 and then use CSS selectors in your stylesheet.

For this:

```auto
{{TempOven.toFixed(0)}}

```

Replace with something like this:

```auto
<uib-var variable="TempOven" filter="uibuilder.formatNumber(0, 'en-US')"></uib-var>

```

This assumes that you use uibuilder's managed variables (roughly equivalent to Vue's managed data variables), so something like `uibuilder.set('TempOven', msg.payload)`.

Even easier would be to use `uib-var` with the `topic` attribute instead. Then you just need to send a msg with the right topic, the payload will replace the visible value on receipt.

That last hint would also lead you to realise that you could simplify your HTML significantly. Add a style class to your `<a>` to make it a block display and include the margin and incorporate the `nio` class styling as well so that you no longer need the extra `<div>`. Then you could use the `uib-topic` attribute on the `<a>` tag.

```auto
<a class="blocklink nio" uib-topic="upd-temp-oven">
   N/A
</a>

```

Sending a message now would let you control everything from Node-RED.

Let me know if you would like more info on any of this. Here are some pointers to the docs. [Easy UI Updates](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/using/easy-ui-updates), [Custom Components](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/custom-components), [Controlling from Node-RED](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/control-from-node-red).

---

<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:** [10 May 2026 10:58 UTC](https://discourse.nodered.org/t/ui-builder-formatting-of-the-output-variables-upgrade-v3-v5/100324/5 "2026-05-10T10:58:52Z")

</div>

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