🌐 UIBUILDER new release: 7.4.1 - Bug fixes and some small new features

Share Your Nodes
1

You can thank @smanjunath211 for having a bonus release so soon after v7.3.0. :smiley: They were kind enough to highlight a hidden bug in the uib-cache node which is now fixed. Thanks also go to Callum Macdonald for a PR fixing a typo in the documentation.

The main user-facing feature is that, when passing a message to the front-end targetting an html element using uibuilder's uib-topic custom attribute, not only can you update the text/html content and the attributes of the element but now also the dataset.

There are some updated "Creating UI's" documents as well.

Other than that, many of the updates in this release relate to diagnostics with a new front-end variable that lets you know what Socket.IO transport you are using and a new machine-readable diagnostics admin API for those rare occasions when things go awry and need some additional digging.

uibuilder client library

  • New variable uibuilder.get('currentTransport')

    Will either be websocket or polling. This is set when the connection is established and may change if the connection is lost and re-established. Should generally be websocket after a few ms. If still set to polling, then either there are network issues or there is a poorly configured proxy server in the way. If you are using a proxy server, it should be configured to allow WebSocket connections. Even with polling, the connection should still work but it will be slower and less efficient.

    A console error message will be logged if the transport is not websocket after a few seconds.

  • When using the custom HTML attribute uib-topic: msg.dataset is now processed along with msg.attributes and msg.payload. msg.dataset must be an object, each key becomes a data-* attribute on the element.

uib-cache node

  • FIXED Setting the "# messages" to zero should have retained unlimited messages for each "Cache by" property. It wasn't working correctly. Now fixed. Many thanks to Manjunath Satyamurthy in the Node-RED Forum for reporting this issue.

uib-brand.css front-end styles

  • Amended .status-grid class to use 3 variables: --status-grid-min, --status-grid-max, and --status-grid-gap. This allows the grid to be more flexible and responsive. The default values have not changed but you can now override them in your own CSS.

Documentation

  • Creating UIs:
    • Grid Layouts - Now a more complete article on how to create responsive, content-heavy grid layouts.
    • CSS Best Practice - Some simple guidelines and good practices for creating flexible layouts using CSS.
    • Charts - A new article on how to create charts using the uibuilder client library. This is a work in progress and will be updated as more information becomes available.
    • Form Handling - A new article on how to handle user input using forms and other input elements. This is a work in progress and will be updated as more information becomes available.
    • Creating Web Apps - How to create data-driven web applications using UIBUILDER. Article updated.
    • Several other articles are still awaiting content. Lists, Maps, Tables, Dashboard Layouts, Cards, Articles.

Node-RED Admin endpoints

  • <nrAdminURL>/uibuilder/uibindex?type=diagnostics is a new variation on the uibindex endpoint. It returns diagnostics information in JSON format that shows uibuilder detailed diagnostic information. You must have an active Node-RED Editor session to be able to access this endpoint.

[!WARNING]
Please take care with the use of this endpoint as it contains sensitive information about your uibuilder instances.

Server library: admin-api-v2.js

  • FIX /uibindex route incorrectly assumed the presence of req.headers.referer.
  • NEW /uibindex?type=diagnostics added. Returns diagnostics information in JSON format that shows uibuilder detailed diagnostic information. You must have an active Node-RED Editor session to be able to access this endpoint.
  • Switched from passing the uib master variable to use the uibGlobalConfig module. This is a step towards a more modular codebase.

Devlopment processes

  • Rebuilt the gump build process for the front end client library. Now simplified and more robust.
2 Likes
2

Think that might be a mid-tagging I don’t remember fixing any of your docs! Unless I’m making PRs in my sleep :wink:

3

Oops! No, you are correct, it was actually Callum Macdonald! I will correct. Though you are, of course, welcome to submit one - or many! :blush: