# Populate MQTT devices with buttons on NR/ui pages

**URL:** <https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, home-assistant, mqtt\
**Created:** [7 January 2023 23:57 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356 "2023-01-07T23:57:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [7 January 2023 23:57 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356/1 "2023-01-07T23:57:24Z")

</div>

I am just starting with node-Red/MQTT to implement an installation with Tasmota devices (currently only switches) as "home automation".  
I want a node-Red project that detects the active Tasmota/MQTT devices and presents them on a NR/ui page.  
The NR project page "Dynamically Populate Dashboard with Buttons to Tasmota-Sonoff Devices" [1] is a good start. For the detected devices buttons are presented on a /ui page. The respective button opens the Tasmota device main menu.  
What is wanted here is e.g. instead of one device button, two for ON and OFF.  
I hope this change of the code will give me a guide to code more functions.  
Hints and help are very welcome.  
[1] [Dynamically Populate Dashboard with Buttons to Tasmota-Sonoff Devices (flow) - Node-RED](https://flows.nodered.org/flow/1541bcbba48bb088ec1503dba109f63c)

Edit/Added Using the ON / OFF buttons should not send HTTP commands, but use the MQTT API for that. (Background: I would disable the HTTP API on the Tasmota devices (for security reason ?)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 January 2023 13:26 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356/2 "2023-01-11T13:26:44Z")

</div>

Hi again @gNeandr, are you still looking for help with this?

Are you sure you want to dynamically populate? It does add a lot of complexity.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 January 2023 22:12 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356/3 "2023-01-11T22:12:31Z")

</div>

Hi Collin,  
indeed my "first" idea seems to be a bit complex ... at least for the first steps in node-red.  
At the moment I'm trying to go the easy way and build a static flow/project.  
Günter

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [12 January 2023 00:11 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356/4 "2023-01-12T00:11:07Z")

</div>

Here is an example of detecting mqtt devices, using mqtt wildcards and context storage. This is a simplified example. You could also use announce topics to create the context array.  
Hope it helps you.

```auto
[{"id":"07871d268f9a72c4","type":"inject","z":"da8a6ef0b3c9a5c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"tasmota/switch/room1/state","payload":"1","payloadType":"num","x":170,"y":3480,"wires":[["4ca64d529cad2e93"]]},{"id":"4ca64d529cad2e93","type":"mqtt out","z":"da8a6ef0b3c9a5c8","name":"","topic":"","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"e8ba3ef5.22f4a8","x":610,"y":3420,"wires":[]},{"id":"7ff9bd7510d8d085","type":"change","z":"da8a6ef0b3c9a5c8","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"$join($split($$.topic, \"/\")[[0..2]], \"/\") & \"/state\"\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":3420,"wires":[["4ca64d529cad2e93"]]},{"id":"0370b0c601ae83fd","type":"inject","z":"da8a6ef0b3c9a5c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"tasmota/switch/room1/state","payload":"0","payloadType":"num","x":170,"y":3520,"wires":[["4ca64d529cad2e93"]]},{"id":"c087a20355415b49","type":"inject","z":"da8a6ef0b3c9a5c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"tasmota/switch/room2/state","payload":"1","payloadType":"num","x":170,"y":3580,"wires":[["4ca64d529cad2e93"]]},{"id":"57540b0a07b20989","type":"inject","z":"da8a6ef0b3c9a5c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"tasmota/switch/room2/state","payload":"0","payloadType":"num","x":170,"y":3620,"wires":[["4ca64d529cad2e93"]]},{"id":"59d708256ccc2a06","type":"mqtt in","z":"da8a6ef0b3c9a5c8","name":"","topic":"tasmota/switch/+/command","qos":"2","datatype":"auto-detect","broker":"e8ba3ef5.22f4a8","nl":false,"rap":true,"rh":0,"inputs":0,"x":220,"y":3420,"wires":[["7ff9bd7510d8d085"]]},{"id":"ae6e48770263980c","type":"comment","z":"da8a6ef0b3c9a5c8","name":"simulaate tasmota devices, everything below here is to simulate a response from a tasmota device","info":"","x":380,"y":3380,"wires":[]},{"id":"ae903c4ca875ebf5","type":"mqtt in","z":"da8a6ef0b3c9a5c8","name":"","topic":"tasmota/switch/+/state","qos":"2","datatype":"auto-detect","broker":"e8ba3ef5.22f4a8","nl":false,"rap":true,"rh":0,"inputs":0,"x":180,"y":3260,"wires":[["9fa0c82f4c9ca881"]]},{"id":"9fa0c82f4c9ca881","type":"change","z":"da8a6ef0b3c9a5c8","name":"","rules":[{"t":"set","p":"tasmota","pt":"flow","to":"$append(\t $flowContext(\"tasmota\")[name != $$.topic][],\t [{\"name\": $$.topic, \"state\": $$.payload, \"color\": ($$.payload = 1 ? \"#00FF00\" : \"#FF0000\")}]\t)^(name)[]","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"tasmota","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":3240,"wires":[["f93c17b321065488"]]},{"id":"f93c17b321065488","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"2d4fe667.28f8ba","name":"","order":18,"width":0,"height":0,"format":"<script>\nthis.scope.action = function(obj) { return obj; }\n</script>\n\n\n<md-list>\n <md-list-item ng-repeat=\"device in msg.payload\">\n <md-button class=\"md-ink-ripple\" \n style=\"color: {{device.color}}\"\n ng-click=\"send({payload:action({name: device.name, state: device.state})})\" \n >{{device.name}} -- {{device.state}}</md-button>\n </md-list-item>\n</md-list>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":580,"y":3260,"wires":[["7a453ae2374c5358"]]},{"id":"7a453ae2374c5358","type":"change","z":"da8a6ef0b3c9a5c8","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"$join($split($$.payload.name, \"/\")[[0..2]], \"/\") & \"/command\"\t","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"$$.payload.state = 1 ? 0 : 1","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":3260,"wires":[["c7694ee5f1ba16fe"]]},{"id":"c7694ee5f1ba16fe","type":"mqtt out","z":"da8a6ef0b3c9a5c8","name":"","topic":"","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"e8ba3ef5.22f4a8","x":950,"y":3280,"wires":[]},{"id":"e8ba3ef5.22f4a8","type":"mqtt-broker","name":"testb","broker":"192.168.1.25","port":"1883","clientid":"node-red-test","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

To add devices add more inject pairs with different room names. You will have to adjust flow for your device command and status topics.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 February 2023 00:11 UTC](https://discourse.nodered.org/t/populate-mqtt-devices-with-buttons-on-nr-ui-pages/73356/5 "2023-02-11T00:11:30Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.