UI Builder form

General
1

Hi. I'm new with Node-Red and I'm trying to make a UI using the uibuilder node. The idea is the user gives some parameters, which should be processed in the flow afterwards and then the user could get an answer calculated according to the parameters given. Doing the form itself is not a big deal, but I'm struggling with taking the data submitted from the input fields of the form into the flow, 'cause I really don't know how to do it. Any advice or idea is welcome. Thanks.

2

Hi there, thanks for trying out uibuilder. If you check the uibuilder WIKI, you will find some examples. For instance, this example using MoonJS as a front-end library has a simple input field on it and you could build from there.

Basically, sending data back from the front-end to Node-RED is very simple.

You will need some JavaScript to monitor for changes in your form - standard stuff and will depend on what front-end helper library you are using (if any).

When you detect a change in the form or the user presses a button or whatever trigger you want, you then use the uibuilder.send(<msgObject>) function.

The contents of the msgObject is exactly what you'd expect in Node-RED itself. Typically something including {topic:"my topic", payload:"my payload"} but it doesn't have to be that - whatever you are comfortable processing back in Node-RED will work just fine.

Back in Node-RED, the top output from the uibuilder node will receive the returned data. Note that uibuilder adds a client ID which you need to retain. Process that output and, when you've updated the info, feed it back into the uibuilder input again. The client ID makes sure that the data only ever goes back to the correct client.

3

Hi Julian,

thanks for your reply and your help. I installed MoonJS and, before going on with my own app/example, I tried the example shown in the uibilder WIKI. But when I click on the button in the URL there is no message in the debug output pane, even though the status of the uibilder node is "connected."

4

OK, I'll install it when I get home and make sure something hasn't drifted, maybe with a new version of MoonJS. I've not tried it for a while.

In the meantime, are there any errors in the browser or Node-RED console logs?

5

OK, I tried this example:

With this example flow:

[{"id":"3df82c5e.297e94","type":"uibuilder","z":"d480ffdb.73b02","name":"","topic":"","url":"moon","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"debugFE":true,"copyIndex":true,"x":630,"y":260,"wires":[["47bc9ad3.5d36a4"],["9a76db10.801338"]]},{"id":"2ffb7973.e191d6","type":"inject","z":"d480ffdb.73b02","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":480,"y":260,"wires":[["3df82c5e.297e94"]]},{"id":"47bc9ad3.5d36a4","type":"debug","z":"d480ffdb.73b02","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":830,"y":240,"wires":[]},{"id":"9a76db10.801338","type":"debug","z":"d480ffdb.73b02","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":810,"y":280,"wires":[]},{"id":"47d717a9.c2e4b8","type":"comment","z":"d480ffdb.73b02","name":"uibuilder/MoonJS Test","info":"[Front-End](/moon)\n\nDon't forget to install MoonJS and adjust the\n`settings.js` file.\n\nThen update the `~/.node-red/uibuilder/moon/src` \nfiles:\n\n* `index.html`\n* `index.js`\n* `index.css`\n\nAccording to the MoonJS example(s) in the \n[WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example,-MoonJS-with-Mini.CSS)","x":520,"y":220,"wires":[]}]

And it works fine. I entered some text in the field and the button, when pressed both increments the counter and sends both the counter and the text field to Node-RED:

{"type":"counterBtn","btnCount":3,"message":"fred"}

Also, don't forget to update your settings.js file after installing your front-end library:

    uibuilder: {
        userVendorPackages: ['vue','moonjs'],
        debug: true
    }
}
6

Hi there! I tried again and at first it didn't work, then I checked whether the problem was elsewhere and actually it was, the thing was that MoonJS was improperly installed. Thanks a lot, it works now.

7

Excellent. If you come across any errors or issues you think I could trap so that we make things more robust. Please let me know.