UI dropdown - set preselected option

#1

Is it possible to set an option for a dropdown (I mean as default, before the user interaction) ? Would be also possible to put a checkmark to mark the actually selected option, when clicking on the dropdown and showing all possible options?

0 Likes

#2

To preselect an option for the user you could set an inject node to trigger on startup with the payload of the value you wish to set it as.

0 Likes

#3

Yes - as per the info box -

1 Like

#4

Thank you for the information.

Actually my dropdown options look like this:

var dropdownOptions = [{"Option1":"0"}, {"Option2":"1"}, {"Option3":"2"},{"Option4":"3"},{"Option5":"4"}]

Would be possible to see as dropdown options the strings ("Option1", "Option2",...), and to get the as dropdown output the selected option as a number (for instance if "Option3" selected to get the number 2 as output). The default preselected option should also be set by number (for instance 4 for "Option5").

0 Likes

#5

errr yes that is exactly what happens...

[{"id":"e340a2.aae4bf6","type":"inject","z":"db8bd33.4e7c83","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":180,"wires":[["ce922a46.4b6878"]]},{"id":"ed7de142.26c35","type":"ui_dropdown","z":"db8bd33.4e7c83","name":"","label":"","tooltip":"","place":"Select option","group":"f27d9792.709888","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":550,"y":180,"wires":[[]]},{"id":"ce922a46.4b6878","type":"function","z":"db8bd33.4e7c83","name":"","func":"msg.options = [{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":180,"wires":[["ed7de142.26c35"]]},{"id":"f27d9792.709888","type":"ui_group","name":"Group 1","tab":"e930e09f.cf58","order":1,"disp":true,"width":6},{"id":"e930e09f.cf58","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":1}]
0 Likes

#6

Indeed, thanks!
Is it possible to get in the ui-dropdown output besides the selected value (4) also the corresponding label text ("Option5") ?

0 Likes

#7

that's not the way an html select works... but you know what you set them to so you can hold that information in context if you like and look it up.

0 Likes

#8

I hoped that it is not necessary to use the flow context for that :slightly_smiling_face:...

0 Likes

#9

What about checking if the dropdown selection has changed ? Do I also need to store in a context the last selected option?

0 Likes

#10

You don't have to make the selected value 5 - you could make it "Option4" if you wanted so you would know immediately (or say "4,Option5" and split on comma later... )

well it only gets triggered if it changes.. so up to you.

0 Likes

#11

Ok, thanks.
Can the size of the window with the dropdown options be set?
I would like to increase the number of the visible dropdown options. In my sample I have 7 options and I get only 5 displayed in the dropdown, for the last 2 I have to scroll.

0 Likes