# EXAMPLE (template) - displaying a list using Radio buttons, returning the selection, reversing the selection

**URL:** <https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670>\
**Category:** Dashboard\
**Created:** [7 June 2018 13:11 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670 "2018-06-07T13:11:28Z")\
**Posts on this page:** 6\
**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:** [7 June 2018 13:11 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/1 "2018-06-07T13:11:28Z")

</div>

Problem: You have a list of items that you want to display and allow the user to select one and return that to the flow. In this case we will display a list of songs and show how to return the one picked. In addition, to show how to use a script in the template, we will show how to reverse the song name and return it.

Sample data:  
It's been a Hard Day's Night  
Help!  
Rocky Raccoon

We will use a function node to create the table like this:  
 ![13%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/7ccf22be98cb89471feb7c45f385eed124650224.png)

First, we will just display the table using this code in the template node:  
 ![08%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/e25df54a944ad91d47155a8b0462a7e76fc63ae1.png)  
The styling in the `<li>` is to remove the dot before each item since this is a list, and the styling in the `<div>` is to adjust the position of the list so it is under the title. The result is this:  
 ![28%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/b53f74c72fb3006c8c23b82b9e1c923df44c7dd1.png)  
To send the name of the song back to the flow as soon as it is checked, we add a **ng-click** to the `<li>` element so the template now looks like this:  
 ![51%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/ec70368a7c93f47f8a2cf4d1227cdd0953c1b826.png)  
and in the backend you can see the results in a debug node:  
 ![01%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/e1e3d95706a4897572172f2ab6c8f1b7b77ee906.png)  
Now what if we wanted to use a button to send the data back (maybe you will have multiple options on the dashboard you want sent back at the same time. We will remove the ng-click from the `<li>`, add an ng-model to the `<input>` and add in an `<md-button>` so the template will now look like this:

 ![13%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0586208dc5998c62d4ad9fb9ec56e49b9e00d655.png)  
and now the song name won't be sent until you press the button.  
Flow so far:

```auto
[{"id":"d63cbb3f.4e214","type":"debug","z":"968ca76f.3dc46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":770,"y":320,"wires":[]},{"id":"e0f1a75d.a784c","type":"ui_template","z":"968ca76f.3dc46","group":"2659c0e4.6c014","name":"Display Song List","order":1,"width":"12","height":"6","format":"<div style=\"margin: 0 0 0 -40px;\">\n <ul>\n <li ng-repeat=\"song in msg.payload track by $index\" \n style=\"list-style-type: none;\">\n <label>\n <input type=\"radio\" ng-model=\"$parent.song\" value=\"{{song}}\" name=\"data\" />{{song}}\n </label>\n </li>\n </ul>\n <md-button ng-click=\"send({payload:song})\">\n Click to send data to backend\n </md-button>\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":450,"y":320,"wires":[["d63cbb3f.4e214"]]},{"id":"bcf8f068.90c7c8","type":"function","z":"968ca76f.3dc46","name":"build list (1)","func":"var arr =[\"It's been a Hard Day's Night\",\n \"Help!\",\n \"Rocky Raccoon\"];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":250,"y":320,"wires":[["e0f1a75d.a784c"]]},{"id":"1a27d443.646804","type":"inject","z":"968ca76f.3dc46","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":320,"wires":[["bcf8f068.90c7c8"]]},{"id":"2659c0e4.6c014","type":"ui_group","z":"","name":"Radio button list","tab":"f9ac9e91.20e588","order":3,"disp":true,"width":"12","collapse":false},{"id":"f9ac9e91.20e588","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]

```

**But what if we want to do something with the data before returning it to the flow? (Like reversing the string?)**

We need to change a couple things and add a `<script>`. First lets change the button so it will send the data to the script. We change the ng-click from  
`ng-click="send({payload:song})"`  
to  
`ng-click="send({payload:action(song)})"`  
and add in the script so the template now looks like this:

 ![50%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/e6f963d86c7bed70baa84c322bd3cc7d6ec41c9d.png)  
Now when you click the button, you send the song to this.scope.action and it is processed. (NOTE: my understanding of 'this.scope stuff is hazy at best, I just know this wrks. If you want more details you need to do some more research) and the string is reversed and returned to the flow. Here is what the result looks like when we choose It's been a Hard Day's Night:  
 ![08%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/16a2b1147de7c4c5bad79ec27f212617ee615c97.png)  
Here is the flow with this example:

```auto
[{"id":"5502dcbe.937f0c","type":"debug","z":"968ca76f.3dc46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":770,"y":220,"wires":[]},{"id":"8a517f1b.afab4","type":"ui_template","z":"968ca76f.3dc46","group":"2659c0e4.6c014","name":"Reverse Song name","order":2,"width":"12","height":"6","format":"<script>\n \nthis.scope.action = function(opt) {\n var splitString = opt.split(\"\"); \n var reverseArray = splitString.reverse();\n var joinArray = reverseArray.join(\"\");\n opt = joinArray;\n return opt; } \n</script>\n\n<div style=\"margin: 0 0 0 -40px;\">\n <ul>\n <li ng-repeat=\"song in msg.payload track by $index\" \n style=\"list-style-type: none;\">\n <label>\n <input type=\"radio\" ng-model=\"$parent.song\" value=\"{{song}}\" name=\"data\" />{{song}}\n </label>\n </li>\n </ul>\n <md-button ng-click=\"send({payload:action(song)})\">\n Click to send data to backend\n </md-button>\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":460,"y":220,"wires":[["5502dcbe.937f0c"]]},{"id":"ea2ab1c3.c4d2f","type":"function","z":"968ca76f.3dc46","name":"build list (1)","func":"var arr =[\"It's been a Hard Day's Night\",\n \"Help!\",\n \"Rocky Raccoon\"];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":250,"y":220,"wires":[["8a517f1b.afab4"]]},{"id":"e38f7ef2.da25a8","type":"inject","z":"968ca76f.3dc46","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":220,"wires":[["ea2ab1c3.c4d2f"]]},{"id":"2659c0e4.6c014","type":"ui_group","z":"","name":"Radio button list","tab":"f9ac9e91.20e588","order":3,"disp":true,"width":"12","collapse":false},{"id":"f9ac9e91.20e588","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [17 August 2020 20:33 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/2 "2020-08-17T20:33:25Z")

</div>

@zenofmud. HI very late to this party but I have been reviewing your sample code and trying to adapt it to have an item set as the default radio button.  
No matter what I try, it doesn't seem to want to play nice. Not being an Angular expert doesn't help but it must be a simple syntax issue but I am not seeing it.

---

<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:** [18 August 2020 00:31 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/3 "2020-08-18T00:31:27Z")

</div>

What does you flow look like?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [18 August 2020 08:13 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/5 "2020-08-18T08:13:29Z")

</div>

There is a nice dashboard node available you can also take a look. I use this from time to time:

> **[node-red-node-ui-list](https://flows.nodered.org/node/node-red-node-ui-list)**
>
> Node-RED Dashboard UI widget node for simple list

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [18 August 2020 13:10 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/6 "2020-08-18T13:10:13Z")

</div>

Thanks Christian for the pointer. That looks good.

I am going to persevere for a while to see if I can resolve the radio button default.

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [18 August 2020 15:44 UTC](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670/7 "2020-08-18T15:44:59Z")

</div>

It ended up not being as bad as I thought to create the radio list with a default preset value.  
This works but may not be perfection for those who are Angular experts and there may be a cleaner method.

An initial Function node to create the array.

```auto
var c = false;
var f = false;
flow.get("tempunits","storeInFile") == "°C" ? c = true : f = true;
var arr =[{"unit":"°C","checked":c},
          {"unit":"°F","checked":f}];
msg.payload = arr;
return msg;

```

.  
msg.payload then gets pushed into the Template node

```auto
<div style="margin: 0 0 0 -40px;">
  <ul>
     <li ng-repeat="tempunit in msg.payload track by $index" 
        style="list-style-type: none;"
        ng-click="send({payload:tempunit.unit})"
        >
        <label>
         <input type="radio" name="data" ng-checked="tempunit.checked" />{{tempunit.unit}}
        </label>
     </li>
  </ul>
</div>

```

to create this with °C preset as the default value.  
 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/949dadc187232b68bdb63c2cb62e5b1e5a7bed57.jpeg)

If any Angular experts out there know how to set the button centre colour that would be greatly appreciated. I want to try to get the radio button centre colour to be the Node Red default colour.