# Populate dropdown from MQTT

**URL:** <https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281>\
**Category:** General\
**Created:** [27 August 2021 14:44 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281 "2021-08-27T14:44:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nocsspecop](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nocsspecop](https://discourse.nodered.org/u/nocsspecop)\
**Post date:** [27 August 2021 14:44 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/1 "2021-08-27T14:44:41Z")

</div>

Hello all,

I'd like to populate the dashboard dropdown by using an "mqtt-in" element:  
 ![mqtt_dropdown](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/114c54afe6ab59f98e8256db867a57dc0a24493c.png)

So the idea is to send mqtt messages from my ESP32 to fill up the dropdown with new elements.

Is something like that possible?

Thank you very much for your help  
Matteo

---

<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:** [27 August 2021 15:22 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/2 "2021-08-27T15:22:21Z")

</div>

Yes it is possible, but with out more info like the incoming message and the info you want in the dropdown it is hard to say how exactly.

---

<div class="post-metadata">

**Author:** ![nocsspecop](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nocsspecop](https://discourse.nodered.org/u/nocsspecop)\
**Post date:** [27 August 2021 16:49 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/3 "2021-08-27T16:49:48Z")

</div>

What I'd like to achieve is to fill the dropdown with new entries from an external source through MQTT messages. The result would be like I'm editing it inside the node-red ui by adding manually new Options. Something like that (marked red):

 ![mqtt_dropdown_options](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/02c0bb8c35ba09fb993787674887d04dfbcdcd31.png)

The incoming MQTT-message is controlled by me, so I can create the QMTT message topic as needed.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [27 August 2021 17:08 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/4 "2021-08-27T17:08:34Z")

</div>

Please start reading the help text for the drop down node. It is very well described how you shall populate the dropdowns

---

<div class="post-metadata">

**Author:** ![nocsspecop](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nocsspecop](https://discourse.nodered.org/u/nocsspecop)\
**Post date:** [27 August 2021 17:11 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/5 "2021-08-27T17:11:49Z")

</div>

I have read the help text but I can't figure out how the MQTT-message string has to be formatted to add new entries to the dropdown element. One single example would be enough for me.

---

<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:** [27 August 2021 17:54 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/6 "2021-08-27T17:54:14Z")

</div>

Here is an example of setting options via mqtt.  
Click the injects and the options will change.  
Hope it helps.

```auto
[{"id":"3def0d93.e3949a","type":"mqtt in","z":"c74669a0.6a34f8","name":"","topic":"mqtt/option/dorpdown","qos":"2","datatype":"json","broker":"d675b749.04b9c8","x":180,"y":2940,"wires":[["15356478.1211ac"]]},{"id":"15356478.1211ac","type":"change","z":"c74669a0.6a34f8","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"options","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":2920,"wires":[["e1165fd6.2733a8","118f1320.d242b5"]]},{"id":"e1165fd6.2733a8","type":"ui_dropdown","z":"c74669a0.6a34f8","name":"","label":"","tooltip":"","place":"Select option","group":"2d4fe667.28f8ba","order":17,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","x":530,"y":2960,"wires":[[]]},{"id":"118f1320.d242b5","type":"debug","z":"c74669a0.6a34f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"options","targetType":"msg","statusVal":"","statusType":"auto","x":620,"y":2920,"wires":[]},{"id":"e729e11b.0f2818","type":"inject","z":"c74669a0.6a34f8","name":"option set 1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"mqtt/option/dorpdown","payload":"[{\"Choice 1\":\"1\"},{\"Choice 2\":\"2\"},{\"Choice 3\":\"3\"}]","payloadType":"json","x":240,"y":3080,"wires":[["ee46676d.617f6"]]},{"id":"89a676e0.fc37c8","type":"inject","z":"c74669a0.6a34f8","name":"option set 2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"mqtt/option/dorpdown","payload":"[{\"Choice 4\":\"4\"},{\"Choice 5\":\"5\"},{\"Choice 6\":\"6\"}]","payloadType":"json","x":240,"y":3120,"wires":[["ee46676d.617f6"]]},{"id":"ee46676d.617f6","type":"mqtt out","z":"c74669a0.6a34f8","name":"","topic":"","qos":"","retain":"","broker":"d675b749.04b9c8","x":370,"y":3080,"wires":[]},{"id":"d675b749.04b9c8","type":"mqtt-broker","name":"Localhost","broker":"localhost","port":"1883","clientid":"","usetls":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"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","disabled":false,"hidden":false}]

```

the payload of the mqtt message should have the format

```auto
[{"Choice 1":"1"},{"Choice 2":"2"},{"Choice 3":"3"}]

```

Or others as descrided in the nodes help info.

---

<div class="post-metadata">

**Author:** ![nocsspecop](https://avatars.discourse-cdn.com/v4/letter/n/3bc359/32.png) [@nocsspecop](https://discourse.nodered.org/u/nocsspecop)\
**Post date:** [27 August 2021 19:49 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/7 "2021-08-27T19:49:47Z")

</div>

Thank you so much! It worked!  
Thank you also for the flow example, I wouldn't have been able to create the correct node-red flow.

---

<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:** [26 October 2021 19:50 UTC](https://discourse.nodered.org/t/populate-dropdown-from-mqtt/50281/8 "2021-10-26T19:50:12Z")

</div>

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