# Looking for example - radio button list sending selection to msg.payload

**URL:** <https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600>\
**Category:** Dashboard\
**Created:** [4 June 2018 10:13 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600 "2018-06-04T10:13:00Z")\
**Posts on this page:** 12\
**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:** [4 June 2018 10:13 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/1 "2018-06-04T10:13:00Z")

</div>

Hi All,  
Case: I want to display a list of items on the dashboard and select one and return it to the flow in msg.payload.

I can create a radio button list from the results of a ‘File List’ node, but can’t find an example of how to return the selected item to the backend. I’m trying to wrap my head around angular.js (tutorials) but haven’t figured this out yet.

The project is to create a music player using the ‘node-red-contrib-play-sound’ node with a dashboard with sliders for volume and some switches depending on the options of the different players the node supports. Once done I’ll post it in the ‘Share your projects’ category.

I’m doing this because it took me a lot of time to figure out how to pass options in the ‘node-red-contrib-play-sound’ node and wanted to provide examples for others that might use it.

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [4 June 2018 12:27 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/2 "2018-06-04T12:27:44Z")

</div>

Hello Zenofmud,

If you wanted to set a pushbutton for each radio station or make a dropdown menu to select it why not using what you have already on the palette from node-red-dashboard?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/9cdfe45d04d2e4d60a5d5675eeb235230095f99b.png)

Regars

---

<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:** [4 June 2018 14:12 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/3 "2018-06-04T14:12:03Z")

</div>

What I want to do is read a directory (‘file lister’ node) and get all the music files (i.e. mp3’s, wav’s) and display them as a radio button list. Then you select a buttion, adjust the other autio controls (volume, quality, etc) and press a ‘Play’ button. I’d also like to have a ‘Play All’ button to play all the music one after another.

So I want the ability to click a radio button and when the ‘Play’ button is pressed, get the song associated with the radio button that is active.

Does that make sense?

---

<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:** [6 June 2018 11:32 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/4 "2018-06-06T11:32:17Z")

</div>

I'm so close! I have it working but I have one odd thing I haven't been able to figure out and I've setup a demo (3 nodes) of the flow.  
 ![33%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/5420a1e2f43319a7257e38f4a2b0d88e21b13245.png)  
At NR startup, the dashboard looks like this:  
 ![15%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d6b9158f3563b295d21f0fd3eb5335c6c35fe3bb.png)  
The inject node (simulating the response from the file-lister node)just builds an array of two songs:  
 ![54%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/c12f2bf2a681b0129cd67eaa75365a31ef3a1541.png)  
It feeds the template node that builds the list and now the dashboard looks like this:  
 ![40%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/f8e9c5f20ce2392a907354c6dbb6d3ba038d943c.png)  
selecting a song and you see the feedback on the screen  
 ![47%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/3c6c7afec1862864e1a3f96c6f7dec87300472c4.png)  
and when you press the button, the debug shows the returned data:  
 ![00%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/4879d6216db67d49c2480f9b950a91adf4e77837.png)  
BUT now the dashboard looks like this:  
 ![05%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0d594aad8f5d74825a82e84f9fb51e67c8da789d.png)

Anyone have any ideas?

Here is the flow:  
`[{"id":"eddb3139.c693c","type":"ui_template","z":"e42d06a5.df9ff","group":"fb192efb.ec12e","name":"Display Song List","order":1,"width":"12","height":"6","format":"<script>\n \nthis.scope.action = function(opt) {\n var playSong = opt || \"no data passed to function\";\n// console.warn(playSong)\n return playSong; } \n</script>\n\n\n<div style=\"max-width:400px;\">\n <ul>\n <li ng-repeat=\"song in msg.payload track by $index\" style=\"list-style-type: none;\">\n <label>\n <input type=\"radio\" ng-model=\"$parent.song\" name=\"data\" value=\"{{song}}\" required />{{song}}\n </label>\n </li>\n </ul>\n <p>data entered: {{song}}</p>\n\n <md-button ng-click=\"send({payload:action(song)})\">\n Click to send data to backend\n </md-button>\n\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":810,"y":260,"wires":[["683393b5.ea38d4"]]},{"id":"683393b5.ea38d4","type":"debug","z":"e42d06a5.df9ff","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":810,"y":360,"wires":[]},{"id":"fe643496.658588","type":"inject","z":"e42d06a5.df9ff","name":"","topic":"","payload":"[\"song1.mp3\",\"song2.mp3\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":160,"wires":[["eddb3139.c693c"]]},{"id":"fb192efb.ec12e","type":"ui_group","z":"","name":"Song List","tab":"4f46b96e.86aa9","order":1,"disp":true,"width":"12","collapse":false},{"id":"4f46b96e.86aa9","type":"ui_tab","z":"","name":"Demo","icon":"dashboard","order":7}]`

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [6 June 2018 13:24 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/5 "2018-06-06T13:24:31Z")

</div>

What you are seeing is the difference in behavior when iterating over an array of strings, vs. iterating over the characters in a string – unfortunately, this `ng-repeat` line happily works with either input:

```
<li ng-repeat="song in msg.payload track by $index" style="list-style-type: none;">

```

So you will need to ensure that your `msg.payload` is always an array of strings, even if it only has one song.

But I think the reason you see the display update as soon as you send the selected song is because the option “Add output messages to stored state” is checked. Also, I don’t think you want the option “Pass through messages from input” selected, so that incoming msgs are just used to build the list of radio buttons, not passed to any downstream flows.

Finally, you don’t really need the `scope.action` function – as you have it defined, it’s just returning the selected song. So you can simplify the template code to just:

```
<md-button ng-click="send({payload: song})">
  Click to send data to backend
</md-button>

```

TBH, I’m not entirely clear on _why_ what works, but that is the mystery of Angular…

---

<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:** [6 June 2018 17:01 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/6 "2018-06-06T17:01:24Z")

</div>

Steve! You are my hero!!

The code is in the shape it’s in because I’ve been trying anything I could come up with and that finally got me some data back to the flow. Turns out I don’t need the at all in this case.

I’ll be writting this up as a HINT after I get done babysitting my 15 mth old granddaughter in a couple hours.

Once again THANK YOU!!! and I agree that angular is mysterious.

I did discover one good thing. If you are playing with the templae and having problems, you can add “console.warn(some-variable-or-text)” to your scripts and then use Chrome developer tools and select the console section so see what is being dumped there.

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [6 June 2018 17:40 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/7 "2018-06-06T17:40:39Z")

</div>

If you can share the template and let us know a bit how it works once you have it done… will be great for those like that that have no idea at all but can try to understand to change things a bit to adapt for our own use, if you don’t mind…

Regards

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [6 June 2018 17:42 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/8 "2018-06-06T17:42:03Z")

</div>

From other side If I’m not wrong same could be directly done by the dropdwon node on the dashboard palette.

Regards

---

<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:** [6 June 2018 19:20 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/9 "2018-06-06T19:20:46Z")

</div>

I would be writing it up now if not for the 15 month old granddaughter asleep on my chest (smile)

I try to get it out later

---

<div class="post-metadata">

**Author:** ![mwolter](https://avatars.discourse-cdn.com/v4/letter/m/258eb7/32.png) [@mwolter](https://discourse.nodered.org/u/mwolter)\
**Post date:** [15 August 2018 12:23 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/10 "2018-08-15T12:23:51Z")

</div>

Hello Zenofmud,  
Would you mind sharing your working flow? I’m interested in doing something similar and this would help greatly.

Thanks!

---

<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:** [15 August 2018 12:31 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/11 "2018-08-15T12:31:23Z")

</div>

I’ll be happy to share it but it won’t happen till late Sunday. I’m traveling and away from my desktop where the flow is.

If I forget, nudge me Monday

---

<div class="post-metadata">

**Author:** ![mwolter](https://avatars.discourse-cdn.com/v4/letter/m/258eb7/32.png) [@mwolter](https://discourse.nodered.org/u/mwolter)\
**Post date:** [15 August 2018 15:37 UTC](https://discourse.nodered.org/t/looking-for-example-radio-button-list-sending-selection-to-msg-payload/600/12 "2018-08-15T15:37:53Z")

</div>

Will do, safe travels!