# A little bit of a flow that others may like

**URL:** <https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372>\
**Category:** Dashboard\
**Created:** [25 May 2018 06:51 UTC](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372 "2018-05-25T06:51:25Z")\
**Posts on this page:** 1\
**Showing post:** 18

<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:** [30 May 2018 05:42 UTC](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372/18 "2018-05-30T05:42:42Z")

</div>

Hi

> [@Trying\_to\_learn](#):
>
> I haven’t worked out how to do colours, and other fancy stuff

Here's a little example how to get more fanciness out of your buttons

` [{"id":"b072ed3c.e56b4","type":"ui_button","z":"dcdf0ef7.c1e56","name":"on/off","group":"e905c597.18d9c8","order":0,"width":"0","height":"0","passthru":false,"label":"{{msg.topic}}","color":"","bgcolor":"{{msg.background}}","icon":"","payload":"","payloadType":"date","topic":"","x":910,"y":380,"wires":[["84f03fb5.3cfe3"]]},{"id":"84f03fb5.3cfe3","type":"function","z":"dcdf0ef7.c1e56","name":"buttonHandler","func":"var state = global.get(\"devicestate\");\nvar label;\nvar color;\n\nif(state.active === true){\n state.active = false;\n label = \"OFF\";\n color = \"red\";\n}\nelse{\n state.active = true;\n label = \"ON\";\n color = \"green\";\n}\nglobal.set(\"devicestate\", state);\n\n\nvar buttonstate = {enabled:false, background:color, topic:label};\n\nmsg.payload = \"whatever data needs to be sent to proccessing\"\n\nreturn [buttonstate,msg];","outputs":"2","noerr":0,"x":1070,"y":380,"wires":[["b072ed3c.e56b4"],["fded91c9.8089c"]],"inputLabels":["input"],"outputLabels":["to button","to proccessing"]},{"id":"fded91c9.8089c","type":"delay","z":"dcdf0ef7.c1e56","name":"waste time to fake proccesing","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":880,"y":600,"wires":[["689aec32.79fff4"]]},{"id":"180bb725.c111d9","type":"function","z":"dcdf0ef7.c1e56","name":"Init","func":"var devicestate = {active:true};\nglobal.set(\"devicestate\",devicestate);\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":360,"wires":[["689aec32.79fff4"]]},{"id":"53516ef3.dd82","type":"inject","z":"dcdf0ef7.c1e56","name":"Once","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":390,"y":360,"wires":[["180bb725.c111d9"]]},{"id":"689aec32.79fff4","type":"function","z":"dcdf0ef7.c1e56","name":"determineButtonState","func":"var state = global.get(\"devicestate\");\nvar label;\nvar color;\n\nif(state.active === true){\n label = \"ON\";\n color = \"green\";\n}\nelse{\n label = \"OFF\";\n color = \"red\";\n}\nmsg = {enabled:true, topic:label, background:color};\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":420,"wires":[["b072ed3c.e56b4"]]},{"id":"e905c597.18d9c8","type":"ui_group","z":"","name":"BUTTON","tab":"209ff019.06775","order":2,"disp":true,"width":"6","collapse":false},{"id":"209ff019.06775","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]`

---

_[View the full topic](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372)._