Dashboard 2 - Dynamic Dropdown

Dashboard
1

Hi,

I am stuck trying to populate a ui-dropdown from dashboard 2.0 dynamically. I tried sending just an array and an array of {"value":..., "label": ...} in msg.options but nothing seems to work. Any ideas why?

The documentation suggests that this is how it should work: Dropdown ui-dropdown | Node-RED Dashboard 2.0

[{"id":"fe8daff436de03d8","type":"ui-dropdown","z":"b595025349e89c28","group":"5c66023267e5559e","name":"OSC Command","label":"Select Option:","tooltip":"","order":0,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"old","value":"old","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":500,"y":820,"wires":[["5fb82b6f1107296e"]]},{"id":"5fb82b6f1107296e","type":"debug","z":"b595025349e89c28","name":"debug 11","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":820,"wires":[]},{"id":"fa282a5e4e2736f3","type":"inject","z":"b595025349e89c28","name":"","props":[{"p":"options","v":"[{\"value\":1,\"label\":\"One\"},{\"value\":2,\"label\":\"Two\"}]","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":250,"y":860,"wires":[["fe8daff436de03d8"]]},{"id":"3345f57cb0d1ef81","type":"ui-button","z":"b595025349e89c28","group":"5c66023267e5559e","name":"","label":"button","order":0,"width":0,"height":0,"passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[{\"value\":1,\"label\":\"One\"},{\"value\":2,\"label\":\"Two\"}]","payloadType":"json","topic":"topic","topicType":"msg","x":90,"y":800,"wires":[["d1b0a575a1683efa"]]},{"id":"d1b0a575a1683efa","type":"change","z":"b595025349e89c28","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":800,"wires":[["fe8daff436de03d8"]]},{"id":"5c66023267e5559e","type":"ui-group","name":"OSC","page":"91018fa40823ab8b","width":"6","height":"1","order":-1,"disp":true},{"id":"91018fa40823ab8b","type":"ui-page","name":"Usecases","ui":"a579bdc3f73a801f","path":"/","layout":"grid","theme":"24b08f838675cf9c","order":-1},{"id":"a579bdc3f73a801f","type":"ui-base","name":"Usecases","path":"/dashboard"},{"id":"24b08f838675cf9c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

Best
Marten

2

I have a function node prior to the Dropdown ui-dropdown

msg.options = [
    {
        value: 2700,
        label: "Warm White"
    },
    {
        value: 3000,
        label: "Soft White"
    },
    {
        value: 4000,
        label: "Bright White"
    },
    {
        value: 6500,
        label: "Day Light"
    }
]
return msg

Apologies, re-read and it seems you already tried this, so sorry no clue as to why it doesn't work for you

3

Though this is documented I am not certain that it has been implemented yet, I have added a question about it on the relevant issue.

4

It does work. Connect these nodes to a dropdown node as an example. To only thing I have noticed is that if an option is selected when a new set of options are loaded the selected option is still in the selected box until the dropdown is activated and a new option selected.

[{"id":"f9846d3950ef8306","type":"inject","z":"506727cd93754bdb","name":"Inject","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Options","x":170,"y":340,"wires":[["3a1f7a565c93068d"]]},{"id":"3a1f7a565c93068d","type":"function","z":"506727cd93754bdb","name":"Set Dropdown \\n Options","func":"msg.options = [\n    {\n        value: 2700,\n        label: \"Warm White\"\n    },\n    {\n        value: 3000,\n        label: \"Soft White\"\n    },\n    {\n        value: 4000,\n        label: \"Bright White\"\n    },\n    {\n        value: 6500,\n        label: \"Day Light\"\n    }\n]\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":340,"wires":[["9bdc3b69e6246eec"]]},{"id":"584238178938fd14","type":"inject","z":"506727cd93754bdb","name":"Inject Option","props":[{"p":"topic","vt":"str"},{"p":"options","v":"[{\"value\":\"1\",\"label\":\"Option 1\"},{\"value\":\"2\",\"label\":\"Option 21\"},{\"value\":\"3\",\"label\":\"Option 3\"}]","vt":"json"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"Options","x":370,"y":400,"wires":[["9bdc3b69e6246eec"]]}]
5

Definitely should work this way, and I know I have test coverage for this too, so it should be functional.

Can dive deeper tomorrow

6

Actually it is working for me too, silly typo on my part.

7

@Buckskin The new option can be shown by adding a msg.payload value to the new option. For example, you can use msg.payload=2700, which will show the new option.

@joepavitt There is a minor bug: In dynamic dropdown, when user selects a dropdown item, the msg.options is also passed through to the dropdown output. This should be removed to improve efficiency. We could have thousands of items in the msg.options.

[{"id":"f9846d3950ef8306","type":"inject","z":"c689a2b989f10d2e","name":"Inject","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"Options","x":470,"y":1120,"wires":[["3a1f7a565c93068d"]]},{"id":"3a1f7a565c93068d","type":"function","z":"c689a2b989f10d2e","name":"Set Dropdown option 1","func":"msg.options = [\n    {\n        value: 2700,\n        label: \"Warm White\"\n    },\n    {\n        value: 3000,\n        label: \"Soft White\"\n    },\n    {\n        value: 4000,\n        label: \"Bright White\"\n    },\n    {\n        value: 6500,\n        label: \"Day Light\"\n    }\n]\nmsg.payload = 3000;\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":700,"y":1120,"wires":[["5406f8b212556adf"]]},{"id":"5406f8b212556adf","type":"ui-dropdown","z":"c689a2b989f10d2e","group":"ec377c5983068f8b","name":"","label":"Select Option:","tooltip":"","order":0,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":920,"y":1160,"wires":[["0f60e2240d04df60"]]},{"id":"0f60e2240d04df60","type":"debug","z":"c689a2b989f10d2e","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1080,"y":1160,"wires":[]},{"id":"0b9435fc9f5afc87","type":"function","z":"c689a2b989f10d2e","name":"Set Dropdown option 2","func":"msg.options = [\n    {\n        value: \"a\",\n        label: \"Option a\"\n    },\n    {\n        value: \"b\",\n        label: \"Option b\"\n    },\n]\nmsg.payload = \"a\";\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":700,"y":1220,"wires":[["5406f8b212556adf"]]},{"id":"39d8f2c6be5a633d","type":"inject","z":"c689a2b989f10d2e","name":"Inject","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Options","x":470,"y":1220,"wires":[["0b9435fc9f5afc87"]]},{"id":"ec377c5983068f8b","type":"ui-group","name":"Alarms","page":"541b0afcb626191f","width":"8","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"541b0afcb626191f","type":"ui-page","name":"Alarms","ui":"b29695b2081eca86","path":"/alarms","icon":"alarm-light","layout":"grid","theme":"0fa083067f4afa84","order":2,"className":"","visible":"true","disabled":"false"},{"id":"b29695b2081eca86","type":"ui-base","name":"server","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"0fa083067f4afa84","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
8

issue opened: msg.options persists when dropdown options are selected · Issue #602 · FlowFuse/node-red-dashboard · GitHub

9

Just tried your exact flow and it's working for me :confused:

Which version of @flowfuse/node-red-dashboard are you running?

10

Thank you all for checking this. As always, it turned out to be simple... I was still running the @flowforge package and therefore was stuck at version 0.7.... So I was under the impression that I was at the most up to date version but I wasn't. :frowning:

Thanks again!

1 Like
11

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