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

**URL:** <https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011>\
**Category:** Dashboard\
**Created:** [12 July 2022 16:58 UTC](https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011 "2022-07-12T16:58:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2022 16:58 UTC](https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011/1 "2022-07-12T16:58:47Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/886d2b206c6a1fff77deb83ba523c238636ad6e9.png)  
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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 July 2022 17:20 UTC](https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011/2 "2022-07-12T17:20:02Z")

</div>

The missing bit is `ng-model`

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2022 17:24 UTC](https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011/3 "2022-07-12T17:24:35Z")

</div>

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:

```auto
[{"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}]

```

 ![Screen Shot 2022-07-12 at 2.51.01 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/36ea2a1677a8ce15ebbdde840d738d50f2f75ed7.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 July 2022 17:24 UTC](https://discourse.nodered.org/t/trying-to-create-a-dashboard-with-a-quantity-a-dropdown-and-a-button-and-get-the-data-when-button-pushed/65011/4 "2022-07-26T17:24:42Z")

</div>

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