Uibuilder v6.1 beta - progress

Quick update on the progress of uibuilder v6.1

As usual, plenty of new ideas getting incorporated. The latest being an extension to the low-code uibuilder.eventSent(event) function. This has been around for a while and is easily incorporated into your HTML like <button onclick="uibuilder.eventSend(event)">. When the event fires, the uibuilder client library automatically sends a standard message back to Node-RED with lots of information such as what modifier keys were pressed. In v6.1, this has been extended so that if you put the event handler inside a <form></form>, any inputs will be included in the msg without needing any code at all. Similarly, if you attach the handler to a single input field as in <input onchange="uibuilder.eventSend(event)">, when the field changes, the new value will be included in the msg.

The new uib-element continues to gain more standard zero-code UI elements too. I've already added a raw HTML passthrough that lets you use the Node-RED core template node. Next up will be a zero-code simple form that will take an input array and create a multi-input form with a submit button that will return form data back to Node-RED (all zero-code remember). Something to change the page title and a basic tabbed interface are next up.

Along the way, I've been updating all of the templates and examples to use the latest standards and done a load of documentation updates.

Remember that if you want to try out the new features as they are progressing, you can install uibuilder from GitHub as follows:

cd ~/.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v6.1.0

And, as always, feedback and bug reports are always welcome.

I'm working on another video as well - this time on how to create an HTML form with uibuilder and how to get the form data back into Node-RED. (Hint: even under uibuilder v6.0, this is only a few lines of simple code!).