# UI\_Builder - Simple Example Flow

**URL:** <https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [4 October 2021 02:44 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818 "2021-10-04T02:44:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheadehAnank](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@TheadehAnank](https://discourse.nodered.org/u/TheadehAnank)\
**Post date:** [4 October 2021 02:44 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/1 "2021-10-04T02:44:49Z")

</div>

In Simple uibuilder flow:  
[https://flows.nodered.org/flow/bbe6803d9daebda5c991336cf4e5e3e0](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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [4 October 2021 20:18 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/2 "2021-10-04T20:18:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheadehAnank](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@TheadehAnank](https://discourse.nodered.org/u/TheadehAnank)\
**Post date:** [4 October 2021 21:21 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/3 "2021-10-04T21:21:46Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 October 2021 08:59 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/4 "2021-10-05T08:59:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [5 October 2021 18:05 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/5 "2021-10-05T18:05:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 October 2021 08:09 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/6 "2021-10-06T08:09:44Z")

</div>

Thanks for letting me know - saves me a job 😀

---

<div class="post-metadata">

**Author:** ![TheadehAnank](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@TheadehAnank](https://discourse.nodered.org/u/TheadehAnank)\
**Post date:** [9 October 2021 19:33 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/7 "2021-10-09T19:33:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 October 2021 21:10 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/8 "2021-10-09T21:10:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 November 2021 21:11 UTC](https://discourse.nodered.org/t/ui-builder-simple-example-flow/51818/9 "2021-11-08T21:11:26Z")

</div>

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