Bug fix

Bug fix only. Missing originator on messages from clients.

Bug fix

Bug fix only. Issue for new UIBUILDER installations that would get the error [node-red-contrib-uibuilder/uibuilder] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array (line:393).

Bug Fix: nanoId

v7.0.2

Fix bug in uiblib nanoId. Bump to v7.0.2

Bug fix

New hooks feature was failing if not present in settings.js.

MAJOR RELEASE - now node.js 18+

This major upgrade of UIBUILDER has been some 9 months in preparation. 325 commits, 244 files changed. UIBUILDER is now some 12,598 total lines of code (22,400 including comments).

You should read through the potentially breaking changes. They are very unlikely to really impact anyone but it is hard to know for sure. As always, it is best to test before going into production.

The last major release, v6, really felt like a big maturity step for UIBUILDER (which is now around 10 years old) and this v7 release really builds on that. Focus has very much been on UIBUILDER as a mature tool for anyone using Node-RED to build data-driven web apps. It retains all of its flexibility but continues to make working with HTML/CSS and occasional JavaScript a breeze.

I really hope you find some amazing things in this release. If you do, please let me know in the Node-RED forum. And if you don't, let me know as well!

There is much more to come from UIBUILDER. Check out the roadmap in the docs, this shows you the vast number of ideas and improvements that I have in mind for the future. But, as always, I'm open to suggestions so please do reach out.

Regards, Julian.

---

⚠️ Potentially Breaking Changes

Note that potentially breaking changes are only introduced in major version releases such as this one. It has been a couple of years now since the last, v6, major version.

Most of these changes will not impact most people but you should check through them just in case.

• If using UIBUILDER's custom ExpressJS server feature (instead of the Node-RED built-in one), URL's are now case sensitive

  This brings them into line not only with W3C guidance but also with the Socket.IO library. It can be turned off in settings.js using property uibuilder.serverOptions['case sensitive routing'] set to false.

  Note that when using Node-RED's internal ExpressJS web engine (the default), URLs are still case-insensitive because that's how core Node-RED has been configured.

• Minimum node.js now v18 - in line with the release of Node-RED v4, the minimum node.js version has moved from v14 to v18.

  If you need to update your own servers, please remember to do an npm rebuild of all node.js packages afterwards.

• Rewrite of the uibuilder.eventSend(event) function in the client library.

  This might have an impact only if you were relying on some of the auto-naming features of form elements since the formula for that has been significantly improved.

  That function has been extensively re-written and should provide significantly better results now.

• Removal of the uibuilderfe library

  If you are still using this old library in your HTML code, please move to the module based library as it is far more feature rich and has many bugs removed.

• Removal of the uib-list node

  The uib-element node does everything that it did and more.

• Moved socket.io-client from dependencies to dev-dependencies

  If using the module based client library, you should not be loading the Socket.IO client yourself since it is already built into the client library. If you are still using the old uibuilderfe client, you should replace that and remove the socket.io client library from your html files.

• Removed the css auto-load from the client library

  This automatically loads the uib-brand.css if no css is provided at all. Since all of the standard templates include some CSS and have for a long time, this should not impact anyone.

  At least 1 person hit a race condition. ref. So this is best removed.

• jsdom (using in the uib-html node) now tracks the latest releases again

  Shouldn't be breaking at all but you might still want to review things since the new versions of jsdom are likely to have better available features. We were restricted to jsdom v21 previously as newer versions required node.js v18+.

• ejs package removed

  This should not impact anyone. ejs is an ExpressJS server-side templating library and what instructions exist (minimal) say that you need to install it manually. A new How-to: Server-side Rendered Views has been created to help understand how to use server-side templating. It is far from complete however.

• Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.

• A uibuilder node cannot be given a URL name of common as this would clash with the built-in folder of the same name that holds resources that can be shared with all instances. This was an oversight in previous releases I'm afraid, now fixed.

• The uibuilder node, no longer has the "Show web view of source files (deploy before you can use it)" option. The supporting external library was also removed. It never looked that good anyway. Please use the new uib-file-list node to produce a custom folder/file list and send to your own custom page.

• Not really a breaking change but worth noting - if you use the Svelte template, that has been updated to use the latest versions of Svelte and Rollup. Those are both at least 2 major versions newer. In doing so, I had to replace a dev dependency and make changes to the config and npm scripts.

📌 Highlights

• Some tweaks to the documentation should make it a little easier to get started with. The menu and UX has also been tweeked. There are new pages covering easy UI updates, common design patterns, creating well-structured HTML pages, and troubleshooting.

• The new node uib-file-list will produce a list of files from a uibuilder instance. It automatically adjusts to the currently served sub-folder and allows filtering. Use this for producing indexes and menus.

• Markdown improvements.

  Both the main uibuilder node (via the ui.js library) and the uibrouter library both accept markdown content (via the external Markdown-IT library) and now they both support Markdown-IT plugins so that you can add features such as checkbox lists, GitHub style callouts, Mermaid diagrams and much more.

  There is also a new documentation page dedicated to using Markdown.

  And, the no-code example flow has been extended to demonstrate how to dynamically load all of the libraries, plugins and even how to set up responses back to Node-RED - for example when a checkbox is clicked.

• Wherever you can use no-/low-code features that accept HTML, you can now include <script> tags that will be executed on load.

• Handling of forms and inputs continue to improve.

  • Programmatic changes to input values or checked properties now trigger both the input and changed events - something that HTML normally doesn't do but can be important for data-driven web apps. For example, if using an <output> tag to show a combined or calculated input, changes via Node-RED will still update the values.
  • When using the eventSend(event) function on inputs whether inside or outside of a form, the returned values have been improved, especially for checkboxes and radio buttons.

• File uploads from client browser to Node-RED are now enabled.

  When using a form on a page and using <input type="file">, if a file is selected by the client and the file is less than the size of the maximum message size, the file will be automatically uploaded to Node-RED when the form is submitted (assuming you use uibuilder.eventSend(event) to submit the form). The upload is a message with file details and the file itself as a buffer in msg.payload.

• Security of the UIBUILDER repository on GitHub has been improved.

• On the uibuilder node's "Core" tab, the info buttons bar has changed slightly.

  The "Docs" button has gone (it is still on the top of panel bar anyway) and been replaced by a new "Apps" button which shows a page listing ALL uibuilder node instances along with their descriptions where provided.

  Most of the UIBUILDER nodes have be given a bit of a refresh of their Editor configuration panels. This work is ongoing but should give a more consistent look and feel and make the panels rather more responsive. The layouts are starting to use more modern CSS features. The work isn't complete yet so there are still a few inconsistencies - for example, when you make the panel wider - but we are getting there.

• UIBUILDER now has its own "hooks" feature. For now, these can be used for allowing/blocking or debugging messages. More hooks may be added.

  By adding uibuilder.hooks(...) to Node-RED's settings.js and adding either of the functions msgReceived or msgSending, those functions will run when msgs are received from the client or about to be sent to the client respectively. Both functions need a return value of either true or false. true allows the msg through, false blocks the msg. You can also use the functions to alter the msg and, of course, to report on it to the Node-RED log. The functions receive msg and node as the arguments. So you can filter on the node's URL, socket id, client id, page name, etc.

  As well as debugging or msg altering, you can use these to help with message filtering, especially useful as part of authentication and authorisation processes. And somewhat simpler to use than Socket.IO middleware (which is still available).

• Connection headers have been added to the client details that are shown on control messages and on standard messages if the uibuilder "Include msg._uib in standard msg output." advanced flag is turned on. These may be particularly useful if using 3rd-party identity (authentication and authorisation) tooling which may put validated data into custom headings. Note however that these are "connection" headers, ongoing communications between the clients and the server do not update the headers (not possibl...

Important Bug Fix Release

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

v6.8.1 Bug Fixes Only

• FIXED Regression caused by "fix" for users deploying with an invalid URL. uibuilder node's editor and runtime code updated.
• FIXED Regression caused by over-optimising references to the TI event library which stopped msgs with an originator from getting back to the relavent uib-sender node. libs/socket.js updated.
• Version numbers bumped to match release.

<uib-var> and router improvements and more

📌 Highlights

• The <uib-var> HTML component gets

  • This is BIG! - A topic attribute (use instead of the variable attribute) that automatically watches for messages from Node-RED matching the topic and outputs the payload onto the page. This becomes the easiest way to automatically update the page! It is similar to mustache tags ({{varname}}) in frameworks but has the advantage that it is 100% vanilla standard HTML.

  • A filter attribute that can be used along-side variable or topic or on its own. The attribute receives the name of a function to run whenever the source data changes. Use for formatting output. A new function uibuilder.formatNumber has been added that is compatible, it outputs a formatted version of an input number according to the locale and number of decimal places specified. <uib-var topic="mytopic" filter="uibuilder.formatNumber(2, 'de-DE')">[...]</uib-var>. You can, of course, create your own filter functions.

  • Access to your ./index.css style sheet file. This lets output be styled like the rest of your page.

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

  • Automatic menu updates (to highlight the current route). Just make sure to use list items (li) for menu items and give them a data-route="routerid" attribute (where routeid is the actual route id). The currentRoute class & aria-current="page" attribute are both added to entries matching the current route.
  • Route definitions now support title & description properties.
  • New uibuilder variables to use with <uib-var> to show titles and descriptions that update automatically.
  • A fix for a missing default route - the first defined route is used in this case.
  • Other small bug fixes and improvements to the logic.

• The client library gets

  • Connected to a new "global" socket.io "room" allowing uibuilder connected pages to talk to each other. Note that this is still very basic, only the receiver is in place as yet. There is no function to do a global send.
  • New functions joinRoom(room), leaveRoom(room), sendRoom(room, msg) - to interact with arbitrary communication "rooms". Not fully working yet but will eventually allow any uibuilder connect node or client to communicate with 1 or many other connected nodes/clients.
  • A 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!
  • A 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.
  • New UI functions addClass(classNames, el) and removeClass(classNames, el) to make class handling easier.
  • New connect() and disconnect() functions to manually connect/disconnect the Socket.IO connections.

• 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

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

  • Some reported client data was incorrect. Notably the connections, and lastNavType properties. The connections property has now been corrected. The lastNavType, I now realise will never be correctly updated by the client and therefore it has been removed. Fixing these has also resulted in some simplification of the client code.

• 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

  • navigate(url) - Load a new web page or change routes. Can be triggered from Node-RED with msg {"_uib": {"command":"navigate","prop":"#newroute"}}. See Client Functions (navigate) in the docs for details. URL's can be full, relative (to the current page) or routing (hashes). Obviously, can be called in front-end JavaScript as well as uibuilder.navigate('./page2.html') etc.

  • scrollTo(cssSelector) - Scroll visible page to an element based on a CSS Selector. See Client Functions (scrollTo) in the docs for details. top, start, bottom, end can be used as shortcuts for the top/bottom of the page. An optional 2nd parameter gives more control.

• NEW Functions (without Node-RED remote commands)

  • connect(), disconnect() - These manually connect and disconnect the Socket.IO communications between the browser and Node-RED.

  • formatNumber(value, decimalPlaces, intl, opts) - Compatible with the <uib-var> component's filter attribute. Uses the JavaScript standard INTL library to allow locale-based formatting.

  • keepHashFromUrl() - Returns the route id from the URL.

  • joinRoom(room), leaveRoom(room), sendRoom(room, msg) - allows clients to join/leave/message any arbitrary room

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

Feature release: New front-end router. Improved uib-html, uib-save and much more

UPDATE 2023-12-29: Totally forgot to document the new custom web component built into UIBUILDER! The <uib-var> tag provides an easy way to get dynamically updated content into your web page. See the examples library and the documentation for more details. In this release, allows the specifying of a managed uibuilder variable which will be inserted into the page and automatically updated whenever the variable updates. This is similar to mustache tags in many front-end frameworks ({{myvar}}) but, unlike those frameworks, is totally vanilla, standards-based. Expect further improvements in future releases.

Highlights

• The new front-end routing library is available. Easy to use, robust and reasonably comprehensive. It is not dependent on uibuilder but offered with it to enable Single-Page Apps (SPA's) to be easily created with uibuilder.
• The uib-html node now allows an HTML string wrapper. This defaults to uibuilder's default "Blank" template HTML or can be overridden using msg.template. This lets you create a fully working page from no-code and low-code configurations that can be fed direct to uib-save or used in Dashboard or with http-in/-out nodes. Or indeed with external web server tools.

New client library - uibrouter - front-end routing library

A complete, standalone library for doing front-end routing with both internal and external templates. Lightweight and simple to use. See the documentation for details.

uib-html improvements

• The uib-html node now accepts a msg.template property which, if provided, MUST contain a valid HTML page template.

  This allows you to grab an existing page using the htmlSend command, add new elements/updates and save it back to a uibuilder instance either as the default page or another page, for example, using the uib-save node. Overwriting a page is a way of ensuring that new accesses get a known page with structure and potentially data.

  You can, of course, use this node to produce HTML for use outside of UIBUILDER. For example, use uib-element/uib-update, add a template and use this node to create a complete web page for use with http-in/-out, a static website or some other web service.

  You probably don't need/want the template if outputting for the Node-RED Dashboard ui_template node.

uib-save improvements

• The reload client flag now actually works.
• The new "Use pageName" flag allows you to save to the uibuilder node's live folder using the page name returned from the front-end or manually set in msg._ui.pageName or msg.uib.pageName. This makes it easier to save an updated page via the htmlSend command (either from Node-RED or from front-end code). See the example flow to see how this works. It means that you don't need to know the folder or the pageName at all.
• The filename can include folders (use / as separator) and missing folders will be created automatically if the "Create Folder" flag is set. Note that you cannot have any .. in the filename, this is to prevent escaping from the instance root folder and causing mayhem elsewhere. By default, new folders cannot be created (this is a safety feature), select the "Create Folder?" flag to allow creation.
• The Editor js has been moved out of the html file and put into resources/uib-save.js. It is loaded by the html file in a link. This makes development a lot easier. The code also references resources/ti-common.js to ensure consistency.

uib-tag improvements

• FIXED - Tag name input would only accept string. Now correctly processes other types.

Client library improvements

• FIXED Client htmlSend, when called as a Node-RED command, was returning 2 messages. Now returns the HTML string and sends it to Node-RED directly only if the new 2nd argument is TRUE (the default so that direct calls will still work without changes).
• FIXED eventSend when attached to a change event returns the value property that all input tags have - except when they don't! When input is used as a checkbox, it has a checked property instead. Function changed to return the checked value if it exists (true or false), the value property otherwise.
• NEW function and command watchUrlHash - Toggle (or manually set on/off) sending URL Hash changes back to Node-RED in a standard msg.
• NEW watched variable urlHash Set on load and updated as it changes. URL Hashes are used by front-end routing for Single-Page-Apps (SPA's). They do not reload the page.
• New utility function truthy Takes a truthy/falsy input (e.g. text, number, boolean) and returns true or false (boolean). If input is neither truthy or falsy, can take a 2nd parameter which is the default return.
• Function added to watch for url hash changes.

uibuilder node improvements

• uibuilder - Reduce code complexity by moving more fs actions out into libs/fs.js.
• Some common Node-RED Editor code and styles moved to common libraries (resources/ti-common.js & resources/ti-common.css) loaded as resources. Making the editor code smaller and more consistent.

Editor panel improvements

• Major rework of tracking node instances. Custom events are now fired: 'uibuilder:node-added', 'uibuilder:node-changed', 'uibuilder:node-deleted'. With the node in question passed as data in the event. For added nodes, an extra property addType is added to the node object and set to either "load" (fired when the Editor is loaded which adds all nodes), "new" (when a brand new instance is added, eg from the palette), or "paste/import". The tracking code is also now only ever instanciated once when the Editor is loaded.
• Better and more consistent removal of URL setting when pasting or importing existing uibuilder nodes.
• The Editor js has been moved out of the html file and put into resources/uibuilder.js. It is loaded by the html file in a link. This makes development a lot easier. The code also references resources/ti-common.js to ensure consistency.
• Improved debug information. Debug output to Editor page console is automatic if environment variable NODE_ENV is set to 'dev' or 'development' (it used to be if running on localhost). Otherwise can be turned on by manually issueing uibuilder.debug = true on the browser console on the Editor page.

Examples

• uib-save and uib-html example flows added.
• uib-var-web-component example flow added. Contains several examples of showing uibuilder managed variables dynamically in your HTML code. Including several no-code examples.
• uib-tag example flow added.

Other improvements

• NEW node Library libs/lowcode.js - The beginnings of moving the zero- to low-code element translations (e.g. uib-element, uib-update and uib-tag) to their own library. With the possibility of eventually making that library available as a stand-alone front-end library as well. Not yet in use.
• libs/fs.js - More replacements towards removing dependency on fs-extra. More move of filing system actions out of other nodes and libraries.
• NEW utility function getSource(propName, node, msg, RED, src, srcType) in libs/uiblib.js - this is an ASYNC function that returns a promise. It is a standardised way of getting the current value from a Node-RED Typed Input field.
• Enhanced tooltips not applied to the Monaco/Ace edit panel.

Feature Release & Bug Fixes

Apologies, the documentation has fallen a little behind with this release as things took longer and more new features were added than expected. But I needed to get this release out as it contains some important bug fixes as well.

NEW Features

• New zero-code node uib-tag - creates a single html element based on the given tag name (e.g. create a link element from an a tag). Also works with web component custom tags. Use this when you want to add something not covered by uib-element. Lets you specify slot content (html or Markdown) and attributes at the same time.

• The client library now filters inbound messages according to pageName, clientId, and/or tabId set in either msg._uib or msg._ui.

• There is a new, dynamic page at ../uibuilder/apps that lists (with links) all uibuilder instance endpoints. Currently only a very simple list but the plan is to add an instance title and description field to uibuilder which would then be populated into this page. Use as an index of all of your main web pages (strictly, this is a list of all of the uibuilder-driven web apps. Apps may have multiple pages of course).

• The uibuilder client connection control msg now reports the URL parameters (AKA search parameters) for the connection from the client. This is another way of passing data from a client to the server. Obviously, you should never trust user input - always limit, check and validate user input.

• uib-element now allows the core data for the element to be defined in the node or on a context variable and other locations, you are no longer forced to use msg.payload. It also now allows the incoming msg.payload to be sent to the client to allow for local processing if required.

• uibuilder Instance routes/middleware

  You can now add ExpressJS routes and other middleware to a single instance of uibuilder (a specific uibuilder node), not just to all nodes. Especially useful if you want to add custom security (login, registration, etc) to just one instance.

  The new feature lets you specify the sub-url-path, the HTTP method and the callback function. Paths can include wildcards and parameters too. The routes are always added to the instance router which forces them to only ever be sub-url-paths of the specified instance. e.g. if your instance url is test, a route with a path of /foo/:bah will ALWAYS be .../test/foo/.... This is for security. Note that you are responsible for creating unique URL paths, no checking is done and ExpressJS is quite happy to have multiple path handlers but if you provide a terminating response (e.g. res.status(200)) and no next() call, the call stack is obviously terminated. If you include a call to next(), overlapping route callbacks will also be triggered. In that case, make sure you do not do any more res.xxxx() responses otherwise you will get an ERR_HTTP_HEADERS_SENT error.

  To add route handlers, create 1 or more .js files in the <instanceRoot>/routes/ folder. See the docs for details.

  What can I do? Authentication, authorisation, http headers, dynamic html changes/additions, js inserts, logging, server-side includes, server-side rendering (e.g. Jade, ...) ...

NEW NODE: uib-tag

• New zero-code node
• Creates a single html element based on the given tag name (e.g. create a link element from an a tag).
• Works with web component custom tags.
• Lets you specify slot content (html or Markdown) and attributes at the same time.
• Filters out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Use this when you want to add something not covered by uib-element.

Changes to uibuilder client Library

• FIX Change warn msg "[Ui:_uiManager] No method defined for msg._ui[0]. Ignoring" to an error so it is more visible.

• FIX Issue #213 - SVG flow example not working _uiComposeComponent is not a function at htmlClone index.js:52:15

  Caused by the move of all ui fns to a separate class. So _uiComposeComponent is no longer accessible. It should not have been used in the example anyway since anything starting with an underscore should be for internal use only. My bad.

  `uibuilder.uiEnhanceElement(el, component)`` added. Example will be updated again once this is released

• NEW FUNCTION uibuilder.notify(config) - If possible (not all browsers yet fully support it), use the browser Notification API to show an operating system notification. Supports a simple click reponse which can be used with uibuilder.eventSend to notify Node-RED that a user clicked the notification. Note that there are significant inconsistencies in how/whether this API is handled by browsers. It may not always work.

• No longer processes input messages if either msg._uib or msg._ui includes either pageName, clientId, and/or tabId and where those parameters do not match the current page or client.

• Improvements and corrections to the eventSend function. Allowing more event types to be sensible handled (including the Notify response). Also added CSS class information & specific outputs for notifications. Also, added input field types to form outputs.

• Added window.uib as a synonym of window.uibuilder. So you can do things like uib.logLevel = 5 instead of uibuilder.logLevel = 5

• Added flag to indicate if the DOMPurify library is loaded. Added warnings to the include() function when it is loaded since some includes will be filtered by the purify process for safety. Updated the front-end client introduction document with details about DOMPurify, how to load it and use it.

• Added flag to indicate if the Markdown-IT library is loaded. Updated the front-end client introduction document with details about how to load the library and use it.

• Trigger onChange when msg.payload received along with msg._ui. Previous update turned this off completely but that is too restrictive. Use the Passthrough option in uib-element for example so that data can be further processed in the front-end if required.

• When the client sends a msg back to Node-RED that includes msg._ui properties, the client adds msg._ui.from set to "client". This lets the uib-element, uib-update, and uib-tag nodes filter them out when flow editors have looped an output msg back to the input. ref

Changes to uibuilder main node

• NEW Instance route/middleware handlers - allows you to create custom url routes and custom middleware functions that only impact routes for a single instance of uibuilder.

• NEW Deep object find function added as RED.util.uib.deepObjFind so that it can be used in function nodes. Useful for manipulating msg._ui objects which can get very deep. See Manipulating msg._ui for details.

• NEW A dynamically generated list of all uibuilder apps is now available at ../uibuilder/apps. In addition, title and description fields have been added to the Advanced tab in the uibuilder node. These are used on the apps page. You can also output the detailed list in Node-RED using a function node with RED.util.uib.listAllApps(). The detailed list also shows what node defines the app.

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Changes to uib-element node

• FIX Was issuing a node.warn showing the input type (happening on v6.1 as well) - only for table type. Now removed.

• FIX Chaining to a page title deleted the previous chain - putting title first was ok. Now works either way.

• FIX Form checkbox "value" output from auto-send was always "on". Because HTML is sometimes utterly stupid! Input tags of type "checkbox" do not set a value like other inputs! They only set the "checked" attribute. Fixed by forcing the value attribute to be set. Issue #221, Discussion #219.

• KEY CHANGE Added option to select core data input other than msg.payload.

  This means that you can define the UI element directly in the node if you want. This includes the use of JSONata for dynamically defined elements, allowing for even simpler msg inputs should this be desired.

• KEY CHANGE Added an option to pass through msg.payload. When sent to the front-end, the client library will trigger standard events to allow further processing of the data in the front-end.

  This means that you can use uibuilder.onChange etc in the front-end even though the msg contains msg._ui which would normally prevent this from happening.

• Order of node properties changed in the Editor. Hopefully more logical.

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

• Form additions:

  • Textarea input.
  • Select options drop-down input.

Changes to the uib-update node

• Filter out msg._ui from input if it includes msg._ui.from set to "client". We don't want to loop from output to input. ref

Changes to CSS styles (uib-br...