UI_Builder - Simple Example Flow

Dashboard
1

In Simple uibuilder flow:
https://flows.nodered.org/flow/bbe6803d9daebda5c991336cf4e5e3e0

Where is the HTML in the comment actually referenced in the flow? The HTML in the uib_simple isn't the same as whats in the comment. I don't see that Comment HTML under the folder uib_simple\src either.

2

The HTML comment and the uibuilder HTML are slightly different but they both give much the same result. I imagine that the uibuilder HTML has been updated and the comment has not

1 Like
3

I just completely misunderstood that the index.html, js, css has to be copied into ui_builder (that it wasn't included in the flow when imported.)

1 Like
4

I'm actually not sure that example still works because it used an external API which seems to have disappeared (unless it has come back again?).

I need to find another example.

Also, that flow was generated with an older version of uibuilder. With newer versions, anyone can now create and provide templates for uibuilder. The templates contain all of the front-end code and settings whereas the flow contains the Node-RED (back-end or server) conde and settings.

5

It worked for me yesterday, both default and comment html entries

1 Like
6

Thanks for letting me know - saves me a job :grinning:

7

I had to copy the HTML in the comment node to uibuilder. UIBuilder had the default html

8

Yes, that is correct. The html, css and js files are not part of Node-RED's flow, that is how uibuilder is designed. By keeping the files separate from the flow, you can use standard web development tools to manage your front-end code. This has a lot of benefits.

But it does mean that the examples require not only the flow to be imported but the front-end files to be edited. In the library and WIKI examples, I've generally put the custom code into comment nodes with a clear instruction that the contents have to be copied into the appropriate file.

From newer versions of uibuilder, it is now possible to have complete templates with all the files and folders needed in place. But not currently a flow, that is the subject of a future upgrade now that pluggable libraries are available in Node-RED. So eventually we will be able to have complete examples with both the flow and the template but at present that isn't possible.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.