# Cannot disable button or change background color

**URL:** <https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968>\
**Category:** Dashboard\
**Created:** [21 June 2018 00:19 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968 "2018-06-21T00:19:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rogersmj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogersmj/32/712_2.png) [@rogersmj](https://discourse.nodered.org/u/rogersmj)\
**Post date:** [21 June 2018 00:19 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/1 "2018-06-21T00:19:41Z")

</div>

I'm new to Node-RED and Node-RED Dashboard, so apologies if I'm missing something obvious.

I want to disable a button, or change its background color, based on events incoming from Home Assistant. I've read the documentation on how to disable (e.g. msg.enabled = false) and change colors (e.g. msg.ui\_control = {bgcolor: "#000"}) but I can't get it to work. My button remains blue.

I'm trying to test this with a simple Inject and Change nodes, where my Change node is setting various properties to try and accomplish this:

![44](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/4de9e183dcae663a75d0df4325358c11c2ec225d.png)

You can see those properties in the msg object when I attach the debug node and press the inject button (I have another screenshot but it won't let me upload 2 in one post because I'm new.)

Yet my button always remains blue, and enabled.

What am I missing here?

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [21 June 2018 01:13 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/2 "2018-06-21T01:13:49Z")

</div>

If you want to hide a button (actually the group in which the button is configured)…

There is a flow that shows how to play with the UI control node: [https://flows.nodered.org/flow/f1b077d49f52866e74e9b983690b470f](https://flows.nodered.org/flow/f1b077d49f52866e74e9b983690b470f)

Notice that you have to craft carefully the payload to correctly address the tab and group.

Another example below for you to import and test:

```auto
[{"id":"80172625.79f6f8","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"78e4e0ee.9409a","type":"ui_ui_control","z":"80172625.79f6f8","name":"","x":544.1000518798828,"y":184.0000057220459,"wires":[[]]},{"id":"498029d0.17c038","type":"ui_button","z":"80172625.79f6f8","name":"","group":"2c951b0c.66aa24","order":0,"width":0,"height":0,"passthru":false,"label":"Button group G1","color":"blue","bgcolor":"yellow","icon":"","payload":"","payloadType":"str","topic":"","x":558.1000556945801,"y":126.00000381469727,"wires":[[]]},{"id":"c3848a3b.f4acc8","type":"inject","z":"80172625.79f6f8","name":"Hide G1","topic":"","payload":"{\"group\":{\"hide\":[\"FORUM_G1\"],\"show\":[\"FORUM_G2\"]}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":314.8888702392578,"y":127.00001335144043,"wires":[["498029d0.17c038","78e4e0ee.9409a"]]},{"id":"31011345.24308c","type":"comment","z":"80172625.79f6f8","name":"Simple example of hiding groups","info":"","x":177.4444580078125,"y":36.11111259460449,"wires":[]},{"id":"6d7781ae.e4927","type":"comment","z":"80172625.79f6f8","name":"https://flows.nodered.org/flow/f1b077d49f52866e74e9b983690b470f","info":"","x":602.77783203125,"y":37.000003814697266,"wires":[]},{"id":"4ba8db51.42ff24","type":"ui_button","z":"80172625.79f6f8","name":"","group":"a47e9d8e.49dbc","order":0,"width":0,"height":0,"passthru":false,"label":"Button group G2","color":"blue","bgcolor":"yellow","icon":"","payload":"","payloadType":"str","topic":"","x":571.0000057220459,"y":262.0000066757202,"wires":[[]]},{"id":"90e0c7b0.50b218","type":"inject","z":"80172625.79f6f8","name":"Hide G2","topic":"","payload":"{\"group\":{\"hide\":[\"FORUM_G2\"],\"show\":[\"FORUM_G1\"]}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":322,"y":264,"wires":[["4ba8db51.42ff24","78e4e0ee.9409a"]]},{"id":"2c951b0c.66aa24","type":"ui_group","z":"","name":"G1","tab":"70ad3a02.cbf0e4","disp":true,"width":"6","collapse":false},{"id":"a47e9d8e.49dbc","type":"ui_group","z":"","name":"G2","tab":"70ad3a02.cbf0e4","disp":true,"width":"6","collapse":false},{"id":"70ad3a02.cbf0e4","type":"ui_tab","z":"","name":"FORUM","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [21 June 2018 01:27 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/3 "2018-06-21T01:27:48Z")

</div>

Now to change colors make sure you configure the curly braces in the config fields of color and background

![f-04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/2f0c2df832d118ae3ffd74ccb4d0a22534f8a54e.PNG)

Flow to import and test (edited later to add the enable / disable):

```auto
[{"id":"9f4f1910.024638","type":"tab","label":"Flow 6","disabled":false,"info":""},{"id":"572ce595.fdb19c","type":"ui_button","z":"9f4f1910.024638","name":"","group":"6de08bdb.b18ba4","order":0,"width":0,"height":0,"passthru":false,"label":"Button group G3","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"str","topic":"","x":682.0000076293945,"y":160.00000190734863,"wires":[[]]},{"id":"3956bf08.b6dc9","type":"inject","z":"9f4f1910.024638","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":232.0999984741211,"y":164.99999523162842,"wires":[["ad124f67.e7c19"]]},{"id":"ad124f67.e7c19","type":"change","z":"9f4f1910.024638","name":"Test button dashboard","rules":[{"t":"set","p":"color","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"white","tot":"str"},{"t":"set","p":"enabled","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":420.0999984741211,"y":163.99999523162842,"wires":[["572ce595.fdb19c"]]},{"id":"310a3f29.b1da5","type":"change","z":"9f4f1910.024638","name":"","rules":[{"t":"set","p":"enabled","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":434.1000518798828,"y":256.00000381469727,"wires":[["572ce595.fdb19c"]]},{"id":"52bc45c9.1e2a4c","type":"inject","z":"9f4f1910.024638","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":257.00000381469727,"wires":[["310a3f29.b1da5"]]},{"id":"6de08bdb.b18ba4","type":"ui_group","z":"","name":"G3","tab":"70ad3a02.cbf0e4","disp":true,"width":"6","collapse":false},{"id":"70ad3a02.cbf0e4","type":"ui_tab","z":"","name":"FORUM","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [21 June 2018 01:30 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/4 "2018-06-21T01:30:47Z")

</div>

In Javascript, some of the simplest details can trip any of us up – I noticed in the picture of your change node, the value of `msg.enabled` is set to datatype “string” (that little `a/z` pulldown). So it looks like you are sending the string “false”, which when evaluated with a Javascript boolean operator returns “true”!

First thing you may want to try is to change the datatype to a boolean (i.e. the little `0/1` pulldown).

---

<div class="post-metadata">

**Author:** ![rogersmj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogersmj/32/712_2.png) [@rogersmj](https://discourse.nodered.org/u/rogersmj)\
**Post date:** [21 June 2018 05:21 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/5 "2018-06-21T05:21:17Z")

</div>

(This post was held for moderation, but was written the same time as the original post.)

After injecting:

 ![14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/a477d29913133963039d505059b5ca6729013f79.png)

Changing the "enabled" to boolean worked for disabling.

---

<div class="post-metadata">

**Author:** ![rogersmj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogersmj/32/712_2.png) [@rogersmj](https://discourse.nodered.org/u/rogersmj)\
**Post date:** [21 June 2018 12:25 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/6 "2018-06-21T12:25:12Z")

</div>

> [@shrickus](#):
>
> First thing you may want to try is to change the datatype to a boolean (i.e. the little `0/1` pulldown).

That was it! Thanks!! I should have known that.

---

<div class="post-metadata">

**Author:** ![rogersmj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogersmj/32/712_2.png) [@rogersmj](https://discourse.nodered.org/u/rogersmj)\
**Post date:** [21 June 2018 12:27 UTC](https://discourse.nodered.org/t/cannot-disable-button-or-change-background-color/968/7 "2018-06-21T12:27:53Z")

</div>

> [@Andrei](#):
>
> Now to change colors make sure you configure the curly braces in the config fields of color and background

That did it...of course, that makes sense you actually have to reference the values in the config. For some reason I thought it was automatic. Thank you so much.