How to setup a multi-input form to register an Item

Hi everyone, I'm rather new to Node-RED and I want to setup a page for me to key in details to reserve an item into a database.

What I had in mind was to key in the values through numbers of ui_text_input and ui_dropdown and have those value sent out through the ui_button. I've tried to refer to the following link: How to work with text input - #4 by Steve-Mcl but from what I've tried so far, it would only work with 1 input. I've tried using the join node and it doesn't lock the button if I leave it empty.

As for storing it into the database, I had an idea on how it worked, just need to solve this issue first and I'll see if I came across any other issues.

Many thanks in advance for your help.

[{"id":"e5e03e58.27ca4","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"63cf0874.749838","type":"ui_text_input","z":"e5e03e58.27ca4","name":"","label":"Product ID","tooltip":"","group":"bbfef042.d705a8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"ProductID","topicType":"str","x":110,"y":120,"wires":[["72d7f269.7a04fc"]]},{"id":"2df5a02f.fefba8","type":"ui_text_input","z":"e5e03e58.27ca4","name":"","label":"Description","tooltip":"","group":"bbfef042.d705a8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"ProductDescription","topicType":"str","x":110,"y":160,"wires":[["72d7f269.7a04fc"]]},{"id":"72d7f269.7a04fc","type":"join","z":"e5e03e58.27ca4","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":270,"y":140,"wires":[["3c4d0b13.1e4e5c","b2f87f4.7e35b8"]]},{"id":"3c4d0b13.1e4e5c","type":"debug","z":"e5e03e58.27ca4","name":"Form Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":430,"y":180,"wires":[]},{"id":"b2f87f4.7e35b8","type":"function","z":"e5e03e58.27ca4","name":"","func":"flow.set(\"Product\", msg.payload);\n\nvar msg1 = msg.payload.ProductID;\nvar msg2 = msg.payload.ProductDescription;\n\nif((msg1.length > 0) && (msg2.length > 0))\n{\n    return{payload: msg.enabled}\n}\nelse\n{\n    return{payload: msg.disabled}\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":140,"wires":[["453daf83.734f3","b0c78919.e89b2"]]},{"id":"453daf83.734f3","type":"ui_button","z":"e5e03e58.27ca4","name":"","group":"bbfef042.d705a8","order":2,"width":0,"height":0,"passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Product","payloadType":"flow","topic":"","topicType":"str","x":580,"y":140,"wires":[["713c95a7.6aca74","ea846853.b80b58"]]},{"id":"713c95a7.6aca74","type":"debug","z":"e5e03e58.27ca4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":140,"wires":[]},{"id":"ea846853.b80b58","type":"function","z":"e5e03e58.27ca4","name":"","func":"msg.payload +=  \" was added\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":180,"wires":[["6e1c2f26.a12c48","ac7b176d.570d58"]]},{"id":"6e1c2f26.a12c48","type":"ui_text","z":"e5e03e58.27ca4","group":"bbfef042.d705a8","order":3,"width":0,"height":0,"name":"","label":"Result:","format":"{{msg.payload}}","layout":"row-left","x":900,"y":180,"wires":[]},{"id":"ac7b176d.570d58","type":"debug","z":"e5e03e58.27ca4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":910,"y":220,"wires":[]},{"id":"b0c78919.e89b2","type":"debug","z":"e5e03e58.27ca4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":180,"wires":[]},{"id":"bbfef042.d705a8","type":"ui_group","name":"Product Registration Page","tab":"b7cd9db9.62a19","order":1,"disp":false,"width":"6","collapse":false},{"id":"b7cd9db9.62a19","type":"ui_tab","name":"Product Registration Page","icon":"dashboard","disabled":false,"hidden":false}]

Hi, you have changed the flow around but not understood the requirement to enable to disable a UI button.

Here is a working version - check out the return { enabled: true } and return { enabled: false } statements compared to what you had.

[{"id":"63cf0874.749838","type":"ui_text_input","z":"e5e03e58.27ca4","name":"","label":"Product ID","tooltip":"","group":"bbfef042.d705a8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"ProductID","topicType":"str","x":110,"y":120,"wires":[["72d7f269.7a04fc"]]},{"id":"2df5a02f.fefba8","type":"ui_text_input","z":"e5e03e58.27ca4","name":"","label":"Description","tooltip":"","group":"bbfef042.d705a8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"ProductDescription","topicType":"str","x":110,"y":160,"wires":[["72d7f269.7a04fc"]]},{"id":"72d7f269.7a04fc","type":"join","z":"e5e03e58.27ca4","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":270,"y":140,"wires":[["3c4d0b13.1e4e5c","b2f87f4.7e35b8"]]},{"id":"3c4d0b13.1e4e5c","type":"debug","z":"e5e03e58.27ca4","name":"Form Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":430,"y":180,"wires":[]},{"id":"b2f87f4.7e35b8","type":"function","z":"e5e03e58.27ca4","name":"","func":"flow.set(\"input_data\", msg.payload);\n\nconst pId = msg.payload.ProductID;\nconst pDesc = msg.payload.ProductDescription;\n\nif((pId.length > 0) && (pDesc.length > 0)) {\n    return { enabled: true }\n} else {\n    return { enabled: false }\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":140,"wires":[["453daf83.734f3","b0c78919.e89b2"]]},{"id":"453daf83.734f3","type":"ui_button","z":"e5e03e58.27ca4","name":"","group":"bbfef042.d705a8","order":2,"width":0,"height":0,"passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"input_data","payloadType":"flow","topic":"","topicType":"str","x":580,"y":140,"wires":[["713c95a7.6aca74","ea846853.b80b58"]]},{"id":"713c95a7.6aca74","type":"debug","z":"e5e03e58.27ca4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":140,"wires":[]},{"id":"ea846853.b80b58","type":"function","z":"e5e03e58.27ca4","name":"","func":"msg.payload = \"You entered: \" + JSON.stringify(msg.payload) \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":180,"wires":[["6e1c2f26.a12c48","ac7b176d.570d58"]]},{"id":"6e1c2f26.a12c48","type":"ui_text","z":"e5e03e58.27ca4","group":"bbfef042.d705a8","order":3,"width":0,"height":0,"name":"","label":"Result:","format":"{{msg.payload}}","layout":"row-left","x":900,"y":180,"wires":[]},{"id":"ac7b176d.570d58","type":"debug","z":"e5e03e58.27ca4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":910,"y":220,"wires":[]},{"id":"b0c78919.e89b2","type":"debug","z":"e5e03e58.27ca4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":180,"wires":[]},{"id":"f1cea62213cf92f2","type":"inject","z":"e5e03e58.27ca4","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":" { }","payloadType":"json","x":410,"y":80,"wires":[["b2f87f4.7e35b8"]]},{"id":"bbfef042.d705a8","type":"ui_group","name":"Product Registration Page","tab":"b7cd9db9.62a19","order":1,"disp":false,"width":"6","collapse":false},{"id":"b7cd9db9.62a19","type":"ui_tab","name":"Product Registration Page","icon":"dashboard","disabled":false,"hidden":false}]
1 Like

Hi Steve, thank you so much for the solution. Maybe I've should look up in detail on how to enable and disable the button earlier.

1 Like

Sorry to disturb again, I've just added a ui_dropdown node so that I can specify the type of item. However, after adding the ui_dropdown, some errors just popped out.

This error pop out when I'm filling in the form:
'Message missing key property 'msg.topic' - cannot add to object'

I've looked through the other page for reference on how I should configure my ui_dropdown: How to retrieve data from ui dropdown on button click still can't seem to get it working as intended.

Once again, thanks in advance for your help.

[{"id":"c056ff85.ab10e8","type":"tab","label":"To Import/Export","disabled":false,"info":""},{"id":"c278c4e1.5828c8","type":"ui_text_input","z":"c056ff85.ab10e8","name":"","label":"Product ID","tooltip":"","group":"bbfef042.d705a8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"","topicType":"str","x":150,"y":340,"wires":[["bdcfa7af.8f2728"]]},{"id":"11fb03fd.ee0ea4","type":"ui_text_input","z":"c056ff85.ab10e8","name":"","label":"Description","tooltip":"","group":"bbfef042.d705a8","order":2,"width":0,"height":0,"passthru":true,"mode":"text","delay":"100","topic":"","topicType":"str","x":150,"y":380,"wires":[["bdcfa7af.8f2728"]]},{"id":"bdcfa7af.8f2728","type":"join","z":"c056ff85.ab10e8","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":310,"y":340,"wires":[["aa24adcf.e648e","c3928fc2.718d28"]]},{"id":"aa24adcf.e648e","type":"debug","z":"c056ff85.ab10e8","name":"Form Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":450,"y":380,"wires":[]},{"id":"c3928fc2.718d28","type":"function","z":"c056ff85.ab10e8","name":"","func":"flow.set(\"Product\", msg.payload);\n\nconst pID = msg.payload.ProductID;\nconst pDesc = msg.payload.ProductDescription;\nconst pType = msg.payload.ProductType;\n\nif((pID.length > 0) && (pDesc.length > 0) && (pType.length > 0))\n{\n    return {enabled: true}\n}\nelse\n{\n    return {enabled: false}\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":340,"wires":[["2dff21fd.2c309e","d4b2b888.af3f18"]]},{"id":"2dff21fd.2c309e","type":"ui_button","z":"c056ff85.ab10e8","name":"","group":"bbfef042.d705a8","order":4,"width":0,"height":0,"passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Product","payloadType":"flow","topic":"","topicType":"str","x":580,"y":340,"wires":[["4b8c8f98.192bd","29f4a7d7.407b58"]]},{"id":"4b8c8f98.192bd","type":"debug","z":"c056ff85.ab10e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":730,"y":380,"wires":[]},{"id":"29f4a7d7.407b58","type":"function","z":"c056ff85.ab10e8","name":"","func":"msg.payload = msg.payload.ProductID;\nmsg.payload +=  \" was added\"\nflow.set(\"Product\",{});\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":720,"y":340,"wires":[["bf9475ac.d52a4","a9b9da88.3527f8"]]},{"id":"bf9475ac.d52a4","type":"ui_text","z":"c056ff85.ab10e8","group":"bbfef042.d705a8","order":5,"width":0,"height":0,"name":"","label":"Result:","format":"{{msg.payload}}","layout":"row-left","x":860,"y":340,"wires":[]},{"id":"a9b9da88.3527f8","type":"debug","z":"c056ff85.ab10e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":870,"y":420,"wires":[]},{"id":"d4b2b888.af3f18","type":"debug","z":"c056ff85.ab10e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":420,"wires":[]},{"id":"6ee2e75d.9137f","type":"ui_dropdown","z":"c056ff85.ab10e8","name":"","label":"Type of Product","tooltip":"","place":"Select a Product Type","group":"bbfef042.d705a8","order":3,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Nails","value":"Nails","type":"str"},{"label":"Screws","value":"Screws","type":"str"},{"label":"Plate","value":"Plate","type":"str"},{"label":"Rod","value":"Rod","type":"str"}],"payload":"","topic":"","topicType":"str","x":160,"y":420,"wires":[["bdcfa7af.8f2728"]]},{"id":"bbfef042.d705a8","type":"ui_group","name":"Product Registration Page","tab":"b7cd9db9.62a19","order":1,"disp":false,"width":"6","collapse":false},{"id":"b7cd9db9.62a19","type":"ui_tab","name":"Product Registration Page","icon":"dashboard","disabled":false,"hidden":false}]

That's probably coming from the join node. Join needs a topic to join values.

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