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

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:

var arr =["It's been a Hard Day's Night",
        "Help!",
        "Rocky Raccoon"];
msg.payload = arr;
return msg;

First, we will just display the table using this code in a template node:

<div style="margin: 0 0 0 -40px;">
  <ul>
    <li ng-repeat="song in msg.payload track by $index" 
      style="list-style-type: none;">
        <label>
            <input type="radio" name="data" />{{song}}
        </label>
    </li>
 </ul>
</div>

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:

o  It’s been a Hard Day’s Night
o  Help!
o  Rocky Raccoon

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:

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

and in the backend you can see the results in a debug node:

6/11/2018, 3:35:45 PMnode: d63cbb3f.4e214
msg : Object
{ payload: "Rocky Raccoon", socketid: "MvBWV9Fk-qf2GVxyAAAB", _msgid: "bad071c7.8556d" }

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 and a value= to the <input> and an <md-button> so the template will now look like this:

<div style="margin: 0 0 0 -40px;">
  <ul>
    <li ng-repeat="song in msg.payload track by $index" 
      style="list-style-type: none;">
        <label>
            <input type="radio" ng-model="$parent.song" value="{{song}}" name="data" />{{song}}
        </label>
    </li>
 </ul>
     <md-button ng-click="send({payload:song})">
        Click to send data to backend
    </md-button>
</div>

and now the song name won’t be sent until you press the button.

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:

<script>
this.scope.action = function(opt) {
        var splitString = opt.split(""); 
        var reverseArray = splitString.reverse();
        var joinArray = reverseArray.join("");
        opt = joinArray;
     return opt; }    
</script>

<div style="margin: 0 0 0 -40px;">
  <ul>
    <li ng-repeat="song in msg.payload track by $index" 
      style="list-style-type: none;">
        <label>
            <input type="radio" ng-model="$parent.song" value="{{song}}" name="data" />{{song}}
        </label>
    </li>
 </ul>
     <md-button ng-click="send({payload:action(song)})">
        Click to send data to backend
    </md-button>
</div>

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 works. 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:

6/11/2018, 3:45:06 PMnode: 5502dcbe.937f0c
msg : Object
{ payload: "thgiN s'yaD draH a neeb s'tI", socketid: "MvBWV9Fk-qf2GVxyAAAB", _msgid: "865dc746.d69ae8" }

Here is the flow for this example:

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

Flow Info

Created 6 years, 3 months ago
Rating: not yet rated

Owner

Actions

Rate:

Node Types

Core
  • debug (x1)
  • function (x1)
  • inject (x1)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • dashboard
  • template
  • angular
  • example
  • radio
  • button
  • list
  • reverse
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option