Uibuilder: Getting Started Walkthrough

[rko]

@Mick

No nodes would double click and open the tab.

This seems to be a bug (happened a few times to me in 2.0.6). Will take a closer look the next time it occurs.

As for the walkthrough, thank you @TotallyInformation. We will try to use the uibuilder on our next project, which hopefully starts next week

[TotallyInformation]

@Mick

red.min.js:16 TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at populateTemplateDropdown (<anonymous>:698:16)
    at Object.oneditprepare (<anonymous>:947:13)

If you do get that again, could you click on the link and report the code lines it points to?

I think that it is reporting that it can't access the Node-RED settings (RED.settings. THe populateTemplateDropdown accesses RED.settings.uibuilderTemplates which is a property passed back from the .js file via the options to RED.nodes.registerType.

I can't see anything else that might go wrong in that function as it is mostly jQuery.

---

I've put in a test for the next release in the populateTemplateDropdown function so that it outputs a suitable error if the setttings aren't accessible.

[thebaldgeek]

@infinitesettings4

Main issue was that in the advanced template settings I had to change from src to dist.

Just a heads up for beginners following this guide to try and get started with uibuilder, when I made this change, it broke the page totally. I had to walk it back to get the vue template working again.

[TotallyInformation]

Are you using vNext or v4?

If using v4, you have to restart Node-RED to switch between src and dist. vNext (v5 as it will become) allows you to switch dynamically.

Either way though, you are responsible for putting something useful into the dist folder before use.

[TotallyInformation]

Please don't forget that the uibuilder documentation now includes a number of useful documents. Including the live version of the starter walkthrough.

• Using uibuilder
  • A first-timers walkthough of using uibuilder - the updated version of this thread
  • Creating data-driven web apps
  • Configuring uibuilder nodes
  • Configuring uibuilder
  • Changing the root folder (uibRoot)
  • uibuilder messages
  • How & why to use the sender node
  • How to use the cache node
  • How to use instance API's
• Developing UI's
  • The uibuilderfe library
  • Creating Templates
  • Browser auto-refresh
  • Avoiding a build step
  • Optimise & transpile (build)
  • Snowpack as build tool
• UI Frameworks
  • VueJS complexities
  • VueJS components
  • Svelte
• Security
  • Securing uib web apps
  • Securing Data
  • Securing apps using NGINX

The documentation is available online (as above) but also from within the Node-RED Editor by clicking on the "Tech Docs" button in any uibuilder node.

Want more? Let me know!

Want to correct something? Let me know.