Form node / class

Industrial
1

I need to create a form node to data entry. Something like a database access with a list of records on a table and buttons to add, delete and update. I know it is possible to use the form node in the dashboard, but has very limitations. I have to create a specific node? It is possible to access the code of the form node and then make the necessary modifications?

2

The nodes are all open source and so you are free to create from them.

However, another alternative would be to use a simple uibuilder page with jQuery and one of the several excellent and mature table editor addins for jQuery.

3

Could you indicate a sample, maybe a youtube video.

Thanks

4

https://www.google.com/search?q=youtube+jquery+table+editor

uibuilder has a couple of getting started pages in its tech docs, start here: A first-timers walkthough of using uibuilder (totallyinformation.github.io)

Once you install the uibuilder Node into Node-RED, add a node, give it a url and commit your flow, it creates a new folder for you on the Node-RED server. In there you can edit your browser code or you can do it in the node-red editor in the uibuilder node.

Start with the "blank" template (default) and add a script reference to jQuery <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script> to your index.html file.

Then you can follow along with any of the jQuery tutorials.

To send data, simply connect a node to the uibuilder node - anything you send will appear inside your browser's index.js file if you do:

uibuilder.onChange('msg', (msg) => {
    console.log('NEW MESSAGE', msg)
})

To send data back to node-red, use the uibuilder.send function. The single parameter is the same message format as using inside node-red. E.g. uibuilder.send( { payload: 42, topic: "Life, the Universe and Everything" } )

Once you have the basics sorted, you can install jQuery using uibuilder's Libraries tab and change your script url to use the local version (if you want to, you don't have to). You can then look at using the cache node to send cached data when a client connects/reconnects and doing more complex updates such as single entries for your table rather than sending the whole thing each time.

You can, of course, use alternative front-end frameworks in place of jQuery but I suspect that jQuery has the most mature table editors.

5

Hi,

There are several different examples of CRUD (Create, Read, Update, Delete) UIs created with Node-RED components.

Searching this forum will help you find them.
Criteria I used: "node-red dashboard crud"

https://flows.nodered.org/flow/e32f2b942bce77ef6079c0642b93c036
https://flows.nodered.org/flow/9a57908f031def68946f6bdf4cfb94a4

There are other examples and all are pretty cool.

Cheers,

Paul

6

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