# How to use a message to disable a button in a ui\_template

**URL:** <https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284>\
**Category:** Dashboard\
**Created:** [22 February 2019 18:48 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284 "2019-02-22T18:48:29Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [22 February 2019 18:48 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/1 "2019-02-22T18:48:29Z")

</div>

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.

```auto
<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.

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

```

---

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [25 February 2019 10:56 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/2 "2019-02-25T10:56:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [25 February 2019 12:42 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/3 "2019-02-25T12:42:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 February 2019 13:04 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/4 "2019-02-25T13:04:53Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [25 February 2019 13:05 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/5 "2019-02-25T13:05:34Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [25 February 2019 18:00 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/6 "2019-02-25T18:00:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 February 2019 19:53 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/7 "2019-02-25T19:53:29Z")

</div>

Documents first  
[https://material.angularjs.org/latest/api/directive/mdButton](https://material.angularjs.org/latest/api/directive/mdButton)

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [25 February 2019 19:56 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/8 "2019-02-25T19:56:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 February 2019 20:16 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/9 "2019-02-25T20:16:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [26 February 2019 03:43 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/10 "2019-02-26T03:43:40Z")

</div>

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

```auto
<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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![cflurin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cflurin/32/29_2.png) [@cflurin](https://discourse.nodered.org/u/cflurin)\
**Post date:** [26 February 2019 09:33 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/11 "2019-02-26T09:33:34Z")

</div>

@fabnavigator

Try this:

![button-template](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bd2823a9f8289e9be5f1f4e83d4e1db0c2ef3a85.png)

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

```

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [26 February 2019 13:27 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/12 "2019-02-26T13:27:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cflurin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cflurin/32/29_2.png) [@cflurin](https://discourse.nodered.org/u/cflurin)\
**Post date:** [26 February 2019 17:22 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/13 "2019-02-26T17:22:44Z")

</div>

> [@fabnavigator](#):
>
> but must fully reload the UI template node. Is that how it works?

I've added a config to the ui\_template, it seems to be better:

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

```

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

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [26 February 2019 17:31 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/14 "2019-02-26T17:31:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cflurin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cflurin/32/29_2.png) [@cflurin](https://discourse.nodered.org/u/cflurin)\
**Post date:** [26 February 2019 17:33 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/15 "2019-02-26T17:33:40Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![cflurin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cflurin/32/29_2.png) [@cflurin](https://discourse.nodered.org/u/cflurin)\
**Post date:** [27 February 2019 08:35 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/16 "2019-02-27T08:35:35Z")

</div>

I had a dream last night 😀

It's really foolish, this way works!

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

```

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

Flow:

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

```

---

<div class="post-metadata">

**Author:** ![fabnavigator](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fabnavigator/32/5403_2.png) [@fabnavigator](https://discourse.nodered.org/u/fabnavigator)\
**Post date:** [28 February 2019 00:16 UTC](https://discourse.nodered.org/t/how-to-use-a-message-to-disable-a-button-in-a-ui-template/8284/17 "2019-02-28T00:16:25Z")

</div>

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'}}`.