node-red-contrib-uibuilder 6.2.0

Minor features and bug fixes

on Node.js NPM

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.