In need of some help - Modal text input with cancel

This should get you started...

[{"id":"d7d1671e.9b2f88","type":"ui_template","z":"56fa9896.d15ed8","group":"dfb4a60f.d788f8","name":"","order":1,"width":"12","height":"7","format":"<div ng-bind-html=\"msg.payload\">\n</div>    \n    \n    \n\n<p>Click the buttons to show and/or close the dialog window.</p>\n\n<button onclick=\"showDialog()\">Show dialog</button>\n<button onclick=\"closeDialog()\">Close dialog</button>\n\n<p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p>\n\n<dialog id=\"myDialog\">\n<h3>Please scan the QR Code</h3>\n\t\t\t<p>Please do not click on the screen, the cursor must be in the box while scanning the code</p>\n\t\t\t<input type=\"text\" id=\"return_value\" value=\"\" placeholder=\"Enter value\" onkeypress=\"myFunction(event)\"></dialog>\n<script>\nvar theScope = scope;\nvar x = document.getElementById(\"myDialog\"); \n\nfunction showDialog() { \n  x.show(); \n} \n\nfunction closeDialog() { \n  x.close(); \n} \n\nfunction myFunction(event) \n\t{\n\t    console.log(event)\n  \tif (event.keyCode === 13) \n  \t\t{\n  \t\t    var data = $(\"#return_value\").val();\n\t    console.log(\"sending value:\",data)\n\t    theScope.send({payload:data});\n        \tx.close();\n\t\t}\n  \t}\n</script>\n    \n    ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":620,"y":140,"wires":[["afd9fd14.bf0d5"]]},{"id":"afd9fd14.bf0d5","type":"debug","z":"56fa9896.d15ed8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":140,"wires":[]},{"id":"dfb4a60f.d788f8","type":"ui_group","z":"","name":"Barcode","tab":"48418b79.0f5834","disp":true,"width":"12","collapse":false},{"id":"48418b79.0f5834","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1}]

Copy the above flow, open your node-red, press ctrl+i, paste in the flow, deploy the flow, open the dashboard (ctrl+shift+d).

It may not be entirely what you want but it should get you started.

When the enter button is pressed (by you or the scanner) a msg will be sent to the debug window. Use the output in msg.payload to do what you need.

1 Like