How to change button background color temporarily onclick

Dashboard
1

Hi,

On my dashboard I have a button which confirms a selected time of a time input widget
How can I change the background color, after the confirmation (onclick), for a given period and then go back to the initial background color?

2

you could attach a trgger node.
eg.

[{"id":"3b6120fe.503528","type":"inject","z":"84b6531c.4e773","name":"","props":[{"p":"background","v":"green","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":450,"y":120,"wires":[["ba040ee4.a8d0c"]]},{"id":"ba040ee4.a8d0c","type":"ui_button","z":"84b6531c.4e773","name":"","group":"2d4fe667.28f8ba","order":16,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"{{background}}","className":"","icon":"","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":610,"y":120,"wires":[["9142fd98.891598","ebb5c8e.2b53538"]]},{"id":"15f8a7f.c025758","type":"change","z":"84b6531c.4e773","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"background","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":180,"wires":[["ba040ee4.a8d0c"]]},{"id":"9142fd98.891598","type":"trigger","z":"84b6531c.4e773","name":"","op1":"red","op2":"green","op1type":"str","op2type":"str","duration":"1","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":470,"y":180,"wires":[["15f8a7f.c025758"]]},{"id":"ebb5c8e.2b53538","type":"debug","z":"84b6531c.4e773","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":860,"y":80,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
3

Thanx man! working

5

Is this also possible in css code in my template node?
This will save me 14 extra widgets in my flow

6

Yes it is possible, if you give each button a optional class, you could then target that class in your css some examples here

7

Thanx, found it!