Releases · TotallyInformation/node-red-contrib-uibuilder

20 Apr 20:44

TotallyInformation

v7.6.0

415ad56

Feature release: Introducing Markweb and other enhancements Latest

Latest

Code commits since last release.

📌 Highlights

In the Node-RED Editor, a popover is now shown after a UIBUILDER update. It contains highlights of the changes in the new version. It will only be shown once per version update.
NEW NODE markweb - Enables simple creation of dynamic web sites using Markdown files. It supports navigation menus, search, front-matter placeholders, custom templates and much more.
If you have set the Reload connected clients on save? option on the uibuilder node's File tab, clients will automatically reload the visible page not only if you change a file in the file Editor but also if you make changes elsewhere such as using an external editor or the uib-save node. So you now have the option of a full development server workflow.
Two new example flows. "Built-in Web Components" and "Easy UI Updates".
The various uibuilder icons now have more open names in the palette. In addition, the icons have all been updated to use customised, coloured icons. In particular, the uibuilder and markweb primary nodes now use 🌐 and 🕸️ icons respectively which is in line with their log and debug outputs.
The uibuilder docs, front-end templates and markweb page template now all have different favicons to help differentiate them in the browser.
Default Content-Security-Policy (CSP) header updated for improved browser security. You can override it in your settings.js file if needed.

Front-end

uibuilder.get() and uibuilder.set() functions now support deep object paths. This allows you to get and set nested properties of reactive variables without needing to replace the entire variable. e.g. myvar.myprop, myvar.myprop.subprop or myvar[5].
All HTML custom elements and reactive attributes also now support nested object paths. e.g. <uib-var topic="myvar.myprop"> or <div uib-var="myvar.myprop.subprop">. This allows you to directly bind to nested properties of reactive variables without needing to replace the entire variable.
Updated uibuilder.onTopic() to process control messages as well as standard ones. Added so that the <uib-var topic="..."> component and uib-topic attribute can listen for control messages.
<uib-var> component now recognizes data-before and data-after attributes. Useful for adding units, labels, or other contextual information around the variable value without needing extra HTML elements.
New uib-var custom reactive HTML attribute added. Mostly of use for <meta>, <title>, <link> elementts in the <head> HMTL section.
If DOMPurify is used, it is now configured to allow custom web components, since uibuilder now makes more extensive use of them.
New stack and logStack functions. These can be useful for debugging and understanding the flow of your code especially with complex and deeply nested functions.

Documentation

Mermaid diagrams are now supported in UIBUILDER's documentation. With the first example being for the new markweb node's page.
The Roadmap has now been split into separate pages as it was totally unmanageable as a single page. You can use the links on the main Roadmap page to navigate to the different sections.

New node: markweb

Create a folder containing at least an index.md file for each (sub-)folder. Add the new node and configure the base URL and source folder.

The node will serve the markdown files as HTML pages using Single-Page Application (SPA) style navigation. The markdown is converted to HTML and inserted into a page template.

The Markdown conversion is done on Node-RED startup and re-done when a source page changes. So loading and navigation from the browser remains very fast.

It supports YAML front-matter in the markdown files. All front-matter attributes are available as placeholders in the page template and in the markdown using {{attributeName}} tags. Special instructions (directives) are also available to create navigation menus, index listings, search results, etc. These use %%...%% syntax.

CommonMark and GitHub Flavored Markdown (GFM) are supported. Syntax highlighting for code blocks is also included. Some additional extensions are also supported such as custom attributes.

An optional web component <show-meta> is also provided to display the current page's metadata (front-matter attributes). This is useful for debugging and development.

See the node documentation for full details.

Examples (Node-RED library flows)

NEW Built-in Web Components

Shows how to use the uibuilder client web components: <uib-meta>, <uib-var>, <apply-template>, and <uib-control>. These are all included in the main client library and do not need to be loaded separately.
NEW Easy UI Updates

Illustrates the use of the different ways to update the UI from Node-RED or your own front-end JavaScript. Includes examples of using the (new) uib-var and (existing) uib-topic custom HTML attributes, and the existing <uib-var> web component.

Documentation

The sidebar of documentation page links now scrolls the current page link into view.
The sidebar top-level entries that have children are now collapsible sections. Added because the documentaiton continues to grown.
The sidebar expand/collapse state for each section is remembered across page loads.
Each page now automatically shows status and/or since front-matter.
Fixed Issue #575 - Broken CSS loads.
Improvements to developer detailed documentation including details on the uibuilder/markweb instance setup. Should make things a lot easier if other developers want to take part in the future.
Mermaid diagrams are now supported. With the first example being for the new markweb node's page.

uib-cache node

Added several techniques to reduce resource overheads when the cache is receiving very large numbers of inputs.

uib-elements node

FIXED Issue 580 - Missing data could cause a Node-RED crash. Additional checks and try/catch trap added.

uibuilder node

NEW Function uibuilder.getCommandList(). This function returns a list of available commands that can be sent from Node-RED to the front-end client.
FIXED VScode link not properly updating on node url change.
Added a new config variable instancePath. This is the first change that will eventually allow uibuilder instances to use a different server folder than <uibRoot>/<url>.

uib-var component

FIXED Not updating when the given variable is zero (0). Ref.

`uib-brand.css` front-end styles

Added .visually-hidden class for elements hidden from sighted users but still accessible to screen readers. Use for skip links, form explanations, and status updates otherwise not needed for sighted users.
FIXED Misconfigured fieldset border.
Tweaks to blockquote and code styles for better appearance.
All z-index values changed to use CSS variables. This allows you to easily change the z-index values in your own CSS if needed.

uibuilder client library

NEW Function formatDate. This uses the Intl API to format dates according to locale and optional pattern. See the documentation for details. Really useful as a filter function and works great with the new markweb features.
NEW Functions
- randomUUID. This function generates a random UUID (Universally Unique Identifier) using the browser's crypto.randomUUID() method if available. If not available, it falls back to a simple implementation that combines the current timestamp and a random string. This can be useful for generating unique IDs for elements, messages, or other purposes in your front-end code.
- asyncSend. This function allows you to send a message to the server and wait for a response. It returns a promise that resolves with the response message. This is useful for request/response patterns where you need to get data from the server before proceeding. Ref.
- stack and logStack. These functions allow you to log a stack trace to the console. stack returns the stack details, while logStack logs the details as a regular console log message. This can be useful for debugging and understanding the flow of your code especially with complex and deeply nested functions.
NEW Added the _receivedHRtime property to messages received from the Node-RED server. This is a high-resolution timestamp (in milliseconds) of when the message was received. It can be used to measure latency and performance. It uses the performance.now() method which provides sub-millisecond accuracy. The value is the elapsed time since page navigation started.
NEW Added instanceFolder to uibuilder node settings. This to bring it into line with the new markweb node, in the future, allow instance root folders to be specified anywhere.
NEW httpHeaders property added. This contains the HTTP headers received when the front-end client first connects to the server. This can be useful for debugging and for advanced use cases such as authentication and user tracking. Async so issues a custom event when ready. The start() function is now not called until they are ready because the headers are the most reliable way to get the namespace and Node-RED web root (stupid Firefox refuses to...

Assets 2

24 Sep 17:09

TotallyInformation

v7.5.0

aadca78

Feature release: Scripts tab, custom server public folder, bug fixes and more

Code commits since last release.

NOTE: If using the uibRouter SPA client library, please note that the startup processing has changed slightly. You may now get an error if you have specified a route container element but it doesn't exist. Unfortunately, some of the examples shared have this error and so will now break unless that container element id is changed. Sorry about that. The built-in router/SPA example has been updated to reflect this change.

📌 Highlights

New "Quick Start" guides added to the documentation. Two main approaches: no-code/low-code and low-code/custom code. Each approach has a step-by-step guide to get you started quickly. In addition, several documentation pages now have rotating "tips" selected randomly from a list, they change every 15 seconds.
A new browser overlay notification message feature available. Using showOverlay allows messages of different types (info, success, warning, and error) to be displayed to users in the browser. This can be triggered from Node-RED or from front-end code. Messages can be auto-dismissed after a few seconds (the default), or retained until manually dismissed.
The uibuilder node now has an extra tab "scripts" which lets you run npm scripts defined in your instance root's package.json file.

These can be any script that can be run on the host OS. They run in the OS's default shell. Output from the script is captured and returned to Node-RED in the panel beneath the list of scripts. When a script is running, a "Kill Script" button is visible, clicking this wil abort the script immediately.
The 🌐 emoji is now in use consistently across UIBUILDER. You will find it in announcements on the forum, log messages, on the web page open buttons in the Editor and elsewhere. I am using this because emoji's are single-characters and usable anywhere that UTF-8 text is usable.
uibuilder installation will now ERROR and stop if the Node-RED userDir folder is not writable. This is to prevent the uibuilder node from being misconfigured and not working correctly. The error message will show the userDir folder that is not writable.
When using uibuilder's custom web server option, you now have the option to create a <uibRoot>/.public folder. It is served as the root URL. This is where you can place static files that you want to serve from the custom web server. The folder will be created automatically if it does not exist. You can also use this folder to serve static files such as images, CSS, and JavaScript files. Create an index.html file in the folder to serve a custom root home page. The folder is not served if you are using the default Node-RED web server (Use Node-RED's public folder for that).
The documentation now has a "Tips" page that rotates through a selection of tips. I will be adding more tips over time. If you have any tips that you think would be useful, please let me know.

Example flows

NEW uib-basic An inject node to a uibuilder node with debug nodes on each output. Inputs and outputs minimised. Outputs show full msg and show msg count.
UPDATED Client-side code > FE Router Test. A complete front-end router example flow including html, js and route partials.
UPDATE "Remote Commands" renamed to "Control UI from Node-RED" and refreshed. New showOverlay notifications included.

uibuilder node

NEW Two new Editor actions have been added. This enables you to run these actions from keyboard shortcuts.
- open-uibuilder-site - opens the selected uibuilder instances web site in a new browser tab.
- edit-uibuilder-site - opens the selected uibuilder instances source folder in your full IDE. THe configuration for this comes from the "Code Editor URL" in the node's advanced properties tab (defaulting to VS Code).
Updated the buttons on the Editor config panel's top button bar to use icons instead of text. Note that the wireframe globe is now used consistently across uibuilder.
NEW An extra tab "scripts" has been added. This lets you run npm scripts defined in your instance root's package.json file.

These can be any script that can be run on the host OS. They run in the OS's default shell. Output from the script is captured and returned to Node-RED in the panel beneath the list of scripts. When a script is running, a "Kill Script" button is visible, clicking this wil abort the script immediately.

In addition to scripts that you define, the default npm outdated, update, and install scripts are also available to run.
FIX for issue #564. VSCode edit link would not work if the uibuilder root folder did not start with a /. Also, the VSCode edit link could not be amended.
FIX for duplicate url error when node is used in a subflow. Ref.
FIX for issue #556. The library list in the Editor config panel would not work correctly if a library name contained special characters. Thanks to Paul Reed for reporting this issue.

Ui class

Fixed a hidden issue with replaceSlot(). The safe method of creating a DocumentFragment does not work if the parent element is a <template>. For that, you can only use innerHTML.
NEW showOverlay function. This function creates and displays an overlay window with customizable content and behavior. See the uibuilder client documentation for more details.

uib-sender node

BUG FIX It was not returning messages from the front-end. This was a regression bug from a previous update. Many thanks to @Robert0 for reporting.

`uib-brand.css` front-end styles

Improved colour contrast for default text/background.
Improved background contrast for forms. Forms now stand out if emmbedded in an <article> element.
Corrected the foreground/background colour for inputs and textareas. Now works better in light mode.
Improved appearance of inputs and select elements outside of forms.
Updated the table header styles to make them sticky. This means that the table headers will remain visible when scrolling down a long table. This is particularly useful for large tables with many rows.
Changed accent-color to use the --primary variable rather than the --brand variable. accent-color is used by browsers to set the colour of form elements such as checkboxes and radio buttons. This means that the colour will now match the primary colour used in the rest of the uibuilder styles.
Added cursor: pointer; to the <summary> element. This makes it clearer that the element is clickable and can be expanded or collapsed.
Improved .status-side-panel styles. Allowing background color to be overridden with --status-color.

For forms, the following CSS variables (show with their defaults) can be used to more easily change the appearance of the forms:

/* The main background color for form elements */
--form-bg: var(--surface1);
/* The main text color for form elements */
--form-fg: var(--text2);
/* The border color for form elements */
--form-border: 1px solid var(--text3);

For the updated navigation menus, the following CSS variables (show with their defaults) can be used to more easily change the appearance of the menus:

/* The main background color for the menu */
--nav-bg: var(--surface3);
/* The main text color for the menu */
--nav-fg: var(--text2);
/* Secondary background color - used when hovering over other menu items */
--nav-2nd-bg: var(--primary-bg);
/* More contrasting text color - used for selected menu items */
--nav-2nd-fg: var(--text1);
/* More contrasting background color - Used for menu pop-up background */
--nav-3rd-bg: var(--surface2);

uibuilder client library

NEW function uibuilder.reactive(srcvar)

This function allows you to create a reactive variable. It outputs a custom event when the variable changes (including deep object changes). It returns the reactive version of the variable. This also has several new methods:
- onChange(property, callback): Adds a listener that triggers the callback when the specified property of the reactive variable changes. If '*' is specified, it listens for any change to the variable. It returns a reference to the callback that can be used to remove the listener later. The reference also has a cancel() method
- cancelChange(callbackRef): Removes a listener using a saved callback reference.
[!WARNING]
If the reactive variable is a primative type (string, number, boolean), then the you MUST use the myvar.value = 42 syntax to change the value. If you use myvar = 42, then the reactive variable will overwritten. The value property will also let you change a primative even if it has been created with const.
NEW showOverlay function. This function creates and displays an overlay window with customizable content and behavior. This is an easy way to display some temporary information to the user.

Also available as an external (from Node-RED) command. In that case, msg.payload is used as the content of the overlay unless options.content is specified. Controlling options can be passed in the msg._uib.options property
Updated the client library type description files. They are available in the types folder of the blank template. There is a tsconfig.json file in the root of that template that includes the type definitions. This means that you can now get better code completion, descriptions and type checking when using the client library in your own code. Feel free to copy the file and the folder to your own projects.

[!WARNING]
The type definitions are not automatically...

Assets 2

22 Jul 14:19

TotallyInformation

v7.4.3

10e6dde

Bug Fix

Bug fix for Issue #557 - Building ui.js with ESBUILD was causing the require to fail in the uib-html node. Needed to adjust the code from require('./libs/ui.js') to require('./libs/ui.js').default.

Assets 2

10 Jul 10:30

TotallyInformation

v7.4.2

0e7466a

Bug fixes and improvements to showDialog

Code commits since last release.

Dependabot updates to dependencies.
Merge PR #553 from mutec: Fixes an issue with the glob function in libs/fs.cjs. Only impacts Windows users.
Fix issue #546. Issues with the client ui library's showDialog function.
Update the ui showDialog function - improving layout and updating the CSS styles in the uib-brand.css file.

Assets 2

13 Jun 16:23

TotallyInformation

v7.4.1

8b26254

Some fixes and minor new features

v7.4.1

Code commits since last release.

📌 Highlights

uibuilder client library

New variable uibuilder.get('currentTransport')

Will either be websocket or polling. This is set when the connection is established and may change if the connection is lost and re-established. Should generally be websocket after a few ms. If still set to polling, then either there are network issues or there is a poorly configured proxy server in the way. If you are using a proxy server, it should be configured to allow WebSocket connections. Even with polling, the connection should still work but it will be slower and less efficient.

A console error message will be logged if the transport is not websocket after a few seconds.
When using the custom HTML attribute uib-topic: msg.dataset is now processed along with msg.attributes and msg.payload. msg.dataset must be an object, each key becomes a data-* attribute on the element.

`uib-cache` node

FIXED Setting the "# messages" to zero should have retained unlimited messages for each "Cache by" property. It wasn't working correctly. Now fixed. Many thanks to Manjunath Satyamurthy in the Node-RED Forum for reporting this issue.

`uib-brand.css` front-end styles

Amended .status-grid class to use 3 variables: --status-grid-min, --status-grid-max, and --status-grid-gap. This allows the grid to be more flexible and responsive. The default values have not changed but you can now override them in your own CSS.

Documentation

Creating UIs:
- Grid Layouts - Now a more complete article on how to create responsive, content-heavy grid layouts.
- CSS Best Practice - Some simple guidelines and good practices for creating flexible layouts using CSS.
- Charts - A new article on how to create charts using the uibuilder client library. This is a work in progress and will be updated as more information becomes available.
- Form Handling - A new article on how to handle user input using forms and other input elements. This is a work in progress and will be updated as more information becomes available.
- Creating Web Apps - How to create data-driven web applications using UIBUILDER. Article updated.
- Several other articles are still awaiting content. Lists, Maps, Tables, Dashboard Layouts, Cards, Articles.

Node-RED Admin endpoints

<nrAdminURL>/uibuilder/uibindex?type=diagnostics is a new variation on the uibindex endpoint. It returns diagnostics information in JSON format that shows uibuilder detailed diagnostic information. You must have an active Node-RED Editor session to be able to access this endpoint.

Warning

Please take care with the use of this endpoint as it contains sensitive information about your uibuilder instances.

Server library: `admin-api-v2.js`

FIX /uibindex route incorrectly assumed the presence of req.headers.referer.
NEW /uibindex?type=diagnostics added. Returns diagnostics information in JSON format that shows uibuilder detailed diagnostic information. You must have an active Node-RED Editor session to be able to access this endpoint.
Switched from passing the uib master variable to use the uibGlobalConfig module. This is a step towards a more modular codebase.

Devlopment processes

Rebuilt the gump build process for the front end client library. Now simplified and more robust.

Assets 2

06 Sep 13:02

TotallyInformation

v7.0.4

459a913

Bug fix

Bug fix only. Missing originator on messages from clients.

Assets 2

02 Sep 16:06

TotallyInformation

v7.0.3

3275478

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

Assets 2

01 Sep 17:02

TotallyInformation

v7.0.2

873de80

Bug Fix: nanoId

v7.0.2

Fix bug in uiblib nanoId. Bump to v7.0.2

Assets 2

01 Sep 15:54

TotallyInformation

v7.0.1

b154004

Bug fix

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

Assets 2

01 Sep 15:31

TotallyInformation

v7.0.0

657390b

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

Assets 2

Uh oh!

Releases: TotallyInformation/node-red-contrib-uibuilder

Feature release: Introducing Markweb and other enhancements

📌 Highlights

Front-end

Documentation

New node: markweb

Examples (Node-RED library flows)

Documentation

uib-cache node

uib-elements node

uibuilder node

uib-var component

uib-brand.css front-end styles

uibuilder client library

Uh oh!

Feature release: Scripts tab, custom server public folder, bug fixes and more

📌 Highlights

Example flows

uibuilder node

Ui class

uib-sender node

uib-brand.css front-end styles

uibuilder client library

Uh oh!

Bug Fix

Uh oh!

Bug fixes and improvements to showDialog

Uh oh!

Some fixes and minor new features

v7.4.1

📌 Highlights

uibuilder client library

uib-cache node

uib-brand.css front-end styles

Documentation

Node-RED Admin endpoints

Server library: admin-api-v2.js

Devlopment processes

Uh oh!

Bug fix

Uh oh!

Bug fix

Uh oh!

Bug Fix: nanoId

Uh oh!

Bug fix

Uh oh!

MAJOR RELEASE - now node.js 18+

⚠️ Potentially Breaking Changes

📌 Highlights

Uh oh!

`uib-brand.css` front-end styles

`uib-brand.css` front-end styles

`uib-cache` node

`uib-brand.css` front-end styles

Server library: `admin-api-v2.js`