🌐 UIBUILDER New Release! v7.3.0 - Templates and documentation updates

Share Your Nodes
1

I am happy to report that I've just published v7.3.0 of UIBUILDER. Details of changes below.

A big shift in how templates are managed in this release which should make future updates a lot easier to manage and more flexible.

Also in the templates, please do check out the fact that the included more element has been updated in all templates to include the uib-topic="more" attribute. So now, you can simply send a message to the uibuilder node and have the payload immediately appear - just make sure that msg.topic is set to "more". :smiley: The payload can be a number or text and can include HTML in the text.

CHANGES

:pushpin: Highlights

  • A new documentation section called "Creating Web UI's" has been added. The idea is to provide quick-reference guides on how to create common page elements and layouts using UIBUILDER. Some of the articles that were pare of the "Using UIBUILDER" section have been moved to this new section for clarity. What else needs to go here? Please let me know in the Node-RED Forum.

  • UIBUILDER standard templates can now be external repositories, loaded via Degit. You could already load an arbitrary template this way but now some of the standard templates have been moved so that they can be more easily maintained. The selected template now also shows a description.

    • Several templates have now been removed from core. They are now relegated to a separate repository and will no longer be updated. Of course, you can still copy the code yourself should you need a head-start and want to use them.
    • Most of the remaining templates are now external. They will reside in their own repositories on GitHub and can be maintained separately to UIBUILDER.
    • Templates now include a tsconfig.json file and a /types folder that describes the uibuilder client library. When writing front-end code, you should now get better code completion, descriptions and type checking.

  • The templates now all have an updated <div id="more" uib-topic="more"></div> element. While this has been a staple of the templates and examples for a while, the addition of the uib-topic="more" attribute means that you can now show the content of a msg.payload without having to write any JavaScript code. Don't forget to set msg.topic to "more" so that the uibuilder client library knows where to send the message.

Don't forget to try loading the updated templates to see the improvements.

Documentation

  • NEW Section: "Creating Web UI's"
    • NEW (Draft) Creating a web app - How to create a web app using UIBUILDER
    • NEW Grid layouts - Creating a content-heavy grid layout using CSS Grid
    • NEW Dashboard layouts - Creating a dashboard-style layout using CSS Grid
    • NEW Forms: User input handling - Handling input using forms and other input elements
    • SOON Tables
    • SOON Charts
    • SOON Maps
    • SOON Articles
    • SOON Lists
    • SOON Cards

Please let me know if you want to see other content in this section.

uib-brand.css styles & variables

uibuilder client library

  • TypeScript definition files now included. This gives a much better experience when using the client library. It works for JavaScript not just TypeScript. All of the templates now also contain copies.

Runtime Plugin

  • FIX Error in RED.util.uib.dp that always returned a single decimal place if zero dp's were requested.
  • NEW RED.util.uib.truthy(val) - Returns true if the value is truthy. This is useful for checking if a value is set or not. See the details in the documentation.

Node: uibuilder

  • Updated template processing to allow standard templates to be external.
  • Templates now show a description in the Editor config.
  • Removed templates: esm-blank-client, esm-vue3-nobuild, iife-blank-client, iife-vue3-nobuild, svelte-basic, vue2-bootstrap,vue2-simple. Reference copies placed in the deprecated templates repository.
  • External templates added: "Extended IIFE example", "Simple external ES module", "External Svelte", "Vie3 no build step, IIFE client". Each with a link to the corresponding GitHub repository.
  • FIXED The uibuilder node's "Node details" button now correctly opens the instance settings page in the Node-RED Editor. It was previously trying to open a non-existent page.
  • FIXED The uibuilder node's "Node details" button now correctly opens the instance details page.

Background code improvements

  • Moved the uibuilder node's uib var to nodes/libs/uibGlobalConfig.cjs as a module. Enables being able to require it rather than pass it in libs and other nodes. Another step towards a more modular codebase.
  • Started renaming js files to better indicate whether they use script/CommonJS (*.cjs), or ESM (*.mjs). Mostly to help with ESLINT.
  • Lots of code cleanup and linting to make the code more readable and maintainable.
1 Like
2

I've tried uibuilder 3 or 4 times so far, and found it above my technical paygrade each time...
...but every time you post, I get drawn in again. Please stop :rofl:

I'm a little disillusioned with DB2 at the moment, and having previously committed to dashboard 1, flexdash, and dashboard 2, I'm losing confidence in finding a stable and usable solution...

3

:rofl: I ain't going anywhere Paul! I'll keep at it until you realise how easy it all is!

I've always tried to be completely fair to the Dashboard solutions. But they all share the same issues. UIBUILDER was specifically designed to avoid those.

Investing time learning the basics of HTML, CSS, and native JS HTML API's means that you are on a continual upwards feature train that avoids the major, disassociative jumps you get with front-end frameworks.

UIBUILDER major version jumps have now mostly ended their actual breaking changes. The last couple have mostly been about changing minimum node.js versions in line with Node-RED. There are some really exciting changes to CSS coming soon for example that will build on what exists but make things easier all round.

What we are still short of with UIBUILDER is enhanced web components. Again, web components are fully standards based (thought you can use frameworks such as LIT or Svelte to build them as well) and so usable just about anywhere. Adding UIBUILDER enhancements is trivial and honestly not even always needed, most of the ones I've created don't have anything extra for UIBUILDER. Of course, you can use 3rd-party ones as well. I'll continue building them but until I retire next year, time is somewhat constrained.

Happy to talk through some ideas if you want to. My web components site has loads of things I want to work on when time permits.

3 Likes
4

Thanks Julian
One of the big advantages that DB2 has, is that chart data, switch status, etc, is saved, so when a chart is viewed for example on a phone, the chart is fully populated as soon as it connects, along with switch status, whereas with UIBUILDER, I seem to recall that I had to create workarounds - saving chart data & redrawing the charts from context data.
Having said that, I'm currently doing that with DB2 anyway, as I'm using chart.js in ui template nodes, in preference to the DB2 chart node...

5

I think that is my poor explanation of how to do things.

UIBUILDER deliberately avoided the issues that DB2 now finds itself with in regard to caching. There are simply too many different caching requirements and edge-cases and I wanted to give more flexibility.

So with UIBUILDER, you use the uib-cache node. That has several modes of operation and, of course, you can use multiple of them to have different cache modes in parallel. I often use 2 link-in nodes in front of uibuilder nodes. 1 goes direct, the other goes via the cache.

Cache replays can be triggered automatically when a new client connects by feeding the connect control msg back to the cache input. But you can use any flow to trigger them.

With UIBUILDER, you are also typically sending a lot less data to the connected clients.

And you have highlighted one of the main issues I have with pre-canned dashboards. As your needs mature, you inevitably end up falling off a cliff-face of complexity. And then you are fighting the framework instead of it helping. You go from not needing to know any front-end stuff to suddenly needing to know (a) HTML, (b) CSS, (d) JavaScript, (e) VueJS, (f) Vuetify, (g) D2 caching mechanisms, etc.

In my own view, unless you know for sure that you will never want to go beyond what the Dashboard has already done for you, you are better off starting with the slightly more complex to get going UIBUILDER. Or at least planning for change up-front.

I'm not criticizing D1/D2, just pointing out that each approach has its strengths and weaknesses.

Don't forget, there is a comparison page between UIBUILDER and D2 that I occasionally update and correct as I learn things and as both approaches mature.