After reading the new dashboard topic I decided to try out the uibuilder to see what all the fuss was about. After loading a dozen examples I got none of them to work, not a single one. So I have decided to see if someone will hand hold me through getting at least one of them to work. Let's pick the…

You first need to specify an endpoint url in the uibuilder node. then point your browser to the same ip/path.

I can see the page, and I see the message back from the page in your example, but I don't see where the inject node info winds up. Looking at the .js file it seems to me the msg.payload from the inject node should come up in the button text?

[image] shel: Still getting this message in the debug. Please share both your flow and a listing of /home/pi/.node-red/uibuilder/uibuilder I think you have deleted something you shouldn't have. [image] shel: Think I got all your questions. You didn't answer whether you had tried the b…

[image] hotNipi: Why not take a leadership of such educational route. [image] shel: I'd like to second @hotNipi and the walk through. OK, I'll create something - But I want suggestions about what what you think something practical is please. [image] shel: But for the most part I h…

[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank…

Just went into the examples and there was one labeled "simple" which I did load, and although the page did come up there was no "quote" on the page. However, I'd like to slog through the current flow and see if I can get the inject to work. [EDIT] What I was really wanting to see was info going to …

Even without deploying your imported code, I couldn't get the error you did. Though I did get something not terribly different: [image] I will fix that so that you cannot try to edit anything until you have deployed for the first time. Please use my walkthrough above and see what you get. [im…

Loaded the vue example and see info going to the page but what I really would like to see is an example of a page with a button or whatever that I can send info to the page and info back to node red so I can dissect what is happening and hopefully be able to recreate that into something useful for m…

[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank…

That is EXACTLY what the Vue example page does. Click the button and, assuming that you have connected an output debug node, you will see the data coming back from your front-end. That was the whole purpose of that template - indeed, for quite a while, that was the default template but quite a few p…

Node-RED

Node-RED Forum

Uibuilder example

General

TotallyInformation 24 September 2021 16:11 29

Please see the first part of a walkthrough in this thread:

Topic		Replies	Views
Uibuilder: Getting Started Walkthrough FAQs uibuilder	24	5955	11 April 2022
Uibuilder documentation suggestions and improvements General uibuilder	38	793	18 February 2023
Ui builder how to? Dashboard	1	2365	27 November 2020
Ui_builder how-to for new bees Dashboard	10	587	29 April 2021
🌟 It's here! uibuilder v6.1.0. Coming of age - uibuilder grows up Share Your Nodes uibuilder	2	891	8 June 2023

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Uibuilder example

Related topics