Skip to content

Major template updates, new documentation.

Latest
Latest
Compare
Choose a tag to compare
@TotallyInformation TotallyInformation released this 27 May 19:19
· 4 commits to main since this release
v7.3.0
37c6dc0
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

📌 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.
Assets 2
Loading