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