I need a basic example to create an entry form(ui)

[JosephDe]

Hello everybody! Can someone share a template/link in creating a custom entry form. The entry form I have in mind is with a simple textbox, with a submit button and cancel. I will try to modify from there as soon as I understand the basics.

Thanks,
joe

[Steve-Mcl]

• Install dashboard nodes
• drop a ui_form onto the editor
• add some elements
• deploy it
• open the dashboard (crtl+shift+d)
• try it
• look in the debug output.

[JosephDe]

Hi @Steve-Mcl, I'm sorry if I was not clear enough what I need to do, what I'm aiming for is to create customized basic input form.

Regards,
joe

[Steve-Mcl]

@JosephDe

I'm aiming for is to create customized basic input form

You can customise the form with whatever fields you like.

I dont understand?

[JosephDe]

Can I clone the ui_form and modify it to fit my needs, really sorry for the confusion.

[JosephDe]

Earlier today I attempted to clone the ui_form but when typing on the url = 127.0.0.1:1880/ui, I can not make the form display. So I thought I need a simple example to understand how to create it.

[knolleary]

@JosephDe are you wanting to use Node-RED Dashboard as the starting point of your web ui, or do you want to build it from scratch? I ask because you didn't mention it in your question and the ui_form node is part of the Node-RED Dashboard set of nodes.

Node-RED Dashboard will make it much quicker and easier to build - if it fits your needs. The ui_form node lets you build whatever custom form you want through its configuration - no need to clone and modify it unless you want something very different.

But if you are wanting to build a form on a standalone page that doesn't use Node-RED Dashboard, then you'll need to start from scratch. Use a Template node to create the HTML of the page you want - there are lots of guides online for creating a form on a web page. We can then help create the flows that clicking the submit button on the form would trigger.

[Colin]

Another possibility which may, or may not, meet your needs is to use standard dashboard nodes to layout the input fields and then a separate dashboard button and then combine the values from the fields in node-red to give the same effect as a form.
If you were to give an idea of what you are actually trying to achieve we may be able to suggest alternative ways of achieving it.

[JosephDe]

Thank you everyone for taking the time helping me... I really appreciated it. I think what I'm looking for is to build it from scratch. A form with only 3 combo box with values to select and some buttons. Similar with image below.

example output (A,1,4)

[Colin]

Can you not use three ui_dropdown nodes and two buttons for that?

[JosephDe]

@Colin yes it is good enough, but creating my own custom form is my main interest(this will be use to control a device with fix specific values).

[JosephDe]

Thanks everyone for the response I will give it a try to create using ui_dropdown nodes as suggested.

[Colin]

If you want to learn how to create a custom node then first look at the docs on creating nodes and experiment with the techniques there to learn how to create a (non-ui) node. Once you have mastered that to some extent then look at one of the contrib ui nodes such as node-red-contrib-ui-led to see how to create a custom dashboard node. Then you can go on and create your form node. In fact there may be docs on creating custom dashboard nodes, I am not sure.

[TotallyInformation]

I agree with Colin and Nick in that you may wish to start by using the standard template form and a pair of http_in and http_out nodes to build a really simple web form.

That way you will build up your understanding not only of how to build a web page but also how the web server itself works (Node-RED wraps a standard web server called ExpressJS).

If, though, your main aim is to learn how to build data-driven web apps, I would suggest that once you've worked out the basics, you might also want to look at uibuilder which will go further, replacing the http-in/-out nodes and adding a websocket connection for dynamic data exchange. This is similar to Dashboard but without the wonderful handholding that makes creating web interfaces simple. So uibuilder lets you build anything without limits but at the cost of you needing to know more about writing HTML, CSS and JavaScript.

Node-RED provides some fantastic tools with something for most people no matter what you are looking to achieve. All the best in your learning journey.

[JosephDe]

Thank you all for clearing it all up, I will take it a step at a time.

kind regards
joe