# 🧑‍💻 UIBUILDER next steps - what is coming in v6.8

**URL:** https://discourse.nodered.org/t/uibuilder-next-steps-what-is-coming-in-v6-8/83679
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [13 December 2023 14:31 UTC](https://discourse.nodered.org/t/uibuilder-next-steps-what-is-coming-in-v6-8/83679 "2023-12-13T14:31:57Z")
**Posts on this page:** 3
**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: [13 December 2023 14:31 UTC](https://discourse.nodered.org/t/uibuilder-next-steps-what-is-coming-in-v6-8/83679/1 "2023-12-13T14:31:57Z")

</div>

Hi again to everyone interested in UIBUILDER.

Development of v6.9 is well under way so I thought I'd share a couple of teasers. There may well be more before I've done and I'll try to update this if so. No fixed release timetable yet, too much happening in other parts of my life for that right now.

* * *

### `<uib-var>` improvements

There will be an extension to the `<uib-var>` custom web component. A new attribute `filter` is being added that will let you apply pretty much any JavaScript function to the variable before it is displayed. Working out how to do this reasonably safely has been an interesting challenge but the approach I've developed should also be applicable to other things as well which will be exciting.

### Custom communication channels via a "Rooms" feature

This is still in development and uses the [Socket.IO](http://Socket.IO) server library's rooms features.

This will enable _client-to-client communication_ via the uibuilder client library (via Node-RED server of course). That will work across different instances of uibuilder nodes as well.

It will also improve the efficiency of server-to-client comms when filtering by uibuilder's `clientId` or `pageName` attributes as these now use dedicated rooms instead of the general connection. So those filters now prevent data being sent to the client at all.

The 3rd aspect of this work is that the clients now subscribe to the root namespace as well as the uibuilder node's dedicated namespace. It is this that will allow the server to talk to ALL clients (regardless of which uibuilder instance they are connected to). And will also allow each client to do the same. Of course, it is up to each client connection to decide whether they want to listen to something. 😀

There will be a new node that will enable room-based and multi-instance communications from the server.

Just noting that "rooms" are a [Socket.IO](http://Socket.IO) server concept, clients have no direct knowledge of them so I am overlaying a naming convention that will facilitate client listeners. I will be implementing a simplified uibuilder client function of course so you don't have to know any of the gory details.

[Socket.IO](http://Socket.IO) is pretty efficient at what it does so these new features really shouldn't add much in the way of overheads, particularly at the client. Client ID and Page Name rooms are automatically created and destroyed on the server and all connections are shared.

### Other

At the moment, those are the 2 headlines but plenty of other things are coming along for the ride. Such as:

- New `navigate` function and command. Triggers a page change or a route change either from front-end JavaScript or via a command message in Node-RED. Put a client into Kiosk mode and rotate pages or route displays all from Node-RED!

- New `scrollTo` function and command. Scrolls the visible page to a specific location either from front-end JavaScript or via a command message in Node-RED.

- No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.

- Front-end commands issued from Node-RED can now take a `quiet` option set to `true` to prevent the return message. e.g. `{"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}`

- Front-end developers now have full access to the `ui.js` library via the `$ui` global.

- `addClass(classNames, el)` and `removeClass(classNames, el)` UI functions added to the client library

- `connect()` and `disconnect()` functions added to the client library to manually connect/disconnect the [Socket.IO](http://Socket.IO) connections

And behind-the-scenes:

- More work to move filing system access into the single `libs/fs.js` library
- All nodes now have Editor properties that track how the node was added to the Editor. This enables Edit-time code to differentiate between newly added, pasted and updated nodes. Particularly useful to be able to blank out some node properties when copying/pasting.

---

<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: [29 December 2023 16:25 UTC](https://discourse.nodered.org/t/uibuilder-next-steps-what-is-coming-in-v6-8/83679/2 "2023-12-29T16:25:53Z")

</div>

Lots of work going on behind the scenes for v6.8 - here are some updated highlights:

- The `uibrouter` library gets some serious updates in this version. Including automatic menu updates (to highlight the current route) and new uibuilder variables to use with `<uib-var>` to show titles and descriptions that update automatically.

- The `<uib-var>` HTML component gets

- The client library gets

- No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.

- Front-end commands issued from Node-RED can now take a `quiet` option set to `true` to prevent the return message. e.g. `{"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}`

- Front-end developers now have full access to the `ui.js` library via the `$ui` global.

---

<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 December 2023 20:35 UTC](https://discourse.nodered.org/t/uibuilder-next-steps-what-is-coming-in-v6-8/83679/3 "2023-12-30T20:35:59Z")

</div>

And more example flows!
