How to combine text input node with button node

#1

How can I have a text input where the user enters a value (possibly with a preceding Inject to set the default value), and a button node, that when clicked, takes the value of the text input and sends it out.
Just chaining a text input to a button node doesn't work as the button node will overwrite the msg.payload. I guess I am looking for a button that interrupts the flow until the button is pressed. So it doesn't change the msg object, it just waits with outputting whatever came in until the button is clicked.

#2

Hello !

If the question is always open, you can do as above :

and the associated flow:

[{"id":"4ec0caef.1d59ac","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a444821b.ba15c8","type":"ui_text_input","z":"4ec0caef.1d59ac","name":"1","label":"1 : ","tooltip":"","group":"9b65de7c.212788","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"0","topic":"1","x":321,"y":161,"wires":[["61a8669.9179598"]]},{"id":"a73fc64c.d6551","type":"ui_button","z":"4ec0caef.1d59ac","name":"","group":"9b65de7c.212788","order":1,"width":"3","height":"1","passthru":false,"label":"Save","tooltip":"","color":"","bgcolor":"","icon":"","payload":"false","payloadType":"bool","topic":"","x":319,"y":218,"wires":[["61a8669.9179598"]]},{"id":"61a8669.9179598","type":"function","z":"4ec0caef.1d59ac","name":"analyze message","func":"\n\n// initialize variable as "" if it don't exist\nvar station1 = context.get('station1')||"";\n\nif (msg.topic==="1") {\n station1=msg.payload\n}\n\n// store the value back\ncontext.set('station1',station1);\n\n\nif (msg.payload===false) {\n msg.payload=context.get('station1');\n return msg;\n} \n\n \n","outputs":1,"noerr":0,"x":515.5,"y":218,"wires":[["f26ba179.aaa478"]]},{"id":"65c46ea7.2fbe9","type":"inject","z":"4ec0caef.1d59ac","name":"","topic":"","payload":"Default text","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":185.5,"y":160,"wires":[["a444821b.ba15c8"]]},{"id":"f26ba179.aaa478","type":"debug","z":"4ec0caef.1d59ac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":705.5,"y":218,"wires":},{"id":"9b65de7c.212788","type":"ui_group","z":"","name":"Save text","tab":"b0f1363e.50c5c8","disp":true,"width":"6","collapse":false},{"id":"b0f1363e.50c5c8","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

bye

#3

Hi your solution won't work for other users as the forum will change some parts of the code.

Always put code between three ticks
```
my code here
```

#4

I'm sure that @Grizzly's flow would work, but you could also try this:

[{"id":"7fc6f8d9.8a57c","type":"q-gate","z":"1840f36c.5e3cc5","name":"","controlTopic":"control","defaultState":"queueing","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","queueCmd":"queue","defaultCmd":"default","triggerCmd":"trigger","flushCmd":"flush","resetCmd":"reset","maxQueueLength":"1","keepNewest":true,"x":510,"y":120,"wires":[["ecf16095.5a10b"]]},{"id":"d59a26f1.30f738","type":"inject","z":"1840f36c.5e3cc5","name":"","topic":"","payload":"default text","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":180,"y":120,"wires":[["bd6db65b.de98e"]]},{"id":"bd6db65b.de98e","type":"ui_text_input","z":"1840f36c.5e3cc5","name":"Text","label":"input","tooltip":"","group":"c925f0a1.c2066","order":1,"width":0,"height":0,"passthru":true,"mode":"text","delay":"300","topic":"","x":350,"y":120,"wires":[["7fc6f8d9.8a57c"]]},{"id":"ecf16095.5a10b","type":"debug","z":"1840f36c.5e3cc5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":670,"y":120,"wires":[]},{"id":"c3211e88.698d08","type":"ui_button","z":"1840f36c.5e3cc5","name":"","group":"c925f0a1.c2066","order":2,"width":0,"height":0,"passthru":true,"label":"Save","tooltip":"","color":"","bgcolor":"","icon":"","payload":"trigger","payloadType":"str","topic":"control","x":350,"y":160,"wires":[["7fc6f8d9.8a57c"]]},{"id":"8760e8be.395cd","type":"inject","z":"1840f36c.5e3cc5","name":"","topic":"control","payload":"trigger","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":160,"wires":[["c3211e88.698d08"]]},{"id":"40b2d424.4b1ecc","type":"inject","z":"1840f36c.5e3cc5","name":"","topic":"","payload":"hello world","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":80,"wires":[["bd6db65b.de98e"]]},{"id":"c925f0a1.c2066","type":"ui_group","name":"Group 1","tab":"f1dc1ca1.c1457","order":1,"disp":true,"width":6},{"id":"f1dc1ca1.c1457","type":"ui_tab","z":"","name":"Text-Button","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

The node labelled q-gate is node-red-contrib-queue-gate, and it should do the job without any coding.

#5

What does the q-gate node do that the change node and a flow variable couldn't?

E.g...

  • Text node --> change node (copy msg.payload to flow.text)
  • Button node --> change node (copy flow.text to msg.payload) --> debug node
#6

In this case, not a lot. Only that you can deploy as many instances as you want without having to edit each one to define a unique flow variable. If you check the README, you'll see that in general the node has a fair bit of flexibility.

#7

I was just curious. I try not to add too many extra nodes when something built in can handle it. Cheers.

#8

Understood. I wrote node-red-contrib-simple-gate for my own use and only published it and a couple of related nodes a year or more later, because there seemed to be some interest on this forum. I don't think many people use them.

2 Likes