How to use a message to disable a button in a ui_template

Dashboard
1

I have a "save" button defined in a UI template node that I would like to disable and enable by sending it a message. I tried setting it up like below, and then sending in a msg.payload string value of "disabled" when I wanted it disabled. It doesn't work.

<md-button {{msg.payload}} class="metal linear wide black-text" ng-click='send({
payload: [
    {
        "name": "select"
    }
]
})'>Save</md-button>

I thought it would work because I'm able to do something similar with setting a tooltip. The code below works in a UI template node.

<md-tooltip md-direction="{{msg.payload.direction}}">{{msg.payload.tooltip}}</md-tooltip>
2

rather than sending msg.payload as "disabled", send msg.enabled as "false".

1 Like
3

Did you get that to work? If so, please send me a simple flow showing it working. It doesn't work for me.

4 
[{"id":"68258a42.cc6424","type":"ui_button","z":"9da3d17d.f408","name":"","group":"9ca1403e.76505","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":910,"y":220,"wires":[["7bf4fb3b.af0754","a10d5411.72fad8","296a1c48.2422c4"]]},{"id":"2e8e71e.7d8838e","type":"inject","z":"9da3d17d.f408","name":"Disable button","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":520,"y":220,"wires":[["bd353061.25dd8"]]},{"id":"bd353061.25dd8","type":"change","z":"9da3d17d.f408","name":"","rules":[{"t":"set","p":"enabled","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":710,"y":220,"wires":[["68258a42.cc6424"]]},{"id":"be9f4402.372478","type":"inject","z":"9da3d17d.f408","name":"Enable button","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":510,"y":260,"wires":[["2198e402.c7160c"]]},{"id":"2198e402.c7160c","type":"change","z":"9da3d17d.f408","name":"","rules":[{"t":"set","p":"enabled","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":710,"y":260,"wires":[["68258a42.cc6424"]]},{"id":"9ca1403e.76505","type":"ui_group","z":"","name":"Group 3","tab":"31d45087.7182b","order":1,"disp":true,"width":"6","collapse":false},{"id":"31d45087.7182b","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":3}]
2 Likes
5

Just click the inject node and it'll disable the button on the dashboard.

[{"id":"850156db.fa4008","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"2beca4cf.eafd4c","type":"ui_button","z":"850156db.fa4008","name":"","group":"83aa45e7.130ea8","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":860,"y":300,"wires":[[]]},{"id":"ff68faf5.ba43c8","type":"inject","z":"850156db.fa4008","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":560,"y":300,"wires":[["6f03993a.2ba838"]]},{"id":"6f03993a.2ba838","type":"function","z":"850156db.fa4008","name":"","func":"msg.enabled = false\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":300,"wires":[["2beca4cf.eafd4c"]]},{"id":"83aa45e7.130ea8","type":"ui_group","z":"","name":"test","tab":"c780c2d0.b447e","disp":true,"width":"6","collapse":false},{"id":"c780c2d0.b447e","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
6

The devil is in the details. In my original post I said "I have a "save" button defined in a UI template node". I am not using a UI button node.

7

Documents first
https://material.angularjs.org/latest/api/directive/mdButton

1 Like
8

I know what has to end up in the html for the button to appear disabled. The issue is how to get the template changed by passing a message to the UI template node.

9

same way you do the{{msg.payload.direction}}
where ever you are creating the incoming message, create another property with boolean value and use it for button disabled/enabled state.

10

That's what I've been trying to do. The code below works.

<md-button ng-disabled="true" class="metal linear wide black-text" ng-click='send({...

But I can't get the code below to work, not matter what I pass in with the message.

<md-button ng-disabled="{{msg.payload.disabled}}" class="metal linear wide black-text" ng-click='send({...

I've tried all of the variations with and without quotes.

11

@fabnavigator

Try this:

button-template

[{"id":"4ebdb7bc.0f49d8","type":"ui_template","z":"7c6a9ec3.f1512","group":"5a2c927c.ba1edc","name":"","order":2,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":620,"wires":[[]]},{"id":"1d4c951b.2c8c4b","type":"template","z":"7c6a9ec3.f1512","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<md-button ng-disabled=\"{{payload}}\"> Button </md-button>","output":"str","x":300,"y":640,"wires":[["4ebdb7bc.0f49d8","22540de8.6f8872"]]},{"id":"8bba3ea.87a53c","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":620,"wires":[["1d4c951b.2c8c4b"]]},{"id":"10b38a8b.fde8e5","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":660,"wires":[["1d4c951b.2c8c4b"]]},{"id":"22540de8.6f8872","type":"debug","z":"7c6a9ec3.f1512","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","x":480,"y":660,"wires":[]},{"id":"5a2c927c.ba1edc","type":"ui_group","z":"","name":"light","tab":"42b914b0.66a0ac","order":null,"disp":true,"width":"6","collapse":false},{"id":"42b914b0.66a0ac","type":"ui_tab","z":"","name":"Main","icon":"dashboard","order":1}]
1 Like
12

Perfect! Thank you so much.

It looks like I can use a message to alter any of the template node content, but must fully reload the UI template node. Is that how it works?

Seems strange to me that I am able to alter the UI template node content for a tool tip.

13

I've added a config to the ui_template, it seems to be better:

<md-button ng-disabled="false"> Button </md-button>

Than use the input to send the msg.template (true or false)

14

I'm not understanding that. Please send the revised flow.

15 
[{"id":"4ebdb7bc.0f49d8","type":"ui_template","z":"7c6a9ec3.f1512","group":"5a2c927c.ba1edc","name":"","order":2,"width":0,"height":0,"format":"<md-button ng-disabled=\"false\"> Button </md-button>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":560,"wires":[[]]},{"id":"1d4c951b.2c8c4b","type":"template","z":"7c6a9ec3.f1512","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<md-button ng-disabled=\"{{payload}}\"> Button </md-button>","output":"str","x":300,"y":580,"wires":[["4ebdb7bc.0f49d8","22540de8.6f8872"]]},{"id":"8bba3ea.87a53c","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":560,"wires":[["1d4c951b.2c8c4b"]]},{"id":"10b38a8b.fde8e5","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":600,"wires":[["1d4c951b.2c8c4b"]]},{"id":"22540de8.6f8872","type":"debug","z":"7c6a9ec3.f1512","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","x":480,"y":600,"wires":[]},{"id":"5a2c927c.ba1edc","type":"ui_group","z":"","name":"light","tab":"42b914b0.66a0ac","order":null,"disp":true,"width":"6","collapse":false},{"id":"42b914b0.66a0ac","type":"ui_tab","z":"","name":"Main","icon":"dashboard","order":1}]
16

I had a dream last night :grinning:

It's really foolish, this way works!

<md-button ng-disabled="msg.payload.disabled"> {{msg.payload.disabled ? 'disabled': 'enabled'}} </md-button>

also without {{}} > see Angular expressions for more details.

Flow:

[{"id":"4ebdb7bc.0f49d8","type":"ui_template","z":"7c6a9ec3.f1512","group":"5a2c927c.ba1edc","name":"","order":2,"width":0,"height":0,"format":"<md-button ng-disabled=\"msg.payload.disabled\"> {{msg.payload.disabled ? 'disabled': 'enabled'}} </md-button>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":600,"y":520,"wires":[[]]},{"id":"15210d31.669453","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"{\"disabled\":true}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":480,"wires":[["4ebdb7bc.0f49d8"]]},{"id":"60b1fb0e.6a54f4","type":"inject","z":"7c6a9ec3.f1512","name":"","topic":"","payload":"{\"disabled\":false}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":520,"wires":[["4ebdb7bc.0f49d8"]]},{"id":"5a2c927c.ba1edc","type":"ui_group","z":"","name":"light","tab":"42b914b0.66a0ac","order":null,"disp":true,"width":"6","collapse":false},{"id":"42b914b0.66a0ac","type":"ui_tab","z":"","name":"Main","icon":"dashboard","order":1}]
2 Likes
17

I'm glad you had that dream! Very nice. Thank you.

I had at the start: ng-disabled="{{msg.payload}}" and I should have just had: ng-disabled="msg.payload".

Not to mention, I really like {{msg.payload.disabled ? 'disabled': 'enabled'}}.