Uibuilder v6.1 progress and proposals for v6.2

Share Your Nodes
1

Making slow but steady progress on uibuilder v6.1. I've just transferred a load of To Do entries into the roadmap to clear the way for the final deliverables on 6.1.

Just a few things left to tidy up on uib-element. Then I need to create the uib-update node which should be pretty quick as it should be a lot simpler. I also want to tweak the blank template to simplify it still further. I'll remove as much as possible because it will then be ideal for using with the new nodes.

Some enhancements have been added to uibuilder's default CSS (which you don't have to use of course). Specifically, some tweaks for table layouts and better default layouts for forms.

The uib-element node now also has an optional heading that you can set for each type. As mentioned I think last time, you can now also pass through raw HTML to the front end.

The client library's eventSend function has been further enhanced to include form data if the element triggering the event is within a defined form. All of the form's inputs are automatically included in the output.

I've had some interesting thoughts for v6.2 as well.

v6.2 will gain new more new nodes:

  • uib-html will use the same code as the msg._ui processing in the client library. This will enable you to hydrate into HTML the UI config data produced by uib-element and uib-update as well as your own custom config data. So you will be able to generate HTML in Node-RED itself from the zero- and low-code capabilities. Great for use with other tools including Dashboard and http-out.

    Uses:

    • Learn how to write your own HTML
    • Output to a uibuilder node to save processing the _ui data in the front-end
    • Output to a uibuilder server folder for use in your app as a static load (or occasionally changing load)
    • Output to a file for use in an external (to Node-RED) static web server/service
    • Output to an http-out node as a response to a request
    • Output to a ui_template node for incorporation in Dashboard UI's

  • uib-save will allow you to save files into a uibuilder instance's folder structure without worrying about where things physically live. Examples of use would be to save the data from the uib-html node to a file so that it can be used as a static page.

    Uses:

    • Save msg._ui configuration data to a static JSON which can then be used to load an entire UI on page load.
    • Save/update files that are automatically available via the uibuilder web. For example a static web page that is perhaps updated periodically. This could also work with data, JavaScript, CSS, etc. In fact anything that can be serialised or that is already a string. Perhaps even image data from MQTT or a buffer.
    • Use with the uib-html node to save static HTML files built via uib-element or some other flow that outputs msg._ui configurations. Great for pages that periodically update because this will be very efficient and deliver fast, "static" pages.

Undoubtedly, the uib-element node will also gain more elements. There is a list of likely enhancements in the ROADMAP document.

As always, let me know what you think.

3 Likes