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

General
1

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:

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

2

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

3

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.

4

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:

{{TempOven.toFixed(0)}}

Replace with something like this:

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

<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, Custom Components, Controlling from Node-RED.