# 🌐 UIBUILDER: NEW RELEASE v7.2.0 - New feature plus bug fixes

**URL:** <https://discourse.nodered.org/t/uibuilder-new-release-v7-2-0-new-feature-plus-bug-fixes/96341>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [30 March 2025 14:58 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-2-0-new-feature-plus-bug-fixes/96341 "2025-03-30T14:58:56Z")\
**Posts on this page:** 1\
**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:** [30 March 2025 14:58 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-2-0-new-feature-plus-bug-fixes/96341/1 "2025-03-30T14:58:56Z")

</div>

As promised, here is the latest installment of UIBUILDER for Node-RED. You friendly, lightweight, data-driven UI tool. 😄

> **[node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder)**
>
> Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

### 📌 Highlights

- **NEW NODE** `uib-sidebar` - Creates a simple sidebar in the Node-RED Editor page. HTML for the sidebar is edited in the node. Messages sent to the node are passed to the sidebar letting you change any attributes and inner HTML or text dynamically. Any input elements in the HTML automatically send changes back to the output of the node. A new example flow is available that demonstrates useage.

- Updated `applyTemplate` function in the ui/uibuilder client libraries, gives a lot more flexibility.

- Input form improvements.

- Bug fixes

### **NEW** Node: `uib-sidebar`

Creates a simple sidebar in the Node-RED Editor page. HTML for the sidebar is edited in the node.

Messages sent to the node are passed to the sidebar allowing you to change any attributes and inner HTML or text dynamically.

Any input HTML elements automatically send changes back to the output of the node (in the future, wrapping inputs in a form element will allow sending only on button press but this isn't yet implemented).

This is the first release of this node and further improvements will be added in the future. Check the "next" and "roadmap" documents for future plans.

A new example flow has been added to demonstrate the sidebar node.

### Node: `uib-element`

- The form element type:

### **NEW/UPDATED BUILT-IN WEB COMPONENTS** (AKA "Widgets")

These are pre-built into the uibuilder client library and can be used in your HTML without the need for writing JavaScript.

- All of the components built into the uibuilder client library have been updated to match the latest standards used in my [independent web components](https://wc.totallyinformation.net/) as these represent the latest HTML standards and best practices.

- `<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. Any existing content between the `<apply-template>` tags is replaced. However, if the template has a slot, the existing content is placed back into the slot. This allows you to wrap existing content with a template.

- `<uib-meta>` - Display's facts about the current page such as its file size, when it was created and when it was last updated. Obtains the data from Node-RED. The `type` attribute updated for ease of use.

- `<uib-var>` - A web component that can be used to display dynamic content. It can be used to display simple text, HTML, lists, tables, and more. It can also be used to send data back to Node-RED.

### **NEW** Front-end library: `tinyDom.js`

**SORRY, this is not quite ready for use** Hopefully in the next release. 🧙‍♂️

When used with UIBUILDER, exposes a new global object `dom`. Enables easy changes to your uibuilder-enhanced web pages by providing easy functions to add to, remove or update the existing page.

Also includes a new message schema that allows you to send messages from Node-RED to the client to update the DOM. This is a much simplified low-code feature.

See the documentation for more information.

### Front-end library: `uibuilder.js`

- Form handling: File input types now add more meta-data to the returned file-upload message.

- **Updated functions**

### Front-end library: `ui.js`

NB: Updates to this, also update the main uibuilder client library.

- **UPDATED FUNCTIONS**

### Server library: `web.js`

- **Bug fix** Moved JSON and URL Encoded data upload middleware from being loaded for both custom and Node-RED ExpressJS servers to only being loaded for the custom server. [Ref.](https://discourse.nodered.org/t/json-payloads-larger-than-100kb-are-refused-when-using-ui-builder/95988) This was blocking people from uploading large JSON payloads when using Node-RED's built-in ExpressJS server.

### Documentation

- **NEW HOW-TO** - Form handling - How to handle user input in forms. This includes a full example of how to use the new `uib-element` node to create a form and send the data back to Node-RED as well as using individual input elements.
- **NEW HOW-TO** - Send file to server - How to send a file to the Node-RED server using an HTML input element. This is useful for uploading files from a client to the server.
- Updated the documentation of the `eventSend` FE function.
- Updated the documentation for the `$` FE function.
- Updated the documentation for the `$$` FE function.
- Updated the documentation of the `uploadFile` FE function.
- Updated the documentation of the `applyTemplate` FE function.
- Updated the documentation for the new `uib-sidebar` node.
- Docsify configuration updated so that the description for the currently shown page is reflected in the browser's meta description tag. This should help with search engine optimisation and when pasting a link from the GitHub version of the documentation into social media.

### Other changes

- Runtime log messages now all start with `🌐` to help them stand out from other log entries. All log output should then have `[....]` after the icon but before the information and data. The content of the braces being `uibuilder:` followed by additional information of what code module/function generated the log entry.
- Runtime warning log messages now all start with `🌐⚠️` to help them stand out from other log entries.
- Runtime error log messages now all start with `🌐🛑` to help them stand out from other log entries.
- Much previously deprecated code has been removed.
- Code linting has move from ESLINT v6 to v9. This was horrid work! And resulted in me raising 2 bugs with the ESLINT team. The new version of ESLINT is much more strict and has found a number of issues that were previously missed. This should result in better code quality.

### Experimental

These are future features being worked on but not yet ready for use.

- `dom`/`tinyDom` - This is both a client-side new feature and a new message schema that facilitates data-driven DOM updates (e.g. web page updates) from both Node-RED and client code. It is a much simplified low-code feature. With it, you can easily create new content and update existing content on your web pages. It does, however, require some familiarity with HTML.

- `logger` - A next-gen client-side logging library.