This major upgrade of UIBUILDER has been some 9 months in preparation. 325 commits, 244 files changed. UIBUILDER is now some 12,598 total lines of code (22,400 including comments).
You should read through the potentially breaking changes. They are very unlikely to really impact anyone but it is hard to know for sure. As always, it is best to test before going into production.
The last major release, v6, really felt like a big maturity step for UIBUILDER (which is now around 10 years old) and this v7 release really builds on that. Focus has very much been on UIBUILDER as a mature tool for anyone using Node-RED to build data-driven web apps. It retains all of its flexibility but continues to make working with HTML/CSS and occasional JavaScript a breeze.
I really hope you find some amazing things in this release. If you do, please let me know in the Node-RED forum. And if you don't, let me know as well!
There is much more to come from UIBUILDER. Check out the roadmap in the docs, this shows you the vast number of ideas and improvements that I have in mind for the future. But, as always, I'm open to suggestions so please do reach out.
Regards, Julian.
PS: The changelog for this release is SO LARGE that it exceeds the allowed post size!! So please check out the CHANGELOG in the live docs for all the gory details and the fantastic new features, fixed bugs and improved documentation. 
Potentially Breaking Changes
Note that potentially breaking changes are only introduced in major version releases such as this one. It has been a couple of years now since the last, v6, major version.
Most of these changes will not impact most people but you should check through them just in case.
-
If using UIBUILDER's custom ExpressJS server feature (instead of the Node-RED built-in one), URL's are now case sensitive
This brings them into line not only with W3C guidance but also with the Socket.IO library. It can be turned off in
settings.jsusing propertyuibuilder.serverOptions['case sensitive routing']set to false.Note that when using Node-RED's internal ExpressJS web engine (the default), URLs are still case-insensitive because that's how core Node-RED has been configured.
-
Minimum node.js now v18 - in line with the release of Node-RED v4, the minimum node.js version has moved from v14 to v18.
If you need to update your own servers, please remember to do an
npm rebuildof all node.js packages afterwards. -
Rewrite of the
uibuilder.eventSend(event)function in the client library.This might have an impact only if you were relying on some of the auto-naming features of form elements since the formula for that has been significantly improved.
That function has been extensively re-written and should provide significantly better results now.
-
Removal of the uibuilderfe library
If you are still using this old library in your HTML code, please move to the module based library as it is far more feature rich and has many bugs removed.
-
Removal of the
uib-listnodeThe
uib-elementnode does everything that it did and more. -
Moved socket.io-client from dependencies to dev-dependencies
If using the module based client library, you should not be loading the Socket.IO client yourself since it is already built into the client library. If you are still using the old
uibuilderfeclient, you should replace that and remove the socket.io client library from your html files. -
Removed the css auto-load from the client library
This automatically loads the
uib-brand.cssif no css is provided at all. Since all of the standard templates include some CSS and have for a long time, this should not impact anyone.At least 1 person hit a race condition. ref. So this is best removed.
-
jsdom(using in theuib-htmlnode) now tracks the latest releases againShouldn't be breaking at all but you might still want to review things since the new versions of
jsdomare likely to have better available features. We were restricted to jsdom v21 previously as newer versions required node.js v18+. -
ejspackage removedThis should not impact anyone.
ejsis an ExpressJS server-side templating library and what instructions exist (minimal) say that you need to install it manually. A new How-to: Server-side Rendered Views has been created to help understand how to use server-side templating. It is far from complete however. -
Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.
-
A
uibuildernode cannot be given a URL name ofcommonas this would clash with the built-in folder of the same name that holds resources that can be shared with all instances. This was an oversight in previous releases I'm afraid, now fixed. -
The
uibuildernode, no longer has the "Show web view of source files (deploy before you can use it)" option. The supporting external library was also removed. It never looked that good anyway. Please use the newuib-file-listnode to produce a custom folder/file list and send to your own custom page. -
Not really a breaking change but worth noting - if you use the Svelte template, that has been updated to use the latest versions of Svelte and Rollup. Those are both at least 2 major versions newer. In doing so, I had to replace a dev dependency and make changes to the config and npm scripts.
Highlights
-
Some tweaks to the documentation should make it a little easier to get started with. The menu and UX has also been tweeked. There are new pages covering easy UI updates, common design patterns, creating well-structured HTML pages, and troubleshooting.
-
The new node
uib-file-listwill produce a list of files from a uibuilder instance. It automatically adjusts to the currently served sub-folder and allows filtering. Use this for producing indexes and menus. -
Markdown improvements.
Both the main uibuilder node (via the
ui.jslibrary) and theuibrouterlibrary both accept markdown content (via the external Markdown-IT library) and now they both support Markdown-IT plugins so that you can add features such as checkbox lists, GitHub style callouts, Mermaid diagrams and much more.There is also a new documentation page dedicated to using Markdown.
And, the no-code example flow has been extended to demonstrate how to dynamically load all of the libraries, plugins and even how to set up responses back to Node-RED - for example when a checkbox is clicked.
-
Wherever you can use no-/low-code features that accept HTML, you can now include
<script>tags that will be executed on load. -
Handling of forms and inputs continue to improve.
- Programmatic changes to input values or checked properties now trigger both the
inputandchangedevents - something that HTML normally doesn't do but can be important for data-driven web apps. For example, if using an<output>tag to show a combined or calculated input, changes via Node-RED will still update the values. - When using the
eventSend(event)function on inputs whether inside or outside of a form, the returned values have been improved, especially for checkboxes and radio buttons.
- Programmatic changes to input values or checked properties now trigger both the
-
File uploads from client browser to Node-RED are now enabled.
When using a form on a page and using
<input type="file">, if a file is selected by the client and the file is less than the size of the maximum message size, the file will be automatically uploaded to Node-RED when the form is submitted (assuming you useuibuilder.eventSend(event)to submit the form). The upload is a message with file details and the file itself as a buffer inmsg.payload. -
Security of the UIBUILDER repository on GitHub has been improved.
-
On the
uibuildernode's "Core" tab, the info buttons bar has changed slightly.The "Docs" button has gone (it is still on the top of panel bar anyway) and been replaced by a new "Apps" button which shows a page listing ALL uibuilder node instances along with their descriptions where provided.
Most of the UIBUILDER nodes have be given a bit of a refresh of their Editor configuration panels. This work is ongoing but should give a more consistent look and feel and make the panels rather more responsive. The layouts are starting to use more modern CSS features. The work isn't complete yet so there are still a few inconsistencies - for example, when you make the panel wider - but we are getting there.
-
UIBUILDER now has its own "hooks" feature. For now, these can be used for allowing/blocking or debugging messages. More hooks may be added.
By adding
uibuilder.hooks(...)to Node-RED'ssettings.jsand adding either of the functionsmsgReceivedormsgSending, those functions will run when msgs are received from the client or about to be sent to the client respectively. Both functions need a return value of eithertrueorfalse.trueallows the msg through,falseblocks the msg. You can also use the functions to alter the msg and, of course, to report on it to the Node-RED log. The functions receivemsgandnodeas the arguments. So you can filter on the node's URL, socket id, client id, page name, etc.As well as debugging or msg altering, you can use these to help with message filtering, especially useful as part of authentication and authorisation processes. And somewhat simpler to use than Socket.IO middleware (which is still available).
-
Connection headers have been added to the client details that are shown on control messages and on standard messages if the uibuilder "Include msg._uib in standard msg output." advanced flag is turned on. These may be particularly useful if using 3rd-party identity (authentication and authorisation) tooling which may put validated data into custom headings. Note however that these are "connection" headers, ongoing communications between the clients and the server do not update the headers (not possible over websockets) but will be updated if the client reconnects or reloads.
-
Documentation improvements
- Access to the documentation inside Node-RED is now available fully offline, no Internet needed.
- There are lots of new and update pages to explore.
-
New example flows: (1) client-side code/Dynamic SVG - A rework of an example from the flows library showing how to overlay interactive lamp icons on an SVG plan backdrop. Turn on/off lights from the web and from Node-RED. (2) Blog/content grid layout. (3) Dashboard grid layout.
-
Updated example flows: Various examples have been updated to simplify or improve them, including (1) Simple Flow - index.(html|js|css) can now be populated from a flow that uses uib-save. low-code/report-builder - The required Markdown-IT library is now auto-loaded from the Internet.
-
For anyone even vaguely comfortable with HTML or front-end development:
-
You can now add a
uib-topic="mytopic"attribute to ANY HTML element. Doing so makes that element responsive to messages from Node-RED.For a message with the correct
msg.topic. Themsg.payloadwill replace the inner HTML of the element.msg.attributeswill update corresponding element attributes. Making this now one of the easiest ways to define dynamic updates in your UI. -
The built-in
<uib-var>web component has been updated to be able to directly output HTML tables and lists, simply send the appropriate data & set thetypeattribute. -
A new library example has been added to illustrate the different ways to easily update your web pages using this component and the
uib-topicattribute. -
New built in web components which can be used in your HTML without the need for writing JavaScript
<uib-meta>Display's facts about the current page such as its file size, when it was created and when it was last updated.<apply-template>Takes the content of a<template>HTML tag and appends that content as children of itself. Allowing you to re-use standard, repeatable HTML without the need for JavaScript coding and without the need of sending potentially lengthy HTML from Node-RED every time it is needed.
-
The
$function now allows a second parameter to change the output. Previously the output would always be the DOM Element. Now you can return the inner text, inner HTML or a list of attributes of the element. e.g.$('.myelement', 'text'). Remember though that$()returns a DOM element by default so all DOM element API's are available, e.g.$('#myid').datasetwill return alldata-*attributes. -
Lots of extensions and improvements to the
uibrouterfront-end routing library in this release:-
You can now define a set of external html files (that can include scripts and css just like routes) that are immediately loaded to the page. These can be defined in the initial router config when they will be loaded immediately (before routes) or can be manually loaded later. Use these for things like menu's or other fixed parts of the UI.
-
You can now define route content as Markdown instead of HTML. This makes Notion/Obsidian-like applications feasible using UIBUILDER.
-
You can now use Markdown-IT plugins to enhance your Markdown content.
-
You can start with an empty routing list to allow dynamic creation of routes later on.
-
-
There are many new functions added to the
uibuilderfront-end library. Some are standard utility functions such as fast but accurate number rounding or conversion of primitives into objects. Others simplify the use of the DOM. -
Console logging level can now be set when loading the uibuilder client library. This allows the startup configuration of the library to be debugged.
-
-
For node developers
- New events are now available using
RED.eventsthat track the setup of uibuilder, the setup of each uibuilder node instance and node instance url renames.
This allows 3rd-party extensions to UIBUILDER to be more easily created. The events pass references to all of the information you might need. New documentation also now available for contributors showing the various ways to easily build new content and features through custom nodes and web components.
- New events are now available using
