Cannot disable button or change background color

Dashboard
1

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

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?

2

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

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:

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

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

f-04

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

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

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).

5

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

After injecting:

14
Screenshot 2018-06-20 20.17.14.png776×509 42.3 KB

Changing the "enabled" to boolean worked for disabling.

6

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

7

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.