UIBUILDER Next Release: What's next? Feb 2025 edition

Share Your Nodes
1

Building on the thoughts in UIBUILDER Next Release: What's next? Jan 2025 edition

And coming from the camp of "blindingly obvious in hindsight"! Comes the next instalment of changes. Should land in v7.2 before too long.

In the last thread, I mentioned the new uib-sidebar node that turned out to be trivially easy to get set up.

That led me to start thinking about an easier low-code method for updating existing HTML elements on your web pages. Then I discovered a tiny module called TinyJS. And the lightbulb exploded somewhere inside my cranium at long last.

So the next feature for UIBUILDER will be a front-end browser utility function called simply dom.

dom lets you create new HTML Elements that you can apply to your page:

const newDiv = dom.div({ id: 'myDiv2', className: 'container' }, dom.p('wow!') )
$('#more').appendChild(newDiv)

So you can easily create new elements with nested elements if you like. You can also change any attribute or property of the created element(s). This even works for custom web elements as well.

You can also update existing elements even easier:

dom.update('more', { className: 'myClass', innerHTML: '<span style="color:red;">Hello</span> World!'} )

No need to remember how to apply children. This updates for you directly.

And, of course, to make things simpler when creating elements:

dom.new( dom.div({ id: 'myDiv2', className: 'container' }, dom.p('wow!') ) )

There will also be a new message schema so that you can do all of this directly from Node-RED without needing to even touch and JavaScript! :partying_face:

The existing features will, of course, continue to work just fine. As always.

Much of the coding for this was done in just a few hours today. Though still a fair bit of finessing to be done:

  • If no ID is provided, auto-generate one. (as per my standard custom components)
  • Allow string input to be innerHTML.
  • Check for DOMpurify and use it if available.
  • Force attr containing a dash to camelCase.
  • Auto-add event listeners to input elements unless in a form or already set.
  • Auto-add event listener to form submit.
  • Input/Form event listeners should return data to node-red if uibuilder is in use.
  • Add update method to update an existing element.