UIBUILDER: Welcome to 2025! What's ahead?

Share Your Nodes
1

Hi all and welcome to 2025 - here's hoping that the next 1/4 century is a bit less bonkers than the last.

Thought some folk might be interested in what is happening in the world of UIBUILDER for Node-RED.

First point is that v7.1 is due out very shortly. A relatively small update but with a few nice goodies, see below.

Second point is that uibuilder updates slowed down over the last few months for a few reasons. Partly some family and work commitments. But also because I've been working on my web components - which, of course, can be used not only with UIBUILDER but with any web page - including Dashboard. And I've also created a new web site using Astro but using my own custom layouts and tools. Notably, there will be some updates to uibuilder's uib-brand.css file from that work and that includes the use of LightningCSS which is a tool that does for CSS what ESBUILD does for JavaScript.

So, 2025 should continue to be a great year for anyone wanting to use Node-RED to build custom web sites, especially data heavy ones.

Here are some of the highlights so-far for UIBUILDER v7.1 ...

  • Any Node-RED custom node will be able to send a message to a uibuilder client! In your runtime code, simply add RED.events.emit('UIBUILDER/send/<url-name>', {payload: 'Hi from my custom node!'}) where <url-name> is the URL set in a deployed uibuilder node. The data will be sent to all browser tabs connected to that uibuilder endpoint. Note though that this bypasses any uib-cache node.

    I am planning to add a method that allows this from a core function node as well. Which will mean that any function node will also be able to easily send messages to any uibuilder managed front-end web page.

  • For front-end coders, you now have access to a number of table manipulation functions. Making it very easy to create and manipulate tables in your web pages from simple input data. You can add and remove tables, table rows and add event handlers (e.g. click) to rows or cells. Cell updates were already easy using standard HTML API's or by using the uib-update node so nothing new needed there.

  • In addition to the above, the internals of table creation have been refactored to allow for additional column definition configuration using a standardised schema. This will be promoted to the uib-element node as well.

  • A lot of focus for this release has been on internals. Further improvements to code security using socket.dev. Refactoring some code into plugins. Improving the uib-brand.css using LightningCSS. Removed some deprecated code.

  • I've also moved element definitions for the uib-element node into a common folder with descriptions and options html in a locale-specific sub-folder. This will make adding and maintaining elements a whole lot easier in the future. The first beneficiary of this is likely to be table and table row handling as we can now use the new table functions. That will also add the long-missing column configuration options & the ability to add browser event listeners (for click handling, etc).

  • I've added a reminder to the template index.html files not to remove the required uibuilder library after seeing a few cases of people doing that.

As always, if there is something you want to see in UIBUILDER or something not quite working as needed, please let me know.

:sparkler: Happy New Year! :fireworks:

4 Likes
2

Small update - the website link was not quite correct. Now corrected.`