Uibuilder v6.1 dev progress #5 - 1st release of uib-update - zero-code UI updates

Earlier this evening (UK), I pushed the first release of the new zero-code uib-update node to the v6.1.0 branch on GitHub. It allows you to easily update an element on your web page from data in Node-RED.

It is workable but very basic right now. It should show how it will work and its flexibility. Very simply, you just need to know how to select an HTML element on your web page (hint: you can use your browser's dev tools to find and copy the CSS Selectors that you will need).

In this version, you can just update the inner HTML of the selected element (referred to as the "slot").

Before release, you will be able to use Markdown not just text or HTML in the slot, update attributes (e.g. input values, classes, styles, etc), change event handlers, and update element properties (e.g. attaching non-string objects to the element, working with more advanced features in HTML components, etc).

As you can see, you will be able to make use of lots of Node-RED's features to select and update dynamically.

For now, if you try it out, have a go at updating an HTML heading content or the content of an on-page div or input value. Combining a msg payload with JSONata is a nice easy way to do things like convert input data to a different format.

This node outputs uibuilder's standard configuration data just as uib-element does and both nodes can be chained to build up more complex pages, updates and changes dynamically with zero code.

Currently, the uibuilder client library "hydrates" the low-code config data into standard HTML. In a future release, you will be able to do that within Node-RED as well.

3 Likes

A further update pushed tonight. uib-update can now update any HTML attribute as well as the slot content (text, HMTL or Markdown).

:boom::boom::boom:
That means that you can now control ANY ON-PAGE ELEMENT from a simple node!
:boom::boom::boom:

No code required. Though of course, you can use any of Node-RED's capabilities to drive this. Try out the example code below if you have the beta v6.1.0 uibuilder branch installed. It uses an on-screen hidden element <div id="more"></div> which is included in the default templates or you can add yourself (or select something different).

It shows a couple of different ways of updating things using input messages, JSONata, etc. It also shows how you can instantly hide/show the element direct from Node-RED flows.

You can also, of course, chain updates and even chain uib-element and uib-update nodes for more complex outputs. Add an element with uib-element then update it with 2 nodes (not sure why you'd want to do that but in any case, you can if you want to).

[{"id":"3a4646d907163171","type":"uib-update","z":"225a6af5f8bc4cc2","name":"","topic":"","cssSelector":"topic","cssSelectorType":"msg","slotSourceProp":"\"Dynamic! \" & $formatInteger($random() * 100, \"0\")\t","slotSourcePropType":"jsonata","attribsSource":"attribs","attribsSourceType":"msg","slotPropMarkdown":false,"x":910,"y":640,"wires":[["cbcaeaa33ea034ac","4a7739e1f4c3a17b"]]},{"id":"cbcaeaa33ea034ac","type":"link out","z":"225a6af5f8bc4cc2","name":"link out 23","mode":"link","links":["c203417099e22d29"],"x":1075,"y":640,"wires":[]},{"id":"4bf19aeb25b711ca","type":"inject","z":"225a6af5f8bc4cc2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"attribs","v":"{\"style\": \"color:red; border: 1px solid silver;\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"#more","payload":"","payloadType":"date","x":680,"y":640,"wires":[["3a4646d907163171"]]},{"id":"4a7739e1f4c3a17b","type":"debug","z":"225a6af5f8bc4cc2","name":"debug 99","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1075,"y":680,"wires":[],"l":false},{"id":"b289f1f254e7d234","type":"inject","z":"225a6af5f8bc4cc2","name":"hide","props":[{"p":"topic","vt":"str"},{"p":"attribs","v":"{\"style\": \"display:none;\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"#more","x":710,"y":680,"wires":[["3a4646d907163171"]]},{"id":"4f6acff5e3d782a0","type":"inject","z":"225a6af5f8bc4cc2","name":"show","props":[{"p":"topic","vt":"str"},{"p":"attribs","v":"{\"style\": \"display:inherit;\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"#more","x":710,"y":720,"wires":[["3a4646d907163171"]]}]

Note that some additional input checking is required so sending odd data will likely have odd results.

Oh, and maybe I should note that some of the uibuilder nodes now have more individual icons. :slight_smile:

uibuilder: image

uib-element: image

uib-update: image

2 Likes