Automatic Data Display in Node-RED Dropdown Node

Dashboard
1

image
image1122×431 78 KB

image

In my Node-RED project, I'm using a dropdown node, and I want to bind the content of this dropdown to MQTT incoming values. Additionally, I want the dropdown content to be automatically updated when the page is loaded. How can I achieve this?

My current flow looks like this:

MQTT incoming data updates the dropdown content.
However, when the page is refreshed or opened, the dropdown content is empty, and the user needs to refresh the dropdown to fetch MQTT data again.
How can I overcome this issue? Do you have any suggestions?

Thank you!

2

use the ui_control to trigger flows when a user opens the dashboard.

Doesnt the built-in help show you how to populate the dropdown via a msg?

3

When I press dropdown, I want it to load the latest data into this dropdown by bringing the headers on the server back up to date dynamically with mqtt data and dynamicly update dropdown members, actualy what i am looking for

4

Unfortunately, that sentence doe not actually make a lot (of technical) sense.

That is not (easily) possible since dropdowns are typically loaded before display. What you are asking here is for a client side thing (the dropdown) to POST a request to Node-RED (the server), get new data, send it to the client side, update the internal list THEN display it to the user.

What headers?

Sorry, no clue what you mean here

5

if you have update dropdown listview with code, im so happy if you can share, so i can make a trigger to update list

6

I dont have dashboard installed but as I said, doesnt the built in help show you how to update the dropdown list at runtime?

7

sadly couldnt find

8

could not find the help panel?

image

It states:

The Options may be configured by inputting msg.options containing an array. If just text then the value will be the same as the label, otherwise you can specify both by using an object of "label":"value" pairs :

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

9

msg.options = [{"Option1":"0"}, {"Option2":"1"}, {"Option3":"2"},{"Option4":"3"},{"Option5":"4"}]
msg.payload = 4;
return msg;

this is updates the dropdown, thanks you friend,

now i need how to update msg.options with mqtt income value?

10

what does the MQTT data look like?

11

actually i can manage with same format, when text incomes ok, but after mqtt data same data got problem very strange

[{"id":"e340a2.aae4bf6","type":"inject","z":"a61d2e077965cf5c","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":500,"wires":[["ce922a46.4b6878"]]},{"id":"ed7de142.26c35","type":"ui_dropdown","z":"a61d2e077965cf5c","name":"","label":"","tooltip":"","place":"Select option","group":"69517c1c6c854f74","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","topicType":"str","className":"","x":590,"y":500,"wires":[[]]},{"id":"ce922a46.4b6878","type":"function","z":"a61d2e077965cf5c","name":"","func":"msg.options = [{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":500,"wires":[["ed7de142.26c35"]]},{"id":"5ed5562bdcd119a9","type":"inject","z":"a61d2e077965cf5c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":200,"y":580,"wires":[["2e2694b90dda8be5"]]},{"id":"afc329bca9de3f5d","type":"ui_dropdown","z":"a61d2e077965cf5c","name":"","label":"","tooltip":"","place":"Select option","group":"69517c1c6c854f74","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","topicType":"str","className":"","x":680,"y":580,"wires":[[]]},{"id":"2e2694b90dda8be5","type":"function","z":"a61d2e077965cf5c","name":"","func":"var mqttData =msg.payload;  //[{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\n // MQTT ile gelen veriyi al\n\n\n\nmsg.options = mqttData\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":640,"wires":[["afc329bca9de3f5d","4d4e7ab9e428fdd2"]]},{"id":"be1f2eb4e8332be2","type":"mqtt in","z":"a61d2e077965cf5c","name":"","topic":"are","qos":"2","datatype":"auto","broker":"d1deac92e1a41b17","nl":false,"rap":true,"rh":0,"inputs":0,"x":230,"y":660,"wires":[["2e2694b90dda8be5"]]},{"id":"4d4e7ab9e428fdd2","type":"debug","z":"a61d2e077965cf5c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":520,"y":760,"wires":[]},{"id":"69517c1c6c854f74","type":"ui_group","name":"Nem","tab":"d106a5d5f8f40b57","order":1,"disp":true,"width":"4","collapse":false,"className":""},{"id":"d1deac92e1a41b17","type":"mqtt-broker","name":"","broker":"40.87.141.219","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"d106a5d5f8f40b57","type":"ui_tab","name":"202-A AREYFields AI","icon":"settings_cell","order":1,"disabled":false,"hidden":false}]
12

I cannot help if you dont show me.

At a guess, you are seeing a long JSON string?

You likely need to parse the JSON to an object.
image

13

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