# ✨ UIBUILDER Release: v7.1.0 - Minor feature release

**URL:** <https://discourse.nodered.org/t/uibuilder-release-v7-1-0-minor-feature-release/94342>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [3 January 2025 18:25 UTC](https://discourse.nodered.org/t/uibuilder-release-v7-1-0-minor-feature-release/94342 "2025-01-03T18:25:09Z")\
**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:** [3 January 2025 18:25 UTC](https://discourse.nodered.org/t/uibuilder-release-v7-1-0-minor-feature-release/94342/1 "2025-01-03T18:25:09Z")

</div>

As [recently promised](https://discourse.nodered.org/t/uibuilder-welcome-to-2025-whats-ahead/94302), here is the new release of UIBUILDER for your New Year enjoyment! 😄

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

- **Any** _Node-RED custom node_ can now send a message to a uibuilder client! In your runtime code, 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.

- You can now send a message from Node-RED to a connected client from a Function Node! Simply add `RED.util.uib.send('uibname', {....})` to your function code. This will send a message to all connected clients for that uibuilder instance.

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

### General changes

- Added ability to send messages from Node-RED to a connected client from a Function Node. Simply add `RED.util.uib.send('uibname', {....})` to your function code. This will send a message to all connected clients for that uibuilder instance.

- References to `fs-extra` 3rd-party library removed from all nodes & libraries except `libs/fs.js`.

- [Socket](https://docs.socket.dev/docs/socket-for-github) security check tool added to all TotallyInformation GitHub repositories including UIBUILDER. Provides significant supply-chain security and privacy checks.

- All references to node.js's `fs` library now restricted to `libs/fs.js`.

- To help further improve the development of the brand css, [LightningCSS](https://lightningcss.com/) is now used to compile the source CSS. This ensures that the CSS is not using too new CSS options and improves the performance of the CSS. Additionally, stylelint is now used to check the CSS for errors and warnings.

- Now using LightningCSS to compile source CSS and ensure not using too new CSS options.

- Some unused NodeJS files have been removed.

- `@totallyinformation/ti-common-event-handler` dependency package now removed completely. `RED.events` is used throughout, all uibuilder events start with `UIBUILDER/`.

- To make it easier to create new elements in the future. Moved no-code element runtime processing to a common folder, `nodes/elements`. Added Editor API's and moved processing out of the `uib-element` runtime to separate module. Also moved element description and advanced options HTML to `nodes/elements/en-US`.

- The common code and css files in the `resources` folder (`ti-common.js` and `ti-common.css`) have been renamed to `editor-common.js` and `editor-common.css` respectively. This is to make it clearer that these are used in the Node-RED editor only.

- The `uib-plugin` library now renamed to `uib-editor-plugin` for clarity.

- New `uib-runtime-plugin` library added. Now manages most of the additions to `RED.util.uib` which contains functions made available to Node-RED function nodes.

### `uib-brand.css` styles & variables

- **NEW** Utility classes

- Core font now changed to match the uib-brand.css. No more Google fonts! This should make the UI more consistent and faster to load.

- Now using LightningCSS to compile source CSS and ensure not using too new CSS options.

- Added `text-wrap: balance` to `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `heading` and added `text-wrap: pretty` to `p`, `li`, `figcaption` - these make the elements look a little nicer when text is wrapping.

- Added `container-type: inline-size` to `header`, `footer`, `main`, `section`, `article`. This is in preparation for the future use of [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) which are a much more flexible alternative to [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries) for controlling responsive layout breakpoints. Container Queries are still very new and not yet supported widely enough to use.

- Added some additional "reset" tweaks for improved visual style.

### Node: `uibuilder`

- Node-RED Editor:
  - **FIXED** When a URL is changed, the IDE editor url is now updated automatically. This is particularly important when copying/pasting a uibuilder node.

#### Front-end code templates

- Removed optional link to legacy CSS style library.

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

- **NEW FUNCTIONS**

- **Updated the front-end `index.html` templates to highlight that the uibuilder client library MUST be included.** After seeing several people take it out.

- Added `uibuilder:propertyChanged:${prop}` custom event when a managed variable changed. Has the same event.details as the 'uibuilder:propertyChanged' event. This event can be used instead of the `uibuilder.onChange('prop', ....)` function if preferred.

- Updated `uibuilder:propertyChanged` and `uibuilder:propertyChanged:${prop}` custom events to include `oldValue` as one of the event details. Will be `undefined` if the property is new.

- Updated `uibuilder.eventSend` function to include `msg._ui.dataset` which contains any `data-*` attributes from the element that triggered the event.

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

- **NEW METHODS**
  - `buildHtmlTable` - Returns HTML of a table created from the input data.
  - `createTable` - Uses `buildTable` to create a new table and attaches to a parent element in the DOM.
  - `tblAddDataRow` - adds a new row to an existing table.
  - `tblAddListener` - adds row/cell listeners to the 1st tbody of a table. Will send a msg back to Node-RED when used with uibuilder. Defaults to adding a `click` listener.
  - `tblGetCellName` - Returns a standardised table cell name. Either from a `data-col-name` attribute or a numeric reference like `C003`.

- Added `data-col-reference` attribute to created tables - on the `thead` row that actually defines the columns. Making it easier to get a reliable column reference later.

### Front-end components: `uib-var`

- Re-engineered to match the latest standards in the [TotallyInformation web-components library](https://wc.totallyinformation.net).
- Added `ready` event
- Removed shadow dom
- Error messages improved
- Add `source` prop when reporting change back to Node-RED

### Documentation changes

- Improved documentation for uibuilder's event handling and better linked that to how to create custom nodes that work with uibuilder.
- Improved documentation of the uibuilder extensions for the `RED.util.uib` object for use in Function nodes.
- Documentation for the new table handing functions in the client library.

### Example flow updates

- All examples showing the use of the old `uibuilderfe` client library have been removed.
- Several of the example flows have been updated to show the latest features.

### Runtime library changes

#### `web.js`

- Improved error checking and reporting in `serveVendorPackages` when mounting installed libraries. [Issue #428](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/428).