Dashboard ui_dropdown to set label:value for two pairs from injected message or any variable Example

1,435 views
Skip to first unread message

GraphSam

unread,
Feb 5, 2017, 12:44:42 PM2/5/17
to Node-RED UI

Hello,

This is my first time to use ui_dropdown box in Node-RED dashboard.
I would like to know how to set the label:value pairs for ui_dropdown box using variables to set the name of the label to be displayed on the dashboard-ui. Appreciate any working example.

This is my flow below:

[{"id":"df36250a.24edf8","type":"inject","z":"a7434a59.f40b08","name":"Inject at startup","topic":"","payload":"Test Item","payloadType":"str","repeat":"","crontab":"","once":true,"x":186.1999969482422,"y":208.1999969482422,"wires":[["b1a4481a.961ac","ae7fe349.fa0e98"]]},{"id":"ae7fe349.fa0e98","type":"function","z":"a7434a59.f40b08","name":"Parse and Set","func":"\nvar str = msg.payload;\nvar ids = [\n    {label:str, value:\"1\"}, \n    {\"Item 2\":\"2\"}];\nmsg.options = ids;\n\nreturn msg;\n\n","outputs":1,"noerr":0,"x":381.4000244140625,"y":208.7999725341797,"wires":[["91747c4f.8b4af","49753ab2.7193d4"]]},{"id":"49753ab2.7193d4","type":"ui_dropdown","z":"a7434a59.f40b08","name":"","label":"Available Items","group":"254ffdfa.460c9a","order":0,"width":0,"height":0,"passthru":true,"options":[{"label":"Default Item","value":0,"type":"num"}],"payload":"","topic":"","x":570.6900024414062,"y":205.719970703125,"wires":[["cd39dd.ccf8762","3929e89.e598f18"]]},{"id":"3929e89.e598f18","type":"debug","z":"a7434a59.f40b08","name":"","active":true,"console":"false","complete":"true","x":749.2000122070312,"y":205.1999969482422,"wires":[]},{"id":"254ffdfa.460c9a","type":"ui_group","z":"","name":"Default","tab":"596850f8.12a6f","disp":true,"width":"6"},{"id":"596850f8.12a6f","type":"ui_tab","z":"","name":"testing","icon":"dashboard"}]

Thanks in advance,
Samy


GraphSam

unread,
Feb 5, 2017, 6:27:28 PM2/5/17
to Node-RED UI
This is might be a bug in Node-RED dashboard-ui dropdown box since I can't set the label this way either.
msg.payload = "Item 0";
var str = msg.payload;
msgData.options = {str:"0", "Item 1":"1"};

The menu items will be displayed in the dashboard UI as:

str
Item 1

I have expected the items to be:

Item 0
Item 1

I am using Node-RED v0.16.0

Thanks for any example or suggestion.

Nick O'Leary

unread,
Feb 5, 2017, 6:42:06 PM2/5/17
to Node-RED UI
Hi,

In JavaScript, you cannot use the value of a variable as the name of an object key when creating an object in a single statement. In your example, your are creating a property called 'str' - the fact you also have a variable called str is irrelevant.

You can still achieve what you want, it just takes a couple steps. First you create an empty object, then you assign individual properties of the object using the square-bracket format for referencing object properties:

var str = "Item 0";
msgData.options = {};
msgData.options[str] = "0";



Nick



--
You received this message because you are subscribed to the Google Groups "Node-RED UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red-contrib-ui+unsub...@googlegroups.com.
To post to this group, send email to node-red-contrib-ui@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red-contrib-ui/c36ac265-2dcc-4d01-8302-9ca0dfe87877%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

GraphSam

unread,
Feb 5, 2017, 7:24:09 PM2/5/17
to Node-RED UI
Hi Nick!

Thanks for your early response.
I have tried it but it doesn't work. I got error Invalid Options.

var str = "Item 0";
msgData.options = {};
msgData.options[str] = "0";
msgData.options["00-08-00-4A-05-00"] = "2";

The results:

node: 341464a1.ce984cmsg : string[20]
"ERR: Invalid Options"

GraphSam

unread,
Feb 5, 2017, 7:27:38 PM2/5/17
to Node-RED UI
I commented out all lines and left just the first two lines but it still gives me the same error.

var str = "Item 0";
msgData.options = {};

Nick O'Leary

unread,
Feb 5, 2017, 7:34:46 PM2/5/17
to GraphSam, Node-RED UI

Sorry, forgot to point out the docs say msg.options should be an array of either strings or option objects:

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

var str = "Item 0";

msgData.options = [ ];
var opt1 = {};
opt1[str] = "0";
msgData.options.push(opt1);
msgData.options.push({"00-08-00-4A-05-00":"2"});

Nick


To unsubscribe from this group and stop receiving emails from it, send an email to node-red-contri...@googlegroups.com.
To post to this group, send email to node-red-...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Node-RED UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red-contri...@googlegroups.com.
To post to this group, send email to node-red-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red-contrib-ui/3be8f152-85fa-4a63-b477-1c97736dbd1c%40googlegroups.com.

GraphSam

unread,
Feb 5, 2017, 7:47:52 PM2/5/17
to Node-RED UI, sama...@gmail.com
Thanks a lot ....it's working ... excellent for your contribution!

What I have noticed in v0.16.0 that the UI is somehow slow, I don't know it might be my system is causing it to be slow. 

cheers,
Samy
To unsubscribe from this group and stop receiving emails from it, send an email to node-red-contrib-ui+unsub...@googlegroups.com.
To post to this group, send email to node-red-contrib-ui@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Node-RED UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red-contrib-ui+unsub...@googlegroups.com.
To post to this group, send email to node-red-contrib-ui@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages