Text input + Button

Dashboard
1

Hello , I want to take user input through text box and then write this data in the file using button. .So basically after taking user input , i store it in the function node What i want to do is , after clicking the button the data should get stored in the file. I am able to write the data in the file without using the button.I have added the button in the flow but when i click the button i get d7360f0c.781c2 in the file. I don't know why is this happening . Am i missing something in the flow ? Please let me know.

I have also read some solutions related to this issue on this forum but i couldn't find proper solution. The link i have referred : Send value of input text when click on button.

My Flow:

[{"id":"224894f3.ecbecc","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"ea233531.023898","type":"function","z":"224894f3.ecbecc","name":"take data","func":"//var d = new Date();\n//var t = d.getTime();\ncontext.data = context.data || {}\nvar data = context.data.task1 \n// context.data.task1 = parseInt(msg.payload);\ncontext.data.task1 = String(msg.payload);\n//payload = {\"time\":t,\"payload\":msg.payload,\"topic\":msg.topic};\n//msg.payload = payload;\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":400,"wires":[["4e640aac.7ba404","c8f82b90.a25518","ec646cd8.2e673"]]},{"id":"4e640aac.7ba404","type":"json","z":"224894f3.ecbecc","name":"","property":"payload","action":"str","pretty":false,"x":430,"y":280,"wires":[["485cefd8.eea7f"]]},{"id":"485cefd8.eea7f","type":"file","z":"224894f3.ecbecc","name":"","filename":"C:\\Users\\vishakha\\Desktop\\Node Red\\hi","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":680,"y":360,"wires":[[]]},{"id":"4891629e.0a785c","type":"ui_text_input","z":"224894f3.ecbecc","name":"Enter Product Key ","label":"Product Key","tooltip":"","group":"f1a2366f.a829f8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"task1","x":130,"y":180,"wires":[["ea233531.023898"]]},{"id":"c8f82b90.a25518","type":"ui_button","z":"224894f3.ecbecc","name":"","group":"f1a2366f.a829f8","order":2,"width":0,"height":0,"passthru":false,"label":"Enter ","tooltip":"","color":"","bgcolor":"Red","icon":"","payload":"msg","payloadType":"str","topic":"","x":450,"y":500,"wires":[[]]},{"id":"ec646cd8.2e673","type":"debug","z":"224894f3.ecbecc","name":"Take Data","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":410,"y":580,"wires":[]},{"id":"f1a2366f.a829f8","type":"ui_group","z":"","name":"Enter Product Key ","tab":"3e42440f.5b487c","disp":true,"width":"6","collapse":false},{"id":"3e42440f.5b487c","type":"ui_tab","z":"","name":"Relay Board Page 1","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
2

Unfortunately, your flow can't be imported as the forum software merges some of the characters. To get around that, please post your flow again following the instructions in the following post: How to share code or flow json

1 Like
3

Ohh okay , thanks. I will send it again . Actually i am new to this platform.

4 
[{"id":"224894f3.ecbecc","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"ea233531.023898","type":"function","z":"224894f3.ecbecc","name":"take data","func":"//var d = new Date();\n//var t = d.getTime();\ncontext.data = context.data || {}\nvar data = context.data.task1 \n// context.data.task1 = parseInt(msg.payload);\ncontext.data.task1 = String(msg.payload);\n//payload = {\"time\":t,\"payload\":msg.payload,\"topic\":msg.topic};\n//msg.payload = payload;\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":400,"wires":[["4e640aac.7ba404","c8f82b90.a25518","ec646cd8.2e673"]]},{"id":"4e640aac.7ba404","type":"json","z":"224894f3.ecbecc","name":"","property":"payload","action":"str","pretty":false,"x":430,"y":280,"wires":[["485cefd8.eea7f"]]},{"id":"485cefd8.eea7f","type":"file","z":"224894f3.ecbecc","name":"","filename":"C:\\Users\\vishakha\\Desktop\\Node Red\\hi","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":680,"y":360,"wires":[[]]},{"id":"4891629e.0a785c","type":"ui_text_input","z":"224894f3.ecbecc","name":"Enter Product Key ","label":"Product Key","tooltip":"","group":"f1a2366f.a829f8","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"task1","x":130,"y":180,"wires":[["ea233531.023898"]]},{"id":"c8f82b90.a25518","type":"ui_button","z":"224894f3.ecbecc","name":"","group":"f1a2366f.a829f8","order":2,"width":0,"height":0,"passthru":false,"label":"Enter ","tooltip":"","color":"","bgcolor":"Red","icon":"","payload":"msg","payloadType":"str","topic":"","x":450,"y":500,"wires":[[]]},{"id":"ec646cd8.2e673","type":"debug","z":"224894f3.ecbecc","name":"Take Data","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":410,"y":580,"wires":[]},{"id":"f1a2366f.a829f8","type":"ui_group","z":"","name":"Enter Product Key ","tab":"3e42440f.5b487c","disp":true,"width":"6","collapse":false},{"id":"3e42440f.5b487c","type":"ui_tab","z":"","name":"Relay Board Page 1","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
1 Like
5

Couple things I'm seeing.
In your function node you have

context.data = context.data || {}
var data = context.data.task1

This is going to give an error on the first run when the context.data is empty or rather an empty object. Meaning there will be no property task1.
Below that you set context.data.task1 to String(msg.payload);. The variable data is not used below. It was used in debugging code that is commented out. Then you return msg, so the msg that is passed from the product key node is still like that. That message is then forwarded to your JSON node so it's creating a JSON string from it. That is then appended to your file.

The Button on your dashboard is not doing anything. Clicking it will output a message with payload "msg" as it is set to, but since there are no wires going out nothing will happen.

The actual Product Key text input is set to send out the all the text in the field when pressing enter or tab, with the topic set to task1, and the payload set to the text value in the field.

Have you checked the context tab in Node-RED to see what is stored?
Furthermore I would advise you to go back to the link you shared in your opening post, and check the nodes in the image there. Those are change nodes, and your flow would improve if you were to use those. If you follow the image of that flow you should get the answer.

1 Like
6

Hello , thanks for your reply but i am not able to do it. I am damn confused. I also found posts about change node, q node , switch node. As you said refer the link which i had sent , i referred it .I have also referred the cook book .But couldn't find the exact solution.
Regarding this:
context.data = context.data || {}
var data = context.data.task1
I understood my mistake.

Now to store the data i found this flow :

[{"id":"ea31912b.28d0f","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"880eac89.16813","type":"ui_button","z":"ea31912b.28d0f","name":"","group":"da5ab001.cbe88","order":32,"width":0,"height":0,"passthru":false,"label":"save","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"save","x":210,"y":260,"wires":[["edd11e33.d38fe"]]},{"id":"7c3f783c.84a9c8","type":"ui_text_input","z":"ea31912b.28d0f","name":"","label":"text","tooltip":"","group":"da5ab001.cbe88","order":31,"width":0,"height":0,"passthru":false,"mode":"text","delay":"0","topic":"text","x":210,"y":180,"wires":[["edd11e33.d38fe"]]},{"id":"edd11e33.d38fe","type":"function","z":"ea31912b.28d0f","name":"text","func":"var data = context.get(\"data\") || 0;\n\nif(msg.topic === \"text\"){\n    data = msg.payload;\n    context.set(\"data\",data);\n}\nif(msg.topic === \"save\"){\n    msg.payload = data;\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":470,"y":240,"wires":[["761139d0.881cd8"]]},{"id":"761139d0.881cd8","type":"debug","z":"ea31912b.28d0f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":640,"y":240,"wires":[]},{"id":"da5ab001.cbe88","type":"ui_group","z":"","name":"Meniu Principal","tab":"a7edec63.9982f","order":1,"disp":false,"width":"12","collapse":false},{"id":"a7edec63.9982f","type":"ui_tab","z":"","name":"USV","icon":"dashboard","order":1}]

when i write the text in text box it gets printed on debug window without even clicking the button .Why is this happening? Please help me!
If possible ,could you please send me the flow?
Thanks!

7 
var data = context.get("data") || 0;

if(msg.topic === "text"){
    data = msg.payload;
    context.set("data",data);
    //if no output is needed while writting, stop the flow right here
    return
}
if(msg.topic === "save"){
    msg.payload = data;
}

return msg;
2 Likes
8

Hello Sir , Thanks a lot for the solution . It's working!!:grinning::grinning:
But what if i have multiple inputs (text boxes) + button ? will it be same?
Thanks
:smile:

9

Best thing to do is to try it out. :slight_smile:
And if things go wrong, you'll need to share a bit of the flow because of right now your question is a bit not that clear to give strong answer.

1 Like
10

Yes now I am working on it!!
Actually i want to take multiple user inputs , and when i click a submit button the entered data should get stored in a file. Like i want to make a simple form which contains name, Address , Phone No., Country etc. and the submit button.

11

There is built in image node to cover this kind of needs.
But of course you can create your own solution. :slight_smile:

1 Like
12

Hello Vishaka,
If you have completed the project of taking multiple user input + button and storing in the file, could you please share the flow?

I am also working on a similar concept and it would be of great help.

13

hi abhishek.
what problem you are facing ?

14

The problem got solved.

You can view the discussion here:

Thanks for help !

15

@Vishakha Hi. Could you share you flow after fixing it? I’m doing something like this. Thanks