Trying to create a dashboard with a quantity, a dropdown and a button and get the data when button pushed

NR v2.2.2 Dashboard v3.1.7

I've been beating my head about this and it should be easy but my 'Foo' is failing today (and it's hot outside and in) This is a simple example of what I want (I'm actualy building a parts inventory).
Screen Shot 2022-07-12 at 12.50.25 PM
As you can see there is a dropdown (created in a ui-template) and a Quantity (ui-numeric) and a Button (ui-button).

The idea is to select the fruit and enter a quantity and press the button and build an object with both the fruit and the quantity in the msg.payload. My idea is when you enter the quantity, I stuff it in a flow variable. I want to do the same when a 'fruit' is picked an dfinally when the button is pressed, grab the flow variables and put them in msg.payload and send them off for further processing.

My issue is I can't figure out how to return the 'fruit' from the ui-template. Any pointers will be gratefully welcomed. Attached is my test flow.

[{"id":"0d33c07f75d87cc0","type":"ui_button","z":"a1151f479fc9edf7","name":"","group":"23d2ed50f8e0ebd0","order":1,"width":"4","height":"1","passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"go","topicType":"str","x":340,"y":220,"wires":[["1ceea1b1470cf9a8","78e170279241a57b"]]},{"id":"7664e90b169098a0","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":950,"y":240,"wires":[]},{"id":"827b7245e6bf8e64","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":60,"wires":[]},{"id":"1ceea1b1470cf9a8","type":"ui_template","z":"a1151f479fc9edf7","group":"c3180d6ecfee774b","name":"Fruit","order":1,"width":"4","height":"1","format":"<div ng-bind-html=\"msg.payload\"></div>\n    <label for=\"fruits\">Choose a Fruit:</label>\n\n<select name=\"fruits\" id=\"fruits\">\n  <option value=\"apple\">apple</option>\n  <option value=\"banana\">banana</option>\n  <option value=\"peach\">peach</option>\n  <option value=\"watermelon\">watermelon</option>\n</select>\n\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":330,"y":160,"wires":[["b2441671cc4b70fb","800cc9d44cb60701"]]},{"id":"ee98c7531ac328a4","type":"inject","z":"a1151f479fc9edf7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":125,"y":100,"wires":[["1ceea1b1470cf9a8","c255f3e1a80ff062"]],"l":false},{"id":"b2441671cc4b70fb","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":140,"wires":[]},{"id":"ed22a7fb39d76b7b","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"set","p":"quantity","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":100,"wires":[[]]},{"id":"800cc9d44cb60701","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"set","p":"fruit","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":750,"y":180,"wires":[["a13bb2e83c24712f"]]},{"id":"a13bb2e83c24712f","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload.quantity","pt":"msg","to":"quantity","tot":"flow"},{"t":"set","p":"payload.fruit","pt":"msg","to":"fruit","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":180,"wires":[["7664e90b169098a0"]]},{"id":"ae07a5d7e58b0e34","type":"catch","z":"a1151f479fc9edf7","name":"","scope":null,"uncaught":false,"x":400,"y":280,"wires":[["873153e1b7b670f3"]]},{"id":"873153e1b7b670f3","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":280,"wires":[]},{"id":"78e170279241a57b","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":220,"wires":[]},{"id":"c255f3e1a80ff062","type":"ui_numeric","z":"a1151f479fc9edf7","name":"","label":"Quantity","tooltip":"","group":"c3180d6ecfee774b","order":2,"width":"4","height":"1","wrap":false,"passthru":false,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"className":"","x":340,"y":100,"wires":[["827b7245e6bf8e64","ed22a7fb39d76b7b"]]},{"id":"23d2ed50f8e0ebd0","type":"ui_group","name":"submit","tab":"a088985c1d3b62a3","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"c3180d6ecfee774b","type":"ui_group","name":"inventory","tab":"a088985c1d3b62a3","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"a088985c1d3b62a3","type":"ui_tab","name":"Supermarket","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

The missing bit is ng-model

<div ng-bind-html="msg.payload"></div>
    <label for="fruits">Choose a Fruit:</label>

<select name="fruits" id="fruits" ng-model="selectedfruit">
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="peach">peach</option>
  <option value="watermelon">watermelon</option>
</select>


<script>
  (function(scope) {
  scope.$watch('selectedfruit', function(selectedfruit) {
    if (selectedfruit) {
      scope.send({topic:"fruits", payload:selectedfruit})
    }
  });
})(scope);
</script>
2 Likes

Excellent!I knew it would be simple (for someone who knew what they were doing! This should be a good example for others too.

Here is the working flow it anyone wants to use it:

[{"id":"a1151f479fc9edf7","type":"tab","label":"submit with dropdown","disabled":false,"info":"","env":[]},{"id":"0d33c07f75d87cc0","type":"ui_button","z":"a1151f479fc9edf7","name":"","group":"58fe2917582ca663","order":1,"width":"4","height":"1","passthru":false,"label":"Submit","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"go","topicType":"str","x":280,"y":300,"wires":[["78e170279241a57b","a13bb2e83c24712f"]]},{"id":"7664e90b169098a0","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":260,"wires":[]},{"id":"827b7245e6bf8e64","type":"debug","z":"a1151f479fc9edf7","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":100,"wires":[]},{"id":"1ceea1b1470cf9a8","type":"ui_template","z":"a1151f479fc9edf7","group":"e8bc185adb71aa98","name":"Fruit","order":1,"width":"4","height":"1","format":"<div ng-bind-html=\"msg.payload\"></div>\n    <label for=\"fruits\">Choose a Fruit:</label>\n\n<select name=\"fruits\" id=\"fruits\" ng-model=\"selectedfruit\">\n  <option value=\"apple\">apple</option>\n  <option value=\"banana\">banana</option>\n  <option value=\"peach\">peach</option>\n  <option value=\"watermelon\">watermelon</option>\n</select>\n\n\n<script>\n  (function(scope) {\n  scope.$watch('selectedfruit', function(selectedfruit) {\n    if (selectedfruit) {\n      scope.send({topic:\"fruits\", payload:selectedfruit})\n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":270,"y":220,"wires":[["b2441671cc4b70fb","800cc9d44cb60701"]]},{"id":"b2441671cc4b70fb","type":"debug","z":"a1151f479fc9edf7","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":180,"wires":[]},{"id":"ed22a7fb39d76b7b","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"set","p":"quantity","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":140,"wires":[[]]},{"id":"800cc9d44cb60701","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"set","p":"fruit","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":220,"wires":[[]]},{"id":"a13bb2e83c24712f","type":"change","z":"a1151f479fc9edf7","name":"","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload","pt":"msg","to":"You ordered #qty #fruit","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"#qty","fromt":"str","to":"quantity","tot":"flow"},{"t":"change","p":"payload","pt":"msg","from":"#fruit","fromt":"str","to":"fruit","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":300,"wires":[["7664e90b169098a0","748854e41b342de7","269a7246585ac492"]]},{"id":"ae07a5d7e58b0e34","type":"catch","z":"a1151f479fc9edf7","name":"","scope":null,"uncaught":false,"x":680,"y":140,"wires":[["873153e1b7b670f3"]]},{"id":"873153e1b7b670f3","type":"debug","z":"a1151f479fc9edf7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":670,"y":180,"wires":[]},{"id":"78e170279241a57b","type":"debug","z":"a1151f479fc9edf7","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":260,"wires":[]},{"id":"c255f3e1a80ff062","type":"ui_numeric","z":"a1151f479fc9edf7","name":"","label":"Quantity","tooltip":"","group":"e8bc185adb71aa98","order":2,"width":"4","height":"1","wrap":false,"passthru":false,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"className":"","x":280,"y":140,"wires":[["827b7245e6bf8e64","ed22a7fb39d76b7b"]]},{"id":"748854e41b342de7","type":"ui_text","z":"a1151f479fc9edf7","group":"16932b547b98193a","order":1,"width":"12","height":"1","name":"Results of the data entry","label":"","format":"{{msg.payload}}","layout":"row-left","className":"","x":730,"y":300,"wires":[]},{"id":"269a7246585ac492","type":"change","z":"a1151f479fc9edf7","name":"Clear out fruit","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":360,"wires":[["79565e327d31c3c5"]]},{"id":"79565e327d31c3c5","type":"link out","z":"a1151f479fc9edf7","name":"","mode":"link","links":["5aa81a8e87315eb7"],"x":625,"y":360,"wires":[]},{"id":"5aa81a8e87315eb7","type":"link in","z":"a1151f479fc9edf7","name":"","links":["79565e327d31c3c5"],"x":125,"y":220,"wires":[["1ceea1b1470cf9a8"]]},{"id":"f3234fdc71237b45","type":"comment","z":"a1151f479fc9edf7","name":"Sample flow with a dropdown and numeric inputs","info":"","x":420,"y":40,"wires":[]},{"id":"8334dd6aebfdb351","type":"inject","z":"a1151f479fc9edf7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":125,"y":180,"wires":[["1ceea1b1470cf9a8"]],"l":false},{"id":"58fe2917582ca663","type":"ui_group","name":"Submit","tab":"09e30a941641858e","order":2,"disp":false,"width":"4","collapse":false,"className":""},{"id":"e8bc185adb71aa98","type":"ui_group","name":"Data entry","tab":"09e30a941641858e","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"16932b547b98193a","type":"ui_group","name":"Order","tab":"09e30a941641858e","order":3,"disp":false,"width":"12","collapse":false,"className":""},{"id":"09e30a941641858e","type":"ui_tab","name":"Fruit Picker","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

3 Likes

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