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?
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.
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").
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}]
1 Like
Indeed, thanks!
Is it possible to get in the ui-dropdown output besides the selected value (4) also the corresponding label text ("Option5") ?
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.
I hoped that it is not necessary to use the flow context for that 
...
What about checking if the dropdown selection has changed ? Do I also need to store in a context the last selected option?
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.
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.
Do i understand correct that it is not possible to show a value before clicking the dropdown box?
I use it for editing some values so a value needs to be loaded as the settings is before changing
you can inject a value to preselect an option if you like.
a now i understand! what a amazing piece is Node red! Really love it! Thanks!
I need help with this dropdown list.
I use this component to update my data in the table.
So the way I send the json "options" is an array in the format:
"Field_id": 11
"Field": value
being an example:
and code:
[{"id":"f99afabc09e9ddd6","type":"debug","z":"ea86445f05051d5d","name":"debug 11","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1100,"y":700,"wires":[]},{"id":"11a36b7f7efcdc6c","type":"change","z":"ea86445f05051d5d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":840,"wires":[["dc4025e64d7b0a9f","f99afabc09e9ddd6"]]},{"id":"58c33f8480d4d339","type":"inject","z":"ea86445f05051d5d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":840,"wires":[["06efef27d001a1c2"]]},{"id":"cffcd7f5b4032649","type":"debug","z":"ea86445f05051d5d","name":"debug 12","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1100,"y":860,"wires":[]},{"id":"66fbc1ee45a2e531","type":"change","z":"ea86445f05051d5d","name":"bck - change","rules":[{"t":"set","p":"options","pt":"msg","to":"$$.payload.$merge([{$.Equipe: {\"nEquipe\":$.nEquipe, \"Equipe\":$.Equipe}}])","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1330,"y":980,"wires":[[]]},{"id":"059f04f0839c5d5a","type":"group","z":"ea86445f05051d5d","name":"Insert Row","style":{"label":true,"stroke":"#0070c0","fill":"#bfdbef"},"nodes":["8757bcd1fc3cb715","8a4d2e4459a0b06e","acce5b075c104af8","167c0a8b5cd79911","aaaf375cf8695f44","ed7226ddb2937935","f7cecf442f2f57d9","376305b879dfdf48","c605872d817b45c7","973ee8ceb21e35b7","f53971e4134c376d","06efef27d001a1c2","dc4025e64d7b0a9f","3ca031c663b3cb8f"],"x":34,"y":339,"w":1152,"h":222},{"id":"4639c7fae2510b5a","type":"subflow","name":"exec_BD","info":"","category":"","in":[{"x":80,"y":100,"wires":[{"id":"8cc0b55b7d0743c0"}]}],"out":[{"x":1020,"y":100,"wires":[{"id":"4135b832b386a610","port":0}]}],"env":[],"meta":{},"color":"#DDAA99","status":{"x":1020,"y":200,"wires":[{"id":"84933fc7168ae2b4","port":0}]}},{"id":"8cc0b55b7d0743c0","type":"change","z":"4639c7fae2510b5a","name":"copy flow/global to msg","rules":[{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"payload.ip","pt":"msg","to":"#:(persistent)::IP_vGlobalBD","tot":"global"},{"t":"set","p":"payload.porta","pt":"msg","to":"#:(persistent)::Porta_vGlobalBD","tot":"global"},{"t":"set","p":"payload.usuario","pt":"msg","to":"#:(persistent)::Usuario_vGlobalBD","tot":"global"},{"t":"set","p":"payload.senha","pt":"msg","to":"#:(persistent)::Senha_vGlobalBD","tot":"global"},{"t":"set","p":"payload.nomeBD","pt":"msg","to":"#:(persistent)::NomeBD_vGlobalBD","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":100,"wires":[["effa65099dd2a525"]]},{"id":"4135b832b386a610","type":"mysql2","z":"4639c7fae2510b5a","name":"","server":"","bind":"","topic":"","x":760,"y":100,"wires":[[]]},{"id":"effa65099dd2a525","type":"function","z":"4639c7fae2510b5a","name":"prep_MQTT_Conn","func":"\nconst ip = msg.payload.ip\nconst porta = msg.payload.porta\nconst usuario = msg.payload.usuario\nconst senha = msg.payload.senha\nconst nomeBD = msg.payload.nomeBD\n\nmsg.server = {\n \"host\": ip,\n \"port\": porta,\n \"username\": usuario,\n \"password\": senha,\n \"db\": nomeBD\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":100,"wires":[["4135b832b386a610"]]},{"id":"eb96b8b79efaea17","type":"change","z":"4639c7fae2510b5a","name":"","rules":[{"t":"set","p":"server","pt":"msg","to":"{'host': $globalContext('IP_vGlobalBD'),\t 'port': $globalContext('Porta_vGlobalBD'),\t 'username': $globalContext('Usuario_vGlobalBD'),\t 'password': $globalContext('Senha_vGlobalBD'),\t 'bd': \"TelemetriaEnervision\"\t }","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":260,"wires":[[]]},{"id":"4a50ea77c5d0ed5b","type":"comment","z":"4639c7fae2510b5a","name":"Quem sabe futuro usar esse Change","info":"Não consegui fazer funcionar com o mysql2, ele diz que o nome do banco de dados não está selecionado.","x":320,"y":220,"wires":[]},{"id":"84933fc7168ae2b4","type":"status","z":"4639c7fae2510b5a","name":"","scope":null,"x":840,"y":200,"wires":[[]]},{"id":"1a924288b2bd59bd","type":"comment","z":"4639c7fae2510b5a","name":"Variaveis Globais, com as informações do BD","info":"As informações sobre a conexão ao Banco de dados estão nas variaveis globais do banco de dados.","x":350,"y":60,"wires":[]},{"id":"8757bcd1fc3cb715","type":"ui_text_input","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","label":"Mergulhador","tooltip":"","group":"972474baadf22d9f","order":3,"width":5,"height":1,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":910,"y":380,"wires":[["167c0a8b5cd79911"]]},{"id":"8a4d2e4459a0b06e","type":"ui_button","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","group":"972474baadf22d9f","order":5,"width":2,"height":1,"passthru":false,"label":"Inserir","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":110,"y":380,"wires":[["aaaf375cf8695f44"]]},{"id":"acce5b075c104af8","type":"function","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"f_SQL","func":"let vMergulhador = msg.payload\nlet nEquipe = msg.nEquipe\n\n\nmsg.topic = \"Insert INTO Mergulhador (Mergulhador, nEquipe) Values ('\" + vMergulhador + \"', \" + nEquipe + \")\";\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":470,"y":440,"wires":[["376305b879dfdf48"]]},{"id":"167c0a8b5cd79911","type":"change","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","rules":[{"t":"set","p":"vMergulhador","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":440,"wires":[[]]},{"id":"aaaf375cf8695f44","type":"change","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"vMergulhador","tot":"flow"},{"t":"set","p":"nEquipe","pt":"msg","to":"vnEquipe","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":380,"wires":[["ed7226ddb2937935","acce5b075c104af8"]]},{"id":"ed7226ddb2937935","type":"change","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":380,"wires":[["8757bcd1fc3cb715"]]},{"id":"f7cecf442f2f57d9","type":"link out","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"link out 1","mode":"link","links":["6c44656e0b3661a7"],"x":725,"y":440,"wires":[]},{"id":"376305b879dfdf48","type":"subflow:4639c7fae2510b5a","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","x":600,"y":440,"wires":[["f7cecf442f2f57d9"]]},{"id":"c605872d817b45c7","type":"link in","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"link in 18","links":["ca339f798545c65c"],"x":85,"y":520,"wires":[["973ee8ceb21e35b7"]]},{"id":"973ee8ceb21e35b7","type":"function","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"fSQL","func":"msg.topic = \"SELECT * FROM Equipe;\"\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":290,"y":520,"wires":[["f53971e4134c376d"]]},{"id":"f53971e4134c376d","type":"subflow:4639c7fae2510b5a","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","x":440,"y":520,"wires":[["06efef27d001a1c2"]]},{"id":"06efef27d001a1c2","type":"change","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"change","rules":[{"t":"set","p":"options","pt":"msg","to":"$$.payload.$merge([{$.Equipe: {\"nEquipe\":$.nEquipe, \"Equipe\":$.Equipe}}])","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":520,"wires":[["dc4025e64d7b0a9f","cffcd7f5b4032649"]]},{"id":"dc4025e64d7b0a9f","type":"ui_dropdown","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"cbo_Equipe","label":"Equipe","tooltip":"","place":"Escolha","group":"972474baadf22d9f","order":4,"width":9,"height":1,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":830,"y":520,"wires":[["3ca031c663b3cb8f","f99afabc09e9ddd6"]]},{"id":"3ca031c663b3cb8f","type":"change","z":"ea86445f05051d5d","g":"059f04f0839c5d5a","name":"","rules":[{"t":"set","p":"vnEquipe","pt":"flow","to":"payload.nEquipe","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1070,"y":520,"wires":[[]]},{"id":"972474baadf22d9f","type":"ui_group","name":"","tab":"657fd39515811ee7","order":1,"disp":true,"width":19,"collapse":false,"className":""},{"id":"657fd39515811ee7","type":"ui_tab","name":"Mergulhadores","icon":"directions_walk","order":5,"disabled":false,"hidden":false},{"id":"7ce02d9c4803025d","type":"group","z":"ea86445f05051d5d","name":"Delete Row","style":{"stroke":"#6f2fa0","fill":"#b797cf","label":true},"nodes":["af7bf3fc03fb7e93","2b15dec6311c7133","2565aba27e676ca7","d69a495595da61b6","36fe10cfb5cc1aa5","fb87d887dab4684e","0d5b1f2fdf096be4"],"x":44,"y":599,"w":852,"h":202},{"id":"af7bf3fc03fb7e93","type":"link out","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"link out 30","mode":"link","links":["6c44656e0b3661a7"],"x":855,"y":760,"wires":[]},{"id":"2b15dec6311c7133","type":"http in","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"Modificar","url":"/ui/modificarMergulhador","method":"get","upload":false,"swaggerDoc":"","x":130,"y":720,"wires":[["0d5b1f2fdf096be4"]]},{"id":"2565aba27e676ca7","type":"comment","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"Existe um fluxo para campo modificado","info":"","x":600,"y":640,"wires":[]},{"id":"d69a495595da61b6","type":"change","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"Mergulhador","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0].Mergulhador","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":700,"y":760,"wires":[["8757bcd1fc3cb715"]]},{"id":"36fe10cfb5cc1aa5","type":"change","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"nEquipe","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0].nEquipe","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":690,"y":720,"wires":[["dc4025e64d7b0a9f"]]},{"id":"fb87d887dab4684e","type":"subflow:4639c7fae2510b5a","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"","x":340,"y":740,"wires":[["36fe10cfb5cc1aa5","d69a495595da61b6"]]},{"id":"0d5b1f2fdf096be4","type":"function","z":"ea86445f05051d5d","g":"7ce02d9c4803025d","name":"f_SQL","func":"\nmsg.topic = \"Select * from Mergulhador Where nMergulhador = \" + msg.payload.nMergulhador ;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":680,"wires":[["fb87d887dab4684e"]]}]
My real need is to show the items in that dropdown and pre-select a certain item from the list.
This is because it is actually an update of a table.
I'm lost on how to do this in json.
or some other possible way.
This option only works if it's simple.
With array I was completely lost.
