How to populate dashboard dropdown button dynamically

#1

Hi Guys,

Im trying to populate dynamically the dashboard dropdown button node from previous function-node. I can't find any documentation or examples that can explain how to do it!

Can somebody help me ?

Best Regards,
Alex

0 Likes

#2

The sidebar help for the dropdown node tells you how to do it:

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"} ]

0 Likes

#3

Hi Mr. knolleary!
I would like to populate using a global variable, I started to test with one global variable, as you can see bellow

image

My code inside the function (Get_GlobalValue):

var nwkList=global.get('NWKAd');
return {payload:NWKAd};

But as you can see on dropdown node above the list value is null.
Please, would you can advise me how to do it?

Best Regards,
Alex

0 Likes

#4

That should not run, it should give an error, presumably you mean return {payload: mwkList}, however, as previously pointed out it has to be in msg.options, not msg.payload.
To check the function is doing what you expect feed it into a debug node set to display the full message and check it looks right.

0 Likes

#5

Here's a piece of code I use on my Home Automation system.
It populates a dropdown from a mapping file.

[{"id":"967d496d.a17698","type":"ui_dropdown","z":"be5ff02b.4c18","name":"Data source","label":"","tooltip":"","place":"","group":"9c66415.50bbe4","order":1,"width":"4","height":"1","passthru":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"datasource","x":710,"y":200,"wires":[[]]},{"id":"ee60cd29.3d4988","type":"function","z":"be5ff02b.4c18","name":"Set-up name-value map","func":"// This mapping file uses {\"name\":\"value\"} pairs to pre-fill the drop-down widget in the dashboard\n\nmsg.payload = \n[ \n    {\"[Remove all]\":\"delete\"},\n    {\"Lounge temperature\":\"lounge/temperature\"},\n    {\"Snug temperature\":\"snug/temperature\"}, \n    {\"Studio temperature\":\"studio/temperature\"},\n    {\"Study temperature\":\"study/temperature\"},\n    {\"Rear bedroom temperature\":\"rear_bedroom/temperature\"},\n    {\"Rear bedroom humidity\":\"rear_bedroom/humidity\"},\n    {\"Rear bedroom pressure\":\"rear_bedroom/pressure\"},\n    {\"Garage temperature\":\"garage/temperature\"},\n    {\"Loft temperature\":\"loft/temperature\"}\n];\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":200,"wires":[["9cc6ed8a.a5e4e8"]]},{"id":"9cc6ed8a.a5e4e8","type":"change","z":"be5ff02b.4c18","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":200,"wires":[["967d496d.a17698"]]},{"id":"d460741f.cd63c8","type":"inject","z":"be5ff02b.4c18","name":"Trigger","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":200,"wires":[["ee60cd29.3d4988"]]},{"id":"9c66415.50bbe4","type":"ui_group","z":"","name":"Filters","tab":"412738d1.eb7ae","order":2,"disp":true,"width":"24","collapse":false},{"id":"412738d1.eb7ae","type":"ui_tab","z":"","name":"Data capture and charting","icon":"dashboard","order":10}]

Hope you find this useful.
David

0 Likes

#6

Hi Colin, thanks a lot.
Do you can explain, please, how can i change it from msg.payload to msg.option in the code?
I need to keep to use return msg?
Thanks!
Alex

0 Likes

#7

Hi dynamicdave, thanks for share it w/ me!
Would you can share the nodes that are responsible to persist the menu option in the file. I need to study more to understanding how it works!
Best Regards,
Alex

0 Likes

#8
msg.option = global.get('NWKAd');
return msg;

In fact I think you can just use a Change node for that instead, but I very rarely use global context, I always pass data with messages, so I would have to look up exactly how to do it.
Have a look at https://nodered.org/docs/user-guide/messages for help on working with messages, also look at the other guides there.

Sorry I don't understand the question.

0 Likes

#9

Hi Alex,
Have you tried-out my simple piece of code/flow???
It includes an array (like Nick suggested) and a "change" node to put things in the correct position.

0 Likes

#10

Hi Dynamicdave, I tried to use your code, but i cant understanding how can change your code for use global variable. i trying to get a dynamic value received from serial port, using the global set to save, that represent a network address, and transfer it to the menu, using global get (global.get('NWKAd').

@Colin , didn´t have success to use your suggestion, the values still arrive in the drop-down node as "undefined".
I using a input node to push my function, as i described in my initial post, with payload number equal zero. I tried also set up input node as flow w/ msg.payload or msg.option but also have not worked.

Best Regard,
Alex

0 Likes

#11

Hi @aargollo

The example Colin shared had a mistake in it. He was setting msg.option but should have been setting msg.options as per the node help.

0 Likes

#12

I changed it, but i saw in the debug node Err: invalid Options. I using inject node to push my function as you see below:

image

my function:

msg.options = global.get('NWKAd');
return msg;

image

I tested the global variable, in the same function node, to be sure that work, and I got success:

The code used to test nwkAdd:

var nwk_add=global.get('NWKAd') || 0;
msg.payload="NwkAdd "+msg.payload+" "+nwk_add;
return msg;

image

Do you have any idea how to fix it?

Best Regards,
Alex

0 Likes

#13

Step1:
change you debug to show the complete message object.

Step2: Your test shows that your drop down list only contains one value. So what do you expect it to contain? Please debug nodes along your flow to work out where the debug results are different than you suspect. (You can give your debug nodes individual names to make it easier to know which one is which)

0 Likes

#14

This will work as long as the NWKAd value in global context is in the expected formed. Looking at the help text again:

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"} ]

It expects msg.options to be an array. Your second Function shows you have a single bare value - 111148.

So the question, as @ukmoose asks, what do you want the drop down to show and how does that relate to the single value 111148?

0 Likes

#15

Hi ukmoose,
I included the names in the nodes as you advise me.
In response for your question: I will use a dynamic button to send a command dynamically, w/ nwk address received form another flow stage, I´ll include this information, available in dynamic list, in the new buffer array to send the command. I including bellow a debug information again after change to complete message as you requested me.

image

Errors:
image

Best Regards,
Alex

0 Likes

#16

Look at you debug which shows the entire message you are sending to the ActiveList
Do you see the the dropdown list values within it?

If not you are not setting the GlobalValue correctly.

0 Likes

#17

Hi ukmoose, sorry for my delay i was traveling this week.

I can´t see in the active list the my global variable, included in the options as "111148".
I think that my global variable is working, if it doesn't work I would not see the value "111148".

As you see in the screen shot bellow, with a new nwk addr = 228166, the active list show me Invalid Options.

image

0 Likes

#18

so let’s go back.

You say you want to create a dynamic list.

To do that you need to send the list items to the node as part of the message object.

Where in the message you just posted is that list?
What do you expect the values of the dynamic list to be?

0 Likes

#19

Ukmoose,
I would like to send the lists of the nwk addresses created as global variable. in the message sent the nwk address is 228166.

I would like to include in the list an array of the nwk addresses.
I had success to create a list using the method that Mr @dynamicdave said me, that uses an array as you can see below:

var nwk_add1=global.get('NWKAd') || 0;
msg.payload = 
[ 
    {"Device1": nwk_add1}

];

But I would like to compare this method w/ a options method to have sure what is the best way to implement!

Best Regard,
Alex

0 Likes

#20

So you need to set msg.options to be an array of the values for that list. Until you do that it will not work.

0 Likes