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

Share Your Nodes
1

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):

    • include lets you load external URL's (from files or API's) into a given position in the web page. These can be anything - HTML snippets, images, video, PDF's, ...

    • htmlSend lets you send the whole page HTML back to Node-RED

    • uiWatch lets you watch for changes to 1 or more on-page elements and will send the details of the changes back to Node-RED. This is great if you have multiple flows updating the page or you are using a mix of front-end custom code and Node-RED flows to update things.

  • 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 - Incorrect logic in stylesheet load causing an error. Fixed.

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

    • htmlSend() - sends the current web page back to Node-RED.
    • uiWatch(cssSelector, startStop=true/false/'toggle', send=true, showLog=true) - watches for any changes to the selected page elements and uses uiGet to send useful data back to Node-RED automatically. It should also trigger a custom event to allow front-end processing too. If startStop is undefined, null or 'toggle', the watch will be toggled.
    • include(url, uiOptions) - include external files. Includes HTML, Images, Video, PDF's and more.

  • New internal functions:

    • nodeGet(domNode) - gets standard data from a DOM node (used internally by uiGet and uiWatch for consistency).

  • Updated functions:

    • uiGet - now uses nodeGet for consistency with uiWatch.
    • $ - now returns first child if selector returns a <template> tag. Warn/Error logging added.

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