UIBUILDER v6.6 beta progress: NEW built-in web component to display and monitor uibuilder variables

Just pushed some new updates and new features to the v6.6.0 GitHub branch.

The most exciting feature added this time is a new web component. You can add something like <uib-var variable="myvar"></uib-var> to your HTML (or send dynamically from Node-RED of course). If the variable already exists in the uibuilder client, it will display the value. It also watches for changes to that variable and updates the display automatically if the value changes.

This is a web component approach to how front-end frameworks often have something like {{myvar}} as a shortcut for the same purpose.

There is nothing to load and it not only works in HTML but also when sending Markdown. (You can send Markdown to a uibuilder front-end if you have loaded the optional Markdown-IT 3rd-party library).

It also has some additional attributes that adjust the display and add a capability to send a message to Node-RED automatically if the value changes.

It uses uibuilder's built-in managed variable capability. Be sure to make changes to the variable by using uibuilder.set('myvar', myval) in front-end code, or send a message from node red containing data like this: { "command": "set", "prop":"myval","value":"42"}.

Other Changes

  • Can't remember if I previously said that the showMessages feature has some improvements, notably that there are some icon buttons that appear on hover. They add close and copy-to-clipboard buttons.
  • There are quite a few documentation enhancements this time round as well.

As always, check the changelog for more details. You can install this beta from GitHub if you want to play along. Some folk doing testing would be nice. :wink:


Next up on the schedule are features to:

  • Find out if a particular front-end library is installed - will be used internally for things like no-code chart elements so that the chart library can be auto-loaded either locally or from a CDN. Will also be used to add validation checks when installing a template.
  • A runtime function/API to list all current uibuilder url's. Will be used to provide a menu element for front-end use.
  • A runtime function/API to list all of the live actual html pages for a uibuilder instance. Again, will be used to provide a menu element.
  • runtime function/API to combine both of the above for a mega-menu.

Lots of other things on the roadmap of course but I'm trying (really I am!) to limit what goes into v6.6 so that I can get it into everyone's hands

3 Likes

Awesome! Very useful function.

2 Likes