# 🎆 uibuilder v6.4 released - Bug fixes and a few new features

**URL:** <https://discourse.nodered.org/t/uibuilder-v6-4-released-bug-fixes-and-a-few-new-features/77465>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [11 April 2023 18:03 UTC](https://discourse.nodered.org/t/uibuilder-v6-4-released-bug-fixes-and-a-few-new-features/77465 "2023-04-11T18:03:35Z")\
**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:** [11 April 2023 18:03 UTC](https://discourse.nodered.org/t/uibuilder-v6-4-released-bug-fixes-and-a-few-new-features/77465/1 "2023-04-11T18:03:35Z")

</div>

As promised yesterday, pushed this out today to get a couple of small but important bug-fixes out along with a small but hopefully nice selection of new features and updates.

[node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder), [Docs](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/).

* * *

## Highlights

- Client is now able to generate `xlink:href` correctly when creating SVG's via `msg._ui` low-code UI generator.
- The `uiGet` client function and matching `msg._uib` command provides extending info for tables, and lists. The inner text content of an element can be explicitly requested.
- A new client function `$$(cssSelector)` is added that returns the configuration of all matching elements. There is also a new help page that explains what CSS Selectors are and gives some common examples.
- The main uibuilder node now uses the extended recovery features of [Socket.IO](http://Socket.IO) v4.6.
- The Editor panel for the uibuilder code now provides a link to VSCode if running on localhost so that editing front-end code is even easier.

* * *

### Front-end client library

- A received msg containing a `msg._ui` property no longer triggers `onChange` or `onTopic` event handlers.

- `_ui` handling moved to a separate utility library `ui.js` to allow use elsewhere. Currently configured as a CommonJS style module which allows use in front-end code via esbuild or in Node-RED (though another library will be needed to provide direct DOM support).

- `ui.js`

- For `uiGet` function:

- Extended the `uiGet` \_uib command to allow getting a specific property. e.g. send a msg like: `{ "_uib": {"command":"uiGet","prop":"#eltest", "value": "class"} }` to get the classes applied.

### `uibuilder` node

- Added ability to limit \_ui/\_uib commands to a specific pageName/clientId/tabId. Simply add a property of the matching name and the commands will be ignored on any browser page not matching. You can use 1 or more of the properties, all will be checked. You can, of course still use `msg._socketId`, if present, the msg being sent is only sent to the single browser tab matching that [socket.io](http://socket.io) id.

- [Socket.IO v4.6 connection state recovery](https://socket.io/docs/v4/connection-state-recovery) added - Allows a client to recover from a temporary disconnection (up to 2 minutes). `msg.recovered` added to the connection control msg. Is set to true if the client connection is a recovery.

- [Socket.IO v4.6 disconnect description](https://github.com/socketio/socket.io/releases/tag/4.6.0) added - Adds more details about the disconnection reason to the disconnect control message.

- When running Node-RED on localhost, the editor panel automatically turns on debug output. This used to be the case previously but the lookup to determine whether running locally was not comprehensive enough, now fixed.

- Added links to open the instance's front-end code folder in a new VSCode window. They only appear if running Node-RED on localhost. A button is added to the top of the config panel and to the Core tab where the folder name is shown.

- Added `$$(cssSelector)` function. This matches the function of the same name available in the Chromium DevTools console. It returns ALL elements that match the selector (unlike `$(cssSelector)` which only returns the first). In addition, whereas `$(cssSelector)` returns the DOM element (like jQuery), `$$(cssSelector)` returns an array of the properties of each element.

### `uib-element` node

- **Bug-fix** - msg.payload is normally an instance of Object if created as an array or object via JSON/JSONata inputs from inject and change nodes. However, it turns out that is NOT the case if created in a function node. Corrected to a more robust detection method. Thanks to Rami Yeger for spotting the bug and reporting via YouTube comments.

### Documentation

- Added new how-to explaining CSS Selectors and giving common examples.
- Updated for the new `$$(cssSelector)` function.