Populate the labels in a dashboard drop down menu via a message?

Is there a way to dynamically populate the labels in a dashboard drop down menu? I don't see a way to specify the number of items and the label for each item dynamically using a message in the flow.

Are you using Dashboard v1 or v2?

If you're using @flowfuse/node-red-dashboard (Dashboard 2.0) then you can find the details here:

Been away for awhile, but Manage Pallet says:

  1. node-red 3.1.0
  2. node-red-dashboard 3.6.0

I assume this is v1, but I installed node-red-dashboard via Manage Pallet

I'll take a look at v2 by visiting your link. How "compatible" is v1 and v2? If v1 features still work it'll be easy to upgrade, if nothing is the same doubt it is worth it at this time.

Looks like a major improvement, can I have both versions installed and say get v1 via the "normal" hostname:1880/ui and get v2 via say hostname:1880/uiV2?

On a scale of 1 to 10: 0 !

You can install both versions. V1 is at :1880/ui and V2 at :1880/dashboard

1 Like

OK that is good to know, my dashboard is really quite simple, mostly displaying messages from MQTT or ultimately sending messages by MQTT in response to menu selections or button presses.

Yeah, not compatable, but the samr feature set (and more) in Dashboard 2.0

We do also have a migration service available at https://flowfuse.com/product/dashboard which will cover the majority of the migration for you, but still require some manual work

1 Like

You can do this in the D1 dropdown node too. As described in the help text for the node:
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"} ]

Thanks I'll try this first, it will be easier to backport to the older systems that are still running fine but would benefit from this cosmetic upgrade.

I can't get this to be dynamic, if I put this in a function node, the dropdown populates and works as I expect when the output of the function node is wired to the input of the dropdown:
'''
var menu;
menu = [
{ "Driveway" : "0" },
{ "Garage" : "1" },
{ "Porch": "2" }
];
msg.options = menu;
return msg;
'''

But when I pass a string in via MQTT I can't get parse the string to match. The debugger shows (msg.X is the array I managed to produce), payload is the string received via MQTT message:

'''
payload: "[{"Driveway":"0"},{"Garage":"1"},{"Porch":"2"}]"
X: array[3]
0: "[{"Driveway":"0"}"
1: "{"Garage":"1"}"
2: "{"Porch":"2"}]"

options: array[3]
0: object
Driveway: "0"
1: object
Garage: 1"
2: object
Porch: "2"
'''

Somehow in seems I always end up with an array of strings instead of an array of objects.

It looks like you have used string manipulation rather than JSON parsing.

I say look because it's hard to tell from how you have posted - please use the "copy value" button so we get correctly formatted data & always put code in a code block:

getting data from node-red debug:

There’s a great page in the docs (Working with messages : Node-RED) that will explain how to use the debug panel to find the right path/value for any data item.

Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.

BX00Cy7yHi

Property formatting posted code

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

Start by setting the MQTT In node to output a Parsed JSON Object, so that it will parse the JSON string and output a javascript object. That will make life much easier.

I've got it working, What I posted was what let me prove that I could create the correct msg.options to dynamically populate the dropdown, by looking at function node msg.options vs. msg.X from the mqtt string in the debugger I hoped to get a clue as to why I couldn't create the proper msg.options from the mqtt string.

Seems the real problem was something between the chair and the keyboard :slight_smile:

I initially tried the json node, but it failed and I got nowhere with google on the error message. Turns out, one of the : in my mqtt message was a ; and that was what messed it all up, I'm about to turn 74, and just finished radiation therapy for prostate cancer (seems successful) but my eyesight ain't what it used to be, very frustrating.

It basically would have worked the first time if not for the typo :frowning:

This is the mqtt message string:
mosquitto_pub -h localhost -t dynamic -m '[{"Driveway":"0"},{"Garage":"1"},{"Porch":"2"}]'

Thanks again, your solution was the easiest for me to quickly implement, but since dashboard v1 & v2 can coexist I'll start migrating to v2 as it looks like it has some nice features, especially the layout and auto sizing.

1 Like