Populate Dropdown

Vendors FlowFuse
1

Hi,

dashboard 2.0 : 1.12.4

I am working on migrating an apps to dashboard 2.0 . I am testing the dropdown ui_update for dynamicly update the widget.

ui_update.label : works
ui_update_options: nothing display or object Object

It is probably a little detail I missed but I tried to figure it out without success

Print Screen for ui_update_label, abd ui_update_options result
image

here my values:
options : format values used with dashboard 1.0 -
ui_update_options : Same data as in options with dashboard 2.0 payload name

This data format works well with dashboard 1.0 ( the msg.options). I simple use a change node to copy my query result from msg.options to msg.ui_update_options.
image

Thanks in advance

Yves

2

Could you share a couple of example options, or the value of msg.ui_update.options please?

3

Hi Joe,

Sorry, I forget to included it , and thanks for your tutorial videos, they are very instructive ..

image

image

best
Yves

4

The options array needs to be in the format:

[{
    value: "value-here"
    label: "Label Here"
}, { ... }]

or

["Option 1", "Option 2", ...]

(see docs)

Currently, you have the keys of the object for each type, and then I'm not sure what the value is links too here.

I can make that more explicit in the documentation though, as it's not 100% clear.

If you're open to using the function node, then you could do msg.ui_update.options = msg.ui_update.options.map((b) => {return Object.keys(b)[0] }) to extract a single array of each boat type

5

Hum .. your way is much cleaner, but I believe it is what I am doing

Actual process

*/ MYSQL Query result */ This one is on boat name -

[
{"id":6,"name":"Free at Last1"},
{"id":73,"name":"ISOLA"}
]

//Reformat array to work with dropdown
var reformattedArray = msg.payload.map(obj =>{
//declare the reformatted object
var rObj = {};
rObj[obj.name] = obj.id;
return rObj;
});

//Dashboard version 1
msg.options = reformattedArray;

//dashboard version 2
msg.ui_update.options= reformattedArray;
return msg;

/* re-arranged data */

[{"Free at Last1":6},{"ISOLA":73}]

I see -- I must keep value: and label: -- I tought is was only to show the value type ..

so, my data should look like this:
[
{
"value": "1",
"label": "Free at Last1"},
{ "value": "73",
"label": "ISOLA" }]

6

In your screenshot of the options data, this isn't the format - can't debug the problems in detail at the moment, but this is definitely the issue

7

If your SQL was to select id as value and name as label, there would be no need to reformat the data.

8

it is working well thanks a lot for your help.

Steve didn't think about to do it in my SQL query, it is a very good idea.. and will avoid any data manipulations ...
Thanks a lot and have a good wk

Yves