Text input alternatives

Here is 2 alternatives to the dashboard text input using dashboard template

msg.topic sets the label.

So there is 1 text input that always outputs on change, the other one outputs on clicking the OK button.

[{"id":"3568474e.c4c9b8","type":"ui_template","z":"394b4e83.19ef02","group":"53cf504.e9555b","name":"user input validate","order":4,"width":"7","height":"2","format":"<md-input-container  style=\"overflow:hidden;\">\n    <span> \n    <input ng-model=\"user.input\" style=\"width:150px\" placeholder={{msg.topic}}><button class=\"bluebutton\" ng-click=\"msg.payload = user.input; send(msg)\" ng-keypress=\"($event.charCode==13)?msg.payload = user.input; send(msg)\" ngstyle=\"{background-color: #008CBA;}\" style=\"\n    color: #fff;\n    background-color: #5bc0de;\n    border-color: #46b8da;\">Ok</button></span>\n</md-input-container>\n    ","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":775,"y":1680,"wires":[["77f708e7.52d828","2a2db3f8.64ff1c"]]},{"id":"77f708e7.52d828","type":"debug","z":"394b4e83.19ef02","name":"","active":true,"console":"false","complete":"false","x":1010,"y":1665,"wires":[]},{"id":"328882f5.827d9e","type":"ui_template","z":"394b4e83.19ef02","group":"53cf504.e9555b","name":"user input","order":6,"width":"7","height":"2","format":"<md-input-container  style=\"overflow:hidden;\">\n    <span> \n    <input ng-model=\"user.input\" style=\"width:150px\" placeholder=\"{{msg.topic}}\" ng-change=\"msg.payload = user.input; send(msg)\"></span>\n</md-input-container>\n    ","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":800,"y":1730,"wires":[["77f708e7.52d828","cf78039a.54ab3"]]},{"id":"e86c3bfa.5943e8","type":"inject","z":"394b4e83.19ef02","name":"","topic":"Name","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"x":580,"y":1680,"wires":[["3568474e.c4c9b8"]]},{"id":"d3468d1.929f77","type":"inject","z":"394b4e83.19ef02","name":"","topic":"Topic","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"x":570,"y":1730,"wires":[["328882f5.827d9e"]]},{"id":"cf78039a.54ab3","type":"ui_text","z":"394b4e83.19ef02","group":"53cf504.e9555b","order":7,"width":"7","height":"1","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":990,"y":1735,"wires":[]},{"id":"2a2db3f8.64ff1c","type":"ui_text","z":"394b4e83.19ef02","group":"53cf504.e9555b","order":5,"width":"7","height":"1","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":995,"y":1700,"wires":[]},{"id":"53cf504.e9555b","type":"ui_group","z":"","name":"test","tab":"52aaa596.768b7c","disp":true,"width":"12"},{"id":"52aaa596.768b7c","type":"ui_tab","z":"","name":"Test","icon":"dashboard"}]
Hugobox

Flow Info

created 1 month, 2 weeks ago

Node Types

Core
  • debug (x1)
  • inject (x2)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x2)
  • ui_text (x2)

Tags

  • text
  • input
  • dashboard
  • template
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option