Dashboard ui_template send all checkboxes name & state

Dashboard
1

Hi,
question
how to send via button, all items name & state of a ui_template containing several checkboxes.
Example msg.payload:
[{"name":"item a","state":true},{"name":"item b","state":false},{"name":"item c","state":true}]

function node to create the test items as input for the ui_template node:

msg.payload=[{"name":"item a"},{"name":"item b"},{"name":"item c"}];
return msg;

ui_template node with the checkboxes and button to send all items and state:

<form>
    <fieldset style="width:100%">
    <legend>Select</legend>
        <div ng-repeat="item in msg.payload">
            <label>{{item.name}}
                <input  type="checkbox" style="float:left; position: relative; top: 5px;"
                        ng-model="check">
            </label>
        </div>
    </fieldset>
    <!-- how to send the name & state of all items from the fieldset -->
    <md-button ng-click="send({payload:?????})">
        Send values
    </md-button>
</form>
2

So you want to press a button and it will run the function node to build the msg that is connected to the ui_template?

What does you flow currently look like? (please export it and attach it to a reply)

3

The flow is a test flow with an inject node > function node > ui_template node > debug node.
The inject node triggers the function node to send the checkbox items to the ui_template node. The ui_template node has a button which when pressed sends the name & state of all checkbox items.
The debug node is used to check the output message from the ui_template node.

[{"id":"630185ed.9bf5dc","type":"ui_template","z":"49ae551.63de1ac","group":"b1dfa150.96c78","name":"Form Checkboxes","order":8,"width":0,"height":0,"format":"<form>\n <fieldset style=\"width:100%\">\n <legend>Select</legend>\n <div ng-repeat=\"item in msg.payload\">\n <label>{{item.name}}\n <input type=\"checkbox\" style=\"float:left; position: relative; top: 5px;\"\n ng-model=\"check\">\n </label>\n </div>\n </fieldset>\n <!-- how to send the state of all items from the fieldset -->\n <md-button ng-click=\"send({payload:????})\">\n Send values\n </md-button>\n</form>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":590,"y":300,"wires":[["48717b7e.658fa4"]]},{"id":"2b3671e8.cadd4e","type":"function","z":"49ae551.63de1ac","name":"Define Checkbox Data","func":"msg.payload=[{\"name\":\"item a\"},{\"name\":\"item b\"},{\"name\":\"item c\"}];\nreturn msg;\n","outputs":1,"noerr":0,"x":360,"y":300,"wires":[["630185ed.9bf5dc"]]},{"id":"48717b7e.658fa4","type":"debug","z":"49ae551.63de1ac","name":"DEBUG CHECKBOXTEMPLATE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":860,"y":300,"wires":[]},{"id":"61a93436.0d020c","type":"inject","z":"49ae551.63de1ac","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":300,"wires":[["2b3671e8.cadd4e"]]},{"id":"b1dfa150.96c78","type":"ui_group","z":"","name":"TESTGROUP","tab":"e0334f63.e88b4","disp":true,"width":"6","collapse":false},{"id":"e0334f63.e88b4","type":"ui_tab","z":"","name":"TABTEST","icon":"dashboard","disabled":false,"hidden":false}]

4

Why not use ui_list?

[{"id":"40cab5b5.b2092c","type":"function","z":"4f497142.2d316","name":"Define Checkbox Data","func":"msg.payload=[{\"title\":\"item a\"},{\"title\":\"item b\"},{\"title\":\"item c\"}]\nreturn msg;\n","outputs":1,"noerr":0,"x":200,"y":140,"wires":[["c43cc46d.f9f81"]]},{"id":"d86a3f18.cb375","type":"inject","z":"4f497142.2d316","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":150,"y":80,"wires":[["40cab5b5.b2092c"]]},{"id":"c43cc46d.f9f81","type":"ui_list","z":"4f497142.2d316","group":"95de4fbb.d3212","name":"","order":1,"width":"6","height":"4","lineType":"two","actionType":"switch","allowHTML":false,"outputs":1,"topic":"","x":450,"y":140,"wires":[["4748a4c3.641d64"]]},{"id":"4748a4c3.641d64","type":"debug","z":"4f497142.2d316","name":"DEBUG CHECKBOXTEMPLATE","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":140,"wires":[]},{"id":"95de4fbb.d3212","type":"ui_group","z":"","name":"TESTGROUP","tab":"544ce666.682928","disp":true,"width":"6","collapse":false},{"id":"544ce666.682928","type":"ui_tab","z":"","name":"TABTEST","icon":"dashboard","disabled":false,"hidden":false}]

oops, change the ui_list node Action to 'checkbox to send changed item'

5

Tried your suggestion - the ui_list is nice and simple.
Using the action 'checkbox to send changed item' sends the state of the checked/unchecked item.

The solution looking for is

  • select items first - without sending a msg
  • send the title & state of each item in an msg array payload triggered by pressing a button - basically loop over each item and add to the array - when done, send as msg by the button.
6

Here's a way to do it with the ui_template:

1st set some default values in your input:

[
    {
        "name": "item a",
        "value": false
    },
    {
        "name": "item b",
        "value": false
    },
    {
        "name": "item c",
        "value": true
    }
]

Then in your ui_template:

<form>
    <fieldset style="width:100%">
    <legend>Select</legend>
        <div ng-repeat="item in msg.payload">
            <label>{{item.name}}
                <md-checkbox  ng-model="item.value"  aria-label="checkbox" ></md-checkbox>
            </label>
        </div>
    </fieldset>
    <md-button ng-click="send(msg)">
        Send values
    </md-button>
</form>
5 Likes
7

Very good solution = good learning - Thanks all for help.

BTW: This solution will become part (not yet done) of my Domoticz Home Automation Web App Site Control based on Node-RED (info).

1 Like
8

Hi,

Thanks for this, I have managed to get it into two columns but would like label and checkbox side by side. I cannot seem to get them to line up tho. Any idea how I do that ?

<form>
    <fieldset style="width:90%">
        <legend>Select Zones</legend>
        <div layout="row" layout-wrap flex>
            <div flex="50" ng-repeat="item in msg.payload">
                <label> {{item.name}}
                     <md-checkbox ng-model="item.value"  aria-label="checkbox" >  </md-checkbox>
                </label>
            </div>
        </div>
    </fieldset>
       

    <md-button ng-click="send(msg)">
        Refresh
    </md-button>
</form>