# UIBUILDER v7 development - latest status

**URL:** https://discourse.nodered.org/t/uibuilder-v7-development-latest-status/89338
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [7 July 2024 15:21 UTC](https://discourse.nodered.org/t/uibuilder-v7-development-latest-status/89338 "2024-07-07T15:21:08Z")
**Posts on this page:** 2
**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: [7 July 2024 15:21 UTC](https://discourse.nodered.org/t/uibuilder-v7-development-latest-status/89338/1 "2024-07-07T15:21:08Z")

</div>

Hi all, for anyone following along, UIBUILDER v7 is a couple of steps closer today. I just need to stop myself from adding any more great new features! 😀

I'm supposed to be on the final test and bug-squashing round but I do manage to keep side-tracking myself!

We are REALLY close to a release now though. Honest! So please do install from GitHub and do some testing to make sure everything works as expected for you.

Today's side-track is that I finally got round to adding **automatic file-uploads** to the `eventSend` function. So you can use `<input type="file"> in a form submitted using `eventSend`. When you submit and file(s) selected will be uploaded, each in a separate message (additional to the eventSend message itself). The file is transferred as a buffer and so is easily saved to the server using core or uibuilder nodes.

Other recent additions:

- Another new web component `<apply-template>` makes it easy to repeatedly apply HTML `<template>`s to your page. There is a uibuilder client function to match so that you can more easily apply templates from code as well.
- The older Dynamic SVG flow example is now a built-in library example, updated to make use of the newer uibuilder features. Notably, using the applyTemplate function mentioned above.
- Several of the other library example flows have been updated to use newer settings and to make them easier to use (thanks to the `uib-save` node mostly).
- Connection headers are now part of the standard meta-data for messages from clients. Useful in particular for actioning 3rd-party authentication headers.

* * *

Tons of other stuff, these are just the 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.

- You can now add a `uib-topic="mytopic"` attribute to _ANY_ HTML element. Doing so makes that element responsive to messages from Node-RED.

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

- New built in _web components_ which can be used in your HTML without the need for writing JavaScript

- Lots of extensions and improvements to the `uibrouter` front-end routing library in this release:

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

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

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

- For front-end developers, there are many new functions added to the `uibuilder` front-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.

- For node developers. New events are now available using `RED.events` that track the setup of uibuilder, the setup of each uibuilder node instance and node instance url renames.

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

- Updated example flows: 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.

- File uploads from client browser to Node-RED are 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 use `uibuilder.eventSend(event)` to submit the form). The upload is a message with file details and the file itself as a buffer in `msg.payload`.

* * *

And the potential breaking changes (which have been stable for a while now) - these shouldn't affect most people, but please do check:

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.

---

<div class="post-metadata">

### Author: ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)
#### Post date: [8 July 2024 05:22 UTC](https://discourse.nodered.org/t/uibuilder-v7-development-latest-status/89338/2 "2024-07-08T05:22:47Z")

</div>

Wow - you have been busy !

Great work (still and always !)

regards

Craig