# ✨ UIBUILDER New Release v6.8.2 - (Important Bug Fix for v6.8.1) \<uib-var\> and router improvements and more

**URL:** https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [1 January 2024 16:35 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181 "2024-01-01T16:35:09Z")
**Posts on this page:** 17
**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: [1 January 2024 16:35 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/1 "2024-01-01T16:35:09Z")

</div>

UPDATE 2024-01-04 - Important bug fix release. Please update ASAP, especially if using the new router or the `uib-save` node. See separate post below to see the changes.  
UPDATE 2024-01-02 - Bug fix update released. Please update to v6.8.1 to avoid the bugs introduced in v6.8.0) 🙂

Only 1 month after the last release! And on New-Year's day to boot. 78 commits across 197 files updated!! 11,347 total lines of code in UIBUILDER now. 🕶

Hope you enjoy the update.

### 📌 Highlights

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

- The `uibrouter` library gets some serious updates in this version. Including:

- The client library gets

- The importable example flows have been re-organised for easier access. Some new examples added: "Text Update - Different Methods", "FE Router Test"

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

### `uibuilder` node

- **FIXED** Previously, if an editor deployed a uibuilder node with an invalid URL, the node configuration & setup still happened which lead to odd results. Now a missing or invalid URL results in a logged error and the node is not configured. [ref](https://discourse.nodered.org/t/uibuilder-new-release-v6-7-new-front-end-router-improvements-to-uib-html-uib-save-and-more/83106/4)

### `uib-cache` node

- **FIXED** - bug introduced by last version's correction of `connections` count meant that "Only replay cache when client is really new" option resulted in the cache never being sent.
- Re-worked node's html into latest format with JS in separate resources file.

### `uib-html` node

- Downgrade `jsdom` version to 21.\* as that is the last version that supports Node.js v14.

### `uib-save` node

- **FIXED** - usePageName logic.
- **FIXED** - import - initial deployment does not connect to node - need to clear the entry & mark as invalid. Also, no url = invalid
- URL (uibuilder instance) drop-down list is now sorted
- On copy/paste or import, link to uibuilder node is now cleared.

### `uib-tag` node

- **FIXED** - Allow blanks in some typed input fields.

### `uib-update` node

- **FIXED** - Allow blanks in some typed input fields.

### Client library

- **FIXES**

- **NEW** - `$ui` is a new global created by the library which gives full access to the `ui.js` library, that library presents an instance of the `Ui` class. So typing `$ui.version` in the browser dev console will return the current version of the ui library. Also available as `uibuilder.$ui` just in case `$ui` was already taken when the uibuilder library is loaded.

- **NEW** managed variable `globalMsg` - contains the last message received over the global socket. The global socket allows uibuilder connected pages to talk to each other.

- **NEW Functions that have Node-RED remote commands**

- **NEW Functions (without Node-RED remote commands)**

- **NEW ui functions** - `addClass(classNames, el)`, `removeClass(classNames, el)` - see `ui.js` below for details.

- **NEW** - the client has some early code for dealing with [Socket.IO](http://Socket.IO) "rooms". These are really a SIO server function but some methods updated to take them into account.

- **NEW** - the client now subscribes to a new "global" [socket.io](http://socket.io) channel. This allows clients to talk to each other

- Added `quiet` property to remote command processing. Set `msg._uib.quiet` to `true` to stop the library returning a message to Node-RED on completion of the command.

- When using `uiGet` or `nodeGet` functions/commands, if class attribute is present, an additional `classes` property is returned which is an array of the class names.

- Moved `$` and `$$` functions to `ui.js` library. This library references them. So no change to usage.

- **DEPRECATED Function** - `elementIsVisible` - Was not working correctly and a fix is complex. Will revisit in the future. Let me know if you need this function. This would normally be a breaking change but the function is still there - it returns a console msg and a node-red msg still - and as it wasn't working, I doubt anyone has used it.

### `uibrouter` library

- **FIXED** [Issue #232](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/232) - Ensure origin script is removed after re-applying to ensure only 1 instance shows instead of 2.
- **FIXED** - If no routerConfig.defaultRoute set, now uses the first (zeroth) defined route.
- Version bumped to v1.0.1
- **NEW** - Route definitions now support `title` & `description` properties.
- **NEW** uibuilder managed variables added to make it easier to use with `<uib-var>`. [`uibrouter_CurrentRoute`, `uibrouter_CurrentTitle`, `uibrouter_CurrentDescription`, `uibrouter_CurrentDetails`]. These are automatically updated whenever a route change occurs.
- **NEW** - `routeIds` variable is a JavaScript `Set` containing the list of unique route IDs.
- **NEW Functions** - `routeTitle`, `routeDescription` - return the current route's title and description properties if set or the ID if not.
- **NEW Function** - `currentRoute` - returns the current routes configuration object.
- **NEW Function** - `setCurrentMenuItems` - Updates any on-page elements matching the selector `li[data-route]` such that any having a data-route attribute matching the current route id have the `currentRoute` class & `aria-current="page"` attribute added. It is removed from all other matches. This makes it very easy to highlight the current route in any on-page menu's.

### `uib-var` custom web component

- **NEW** : Added `topic` attribute - auto-monitors for messages from Node-RED with the given topic. `msg.payload` contains the value to show. Applies filter if present. Just send a msg from Node-RED with the appropriate topic and the display will automatically update! (requires UIBUILDER)
- **NEW** : Added filter attribute. A filter is a JavaScript function accessible from `window` global or `uibuilder` contexts. The filter is applied to the variable value before display. Can now supply ONLY the `filter` attribute (without `variable` or `topic`). This allows arbitrarily complex processing.
- Auto load `./index.css` instead of `../uibuilder/uib-brand.min.css` - enables your own custom styling to be used. Not dependent on UIBUILDER, simply serve `index.css` from the same location as your main page.
- When using UIBUILDER, the resulting HTML output is sanitised if you have the DOMPurify library loaded. If the output is a JavaScript object, it will be highlighted using uibuilder's standard JSON highlighter.
- Improved error handling, especially for the `filter` attribute and its processing.

### `ui.js` low-code-\>HTML hydration library

- **NEW functions** - `addClass(classNames, el)`, `removeClass(classNames, el)` - Add/remove classes individually. `classNames` can be a single class name, or an array of class names. For `removeClass`, an empty string, null or undefined can be used to remove all classes (removes the class attribute).

- When using `uiGet` or `nodeGet` functions/commands, if class attribute is present, an additional `classes` property is returned which is an array of the class names.

- Improved separation between `payload` and `content` in "alert" and "notify" methods.

- Allowed low-code `attributes` property to be an array when specifying classes to apply. All classes in the array will be applied.

- Moved `$` and `$$` functions to this library from uibuilder.

### `uib-brand.css`

- `body` left/right margins are now set by a CSS var `--base-margin` so they can be adjusted more easily.
- Added new variable `--emoji-fonts`. Use as `font-family: var(--emoji-fonts);` for better emoji's. Used by custom bullets below.
- Added `li.check` (AKA `li.completed`), `li.uncheck` (AKA `li.unstarted`), and `li.started` classes which change list bullets to ✅, ❌, and ✔ respectively.
- Added `ui.checklist` with `--base-margin` left/right margins and a little more space for the check bullets.
- Added basic nav menu formatting using `nav` tag. Including basic horizontal menu (`nav.horizontal` class) formatting. Assumes list embedded in a nav tag and that the list has correct aria roles set.

### Examples (import flows from Node-RED library)

- Re-organised & renamed examples now there are more of them.
- **NEW** - "Text Update - Different Methods" example
- **NEW** - "FE Router Test" example

### Documentation

- Heading levels 3+ have been made lighter to better differentiate them visually.
- The front-end client functions page now has an alphabetical list of functions.
- Improved low-code documentation for the `notify` and `alert` methods.
- Restructured config files for better future updates. Fixed some niggles.

## Other

- **FIXED** uibuilder's instance debug page was not working. Now fixed.
- The list of all uibuilder apps available at `/uibuilder/apps` is now sorted by URL. Don't forget that it also uses the description fields of each uibuilder node.
- More work done to move all filing system access into the single `libs/fs.js` library.
- Usual ongoing work to tidy, clarify and simplify code & eliminate any small issues.
- All nodes now have an Editor property `addType` which is set to 1 of 'load', 'new', or 'paste/import'. Allowing processing to differentiate between different circumstances that add nodes to the flow.

---

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [2 January 2024 08:42 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/2 "2024-01-02T08:42:34Z")

</div>

I have upgraded to 6.8.0, but now I can't deploy any new uibuilder instance.

As usual, I added an uibuilder node, inserted a name (i.e.: testing) and deployed. No instance has been created and the node is still claiming: _URL does not yet exist. You must Deploy first._  
_If changing a deployed URL, the folder will be renamed on Deploy_

---

<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: [2 January 2024 10:52 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/3 "2024-01-02T10:52:17Z")

</div>

Confirmed issue. Working on it.

---

<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: [2 January 2024 11:19 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/4 "2024-01-02T11:19:07Z")

</div>

Fix found for this issue. Note to self - don't be clever! I thought that reusing a flag already in use for a related check would be OK - it wasn't!

Need to check the other issue before I can publish an update.

---

<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: [2 January 2024 12:40 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/5 "2024-01-02T12:40:54Z")

</div>

Bug fixed v6.8.1 now published.

---

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [2 January 2024 13:20 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/6 "2024-01-02T13:20:39Z")

</div>

Upgraded and working, thanks!

Last week I was going to ask you about a possibile enhancement in order to have a functionality like the new `<uib-var topic="...">` you have just implemented! This is awesome, thank you!

---

<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: [2 January 2024 20:23 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/7 "2024-01-02T20:23:07Z")

</div>

Yes, that really is a big deal I believe. Especially for anyone who can work even a little with HTML. No heavy framework needed, 100% vanilla standards-based HMTL and capable of dealing with just about any content including Markdown and HTML safety for user-based content (both simply by loading standard 3rd-partly libraries: Markdown-IT and DOMPurify respectively - which the rest of uibuilder can use as well).

* * *

By the way, one of the things that has come to the forefront of my thinking again is the possibility of creating a WIKI or Knowledge Management tool using Node-RED, UIBUILDER and the router library.

I think the router library may have been the missing piece of the jigsaw for making it happen 🙂

---

<div class="post-metadata">

### Author: ![TomP](https://avatars.discourse-cdn.com/v4/letter/t/3da27b/32.png) [@TomP](https://discourse.nodered.org/u/TomP)
#### Post date: [3 January 2024 03:21 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/8 "2024-01-03T03:21:02Z")

</div>

Thank you for your hard work, that are again nice features.

In the new router example at the uib-save node I can choose a URL, but it doesn't save it. As soon as I close the save-node, the setting is gone and I still have the red triangle. Deleting the save-node and creating a new one solves it.

In the same example is a "Goto route #1 via click event handler"-link. The page does load route#1, but the address bar of the browser still has the old route e.g. /#route02. Clicking on #2 at the navbar won't change the route anymore.

---

<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 2024 09:09 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/9 "2024-01-03T09:09:19Z")

</div>

Hi Tom, thanks.

Are you using 6.8.1 or 6.8.0?

---

<div class="post-metadata">

### Author: ![TomP](https://avatars.discourse-cdn.com/v4/letter/t/3da27b/32.png) [@TomP](https://discourse.nodered.org/u/TomP)
#### Post date: [3 January 2024 10:10 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/10 "2024-01-03T10:10:17Z")

</div>

6.8.1  
I don't have the issue fmarzocca mentioned. The URL of the example uibuilder-node deploys fine and I get an empty template. I don't see a difference between the imported save-node and a new created one, it has the same settings. However, the choosen URL is only saved at the new save-node.  
I had no problem with the routerexample at v6.7

---

<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 2024 12:59 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/11 "2024-01-03T12:59:16Z")

</div>

I've tested on my dev system and it is working as expected. When you paste/import a save node, it blanks (or should) the url field to prevent accidentally ending up connected to the wrong uibuilder node without you realising.

But you should be able to then select one of your existing uibuilder nodes and it should retain that - it certainly is for me.

However, I will try on my live system - which is just updating - as soon as I can. I will import the route example to do the test.

In the meantime, can I ask you to check both the Node-RED log and the dev tools for your editor web page to see if there are any reported issues?

Thanks.

---

<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 2024 14:44 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/12 "2024-01-03T14:44:34Z")

</div>

Now tested on my live system and I can confirm the same issue as you. Will work on identifying the issue as soon as I can get the day-job out of the way 🙂

Expect another bug-fix release. For reference, there is another bug I've already discovered and have a fix for:

- **FIXED** Default route was always being set on load. Now correctly takes the current URL hash into account first.

---

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [3 January 2024 16:35 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/13 "2024-01-03T16:35:29Z")

</div>

> [@TotallyInformation](#):
>
> **FIXED** Default route was always being set on load. Now correctly takes the current URL hash into account first.

I was going to report this!

---

<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 2024 21:50 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/14 "2024-01-03T21:50:40Z")

</div>

> [@TotallyInformation](#):
>
> Now tested on my live system and I can confirm the same issue as you. Will work on identifying the issue as soon as I can get the day-job out of the way

I've found the issue. It is a timing problem. I changed the node from using the list of _deployed_ uibuilder instances to using the list of instances in the editor so that you could access a newly added uibuilder instance before you deploy. And this works great - except - on initial page load it sometimes doesn't work because the list of editor entries is build by listening to a Node-RED event and that is sometimes taking too long to run through all nodes. The result being that the validation of the uib-save node is completing before all the nodes are added to the flows. And so a chosen entry is not found.

Because the list of deployed nodes uses an api defined by uibuilder, it seems to work more quickly and I will try pre-populating the list of editor nodes with the deployed nodes and see if that is sufficient to fix the issue. I think it will be but until tested I won't know for sure.

---

<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 2024 23:29 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/15 "2024-01-03T23:29:44Z")

</div>

Phew - well 1 bug actually turned into 4 ☹

All fixed now but too tired to publish tonight & starting to make mistakes, will get a v6.8.2 out tomorrow.

---

<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: [4 January 2024 11:27 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/16 "2024-01-04T11:27:02Z")

</div>

Changelog for the v6.8.2 bug fix:

Please update to this release as soon as possible, especially if using the new uibrouter or the `uib-save` node.

### `uibrouter` library

- **FIXED** Default route was always being set on load. Now correctly takes the current URL hash into account first.
- **FIXED** Routes loaded via script, if pre-selected on page load (e.g. in URL hash), were crashing. Now will automatically revert to the default route and just print an error to the console.
- **FIXED** On start, hash change event could be fired twice. Now does the initial route before setting up the hash change listener.

### `uib-save` node

- **FIXED** After import/paste, impossible to set a selected uibuilder node reference. Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load. Now pre-populate the list of in-editor uibuilder nodes with deployed uibuilder nodes.
- **FIXED** Correctly change saved URL if a uibuilder node changes it. In this case, the save node knows the id of its linked uibuilder node but not the name so we change the name and mark the save node as needing re-deployment.
- **FIXED** In the Editor, the list of available uibuilder nodes to choose from was not sorted. Now sorted for ease of access.
- **FIXED** After a paste/import, when the url changes, reset the `addType` flag to stop chkUrl re-blanking it by adding `if (node.addType === 'paste/import') node.addType = 'load'` (in `oneditchange`)

### `ti-common.js` Editor support library

- **IMPROVED** Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load, the in-editor list of uibuilder node was not built soon enough for use. Now pre-populates the list of in-editor uibuilder nodes with deployed uibuilder nodes. (Only if the in-editor list has zero entries).

---

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [4 January 2024 12:19 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-8-2-important-bug-fix-for-v6-8-1-uib-var-and-router-improvements-and-more/84181/17 "2024-01-04T12:19:34Z")

</div>

Updated. All fine.  
Thanks!