# ✨ uibuilder new release: v6.2.0 - New features & Bug Fixes

**URL:** <https://discourse.nodered.org/t/uibuilder-new-release-v6-2-0-new-features-bug-fixes/76942>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [25 March 2023 20:56 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-2-0-new-features-bug-fixes/76942 "2023-03-25T20:56:42Z")\
**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:** [25 March 2023 20:56 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v6-2-0-new-features-bug-fixes/76942/1 "2023-03-25T20:56:42Z")

</div>

Hi all, managed to get a new feature release out pretty quickly this time. Not too many new features but one or two that may be of interest.

- The zero-code Simple Form in `uib-element` has been significantly updated with better formatting and better information coming back to Node-RED on a button press. You also no longer have to define any buttons in the form, they will be added for you if you don't provide any.

- The zero-code example has been improved to show off the new `uib-element` Forms update.

- A new example, "remote-commands" shows off how to remotely configure the front-end library and get information back from it.

- There are a bunch of new functions in the client library. They can all be used either in custom front-end code or "remotely" from Node-RED (check them out using the new example):

- The `uib-sender` node now adjusts if you rename the uibuilder node it is linked to.

And of course, a few bug-fixes have also been included. The Svelte template now works properly again (after a breaking change in one of the libraries). A small but annoying bug in the client library that caused an error in some circumstances when it tried to load a style sheet.

Hope you find these updates useful. As always, please let me know if you find an issue or have an idea you'd like to see included in a future release. Also, if you want to contribute either code or documentation updates, you would be more than welcome.

I'll be trying to get a few more videos out soon as well.

* * *

## Changelog

### General

- `locales` folder with `en-US` subfolder. Ready for l8n.

### Client library changes

- **Bug Fix** : [Issue #201](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/201) - Incorrect logic in stylesheet load causing an error. Fixed.

- New functions - can be run from Node-RED as well as front-end code:

- New internal functions:

- Updated functions:

### `uib-element` node changes

- **Bug Fix** : Updating the page title (with no html id set) was setting the mode to "add" which upset chained outputs. Now corrected.
- "Form" type - improvements:
  - Where `required` property is true in the input, add `class="required"` to the div that wraps the label and input. Add `div.required label::after` styling to `uib-brand.css`. This will add an "\*" after the label text for required inputs. See the `uib-brand.css` updates for more formatting improvements.
  - Allow `title` property to be set in input data. Also add "Required. " to start of title. If no title property specified, make it `Type: ${type}`.
  - If no button included in the input data, add default send and reset buttons with an id of `${elementId}-btn-send` & `${elementId}-btn-reset`. The Send button uses the standard `eventSend` function. The Reset button returns all form inputs back to their defaults.
  - Formatting improvements: Inputs are outlined with `--success` if they pass validation and with `--failure` if they do not. Any buttons on the form are given `--warning` colour if the form does not validate. The buttons still work however.
  - Form data improvements: Using the `eventSend` within a form element includes data saying whether the form validates. The details for each input also say whether they validate and if they don't, why.
  - The documentation for "Zero-code element types" \> "Forms" completed.

### `uib-sender` node changes

- Add the uibuilder node link node id to config data & expand editor checks for url changes. Will mark the node instance as needing re-deployment if the linked uibuilder node changed its URL. This is done by also tracking and recording the node id of the linked uibuilder node.

### `uib-brand.css` updates

- Added intense (more saturated) versions of info, success, warning/warn, failure/error/danger.
- Added `center` as a synonym of `centre`.
- Added `surface5` which has higher lightness than 4.
- Forms formatting extended.
  - Form labels are shown in Title Text (first letter of each word capitalised). If attached to a required input, an "\*" is shown after the label.
  - Input valid/invalid formatting added. Borders set to `--success`, `--failure` collours accordingly
  - Buttons on an invalid form set to `--warning` colour.

### Standard Templates

- **Bug Fix** : [Issue #204](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/204) - change to `rollup.config.js` caused issues with bundled css. Fixed.

### Examples

- **zero-code** : Improved Forms example shows off more options. Example for light/dark mode added. On-(re)load flow attached to the control output of the uibuilder node; automatically changes the page title (an alternative to using a cache node).
- **New Example** : _Remote-Commands_ - Demonstrates all of the uibuilder client library functions that can be called from Node-RED.
