# 🌟 UIBUILDER Major Release v7.0.4 - Yes, it’s here! The latest major version of UIBUILDER

**URL:** <https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [1 September 2024 16:09 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618 "2024-09-01T16:09:06Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [1 September 2024 16:09 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/1 "2024-09-01T16:09:06Z")

</div>

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](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/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**

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

- **Rewrite of the `uibuilder.eventSend(event)` function** in the client library.

- **Removal of the uibuilderfe library**

- **Removal of the `uib-list` node**

- **Moved socket.io-client from dependencies to dev-dependencies**

- **Removed the _css auto-load_ from the client library**

- `jsdom` (using in the `uib-html` node) now tracks the latest releases again

- `ejs` package removed

- Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.

- A `uibuilder` node cannot be given a URL name of `common` as 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 `uibuilder` node, 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 new `uib-file-list` node 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-list` will 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.

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

- File uploads from client browser to Node-RED are now enabled.

- Security of the UIBUILDER repository on GitHub has been improved.

- On the `uibuilder` node's "Core" tab, the info buttons bar has changed slightly.

- UIBUILDER now has its own "hooks" feature. For now, these can be used for allowing/blocking or debugging messages. More hooks may be added.

- 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

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

- For node developers

---

<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:** [1 September 2024 16:25 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/2 "2024-09-01T16:25:08Z")

</div>

And, I missed an important highlight!

UIBUILDER now adds a `msg._client` property if it recognises any of a number of common external authentications. Including FlowFuse, Authelia, and others.

For details see:

[Authenticated Client Properties (UIBUILDER v7 docs)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/security/authenticated-client-properties)

> [@Standardising authorised user details across dashboards and uibuilder](https://discourse.nodered.org/t/standardising-authorised-user-details-across-dashboards-and-uibuilder/89798):
>
> Hi all, there has been some work done by FlowFuse @joepavitt and a couple of other contribotors @fullmetal-fred and @kitori on standardising authorised client information for Dashboard 2. Having seen this, I thought it would be good to bring the same data standard into UIBUILDER as well. Whereas for D2, you need a plugin, for UIBUILDER I wanted to build in some basics and then allow a hook to allow other methods to be used if needed. In doing so however, I did note a few potential issues wi…

---

<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:** [1 September 2024 17:06 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/3 "2024-09-01T17:06:58Z")

</div>

Apologies, now onto v7.0.2 as a couple of bugs slipped through.

---

<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:** [2 September 2024 16:11 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/4 "2024-09-02T16:11:28Z")

</div>

And another quick bug fix brings us up to v7.0.3!

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 September 2024 22:47 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/5 "2024-09-05T22:47:31Z")

</div>

Might wait for version 8, will that be by the end of the week ?  
😜

---

<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:** [5 September 2024 23:18 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/6 "2024-09-05T23:18:24Z")

</div>

> [@Sean-McG](#):
>
> will that be by the end of the week

Haha 🤣

I think it might make a week more. 🙂

But seriously, UIBUILDER has been usable for a long time now. So I hope people don't wait but rather get stuck in and see how useful, easy and powerful it is.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 07:48 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/7 "2024-09-06T07:48:48Z")

</div>

Upgraded to 7.0.3 with no issues at all!

Thank you, Julian!

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 10:35 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/8 "2024-09-06T10:35:00Z")

</div>

I spoke too soon: all lines with this instruction:

`uibuilder.send({ payload: x, topic: 'pala/vent' }, nodeRFSend)`

are no more sending the payload! (nodeRFSend is the ID of an `uib-sender` node).  
No errors in browser console or in NR.

I have also tried this syntax, with no luck:

`uibuilder.send({ payload: x, topic: 'pala/vent' , _uib: {originator: nodeRFSend}})`

---

<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 September 2024 11:39 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/9 "2024-09-06T11:39:19Z")

</div>

Oh, I thought I'd tested that. Let me have a look.

---

<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 September 2024 11:46 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/10 "2024-09-06T11:46:01Z")

</div>

> [@fmarzocca](#):
>
> are no more sending the payload! (nodeRFSend is the ID of an `uib-sender` node).  
> No errors in browser console or in NR.

Can you do me a quick test? Choose one of the uibuilder node's that you are using for a matching sender node, open its settings, click Done and, if you get the blue dot, do a deploy.

---

<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 September 2024 11:50 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/11 "2024-09-06T11:50:45Z")

</div>

> [@TotallyInformation](#):
>
> Can you do me a quick test? Choose one of the uibuilder node's that you are using for a matching sender node, open its settings, click Done and, if you get the blue dot, do a deploy.

Don't bother, I've broken something. Need to track it down.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 11:51 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/12 "2024-09-06T11:51:20Z")

</div>

> [@TotallyInformation](#):
>
> Can you do me a quick test? Choose one of the uibuilder node's that you are using for a matching sender node, open its settings, click Done and, if you get the blue dot, do a deploy.

already did. many times...

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 11:52 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/13 "2024-09-06T11:52:38Z")

</div>

> [@TotallyInformation](#):
>
> Don't bother, I've broken something. Need to track it down.

Ok. Just let me know if it is a fast fix, otherwise I have to revert back as my Home Automation is limping.

---

<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 September 2024 12:02 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/14 "2024-09-06T12:02:03Z")

</div>

> [@fmarzocca](#):
>
> Ok. Just let me know if it is a fast fix, otherwise I have to revert back as my Home Automation is limping.

I've found the issue, one of my periodic code tidy efforts and some rearranging for new features has left a piece of logic too late in the process, my bad.

Should be a quick fix - I'll post here when I've released it.

---

<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 September 2024 12:25 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/15 "2024-09-06T12:25:56Z")

</div>

There we go, v7.0.4 now published and flows site updated.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 12:32 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/16 "2024-09-06T12:32:47Z")

</div>

Waiting for it to show in the Palette Manager, and then let you know

---

<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 September 2024 12:33 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/17 "2024-09-06T12:33:15Z")

</div>

Node-RED restart will probably do it.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 12:34 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/18 "2024-09-06T12:34:40Z")

</div>

BTW, why the Palette Manager doesn't show the number of nodes in uibuilder?

 ![Screenshot 2024-09-06 alle 14.33.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/1233f16921b56cc9958d8542f5eb48abe4b3fffd.png)

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [6 September 2024 12:36 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/19 "2024-09-06T12:36:21Z")

</div>

> [@TotallyInformation](#):
>
> Node-RED restart will probably do it.

Nope  
.....

---

<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 September 2024 12:40 UTC](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618/20 "2024-09-06T12:40:03Z")

</div>

> [@fmarzocca](#):
>
> BTW, why the Palette Manager doesn't show the number of nodes in uibuilder?

That is a VERY good question! Hadn't noticed that. I'll ask in a separate thread. There should be 9 nodes and 1 plugin.

[Next page](https://discourse.nodered.org/t/uibuilder-major-release-v7-0-4-yes-it-s-here-the-latest-major-version-of-uibuilder/90618.md?page=2)