Hi everyone.
I would like to add a radio button or something similar to my node red ui.
Something where you have multiple options to choose from but can only select 1 at a time.
Something like this:
Thanks everyone
Questions like this will be better asked on the Node-RED discord, where a larger group of people can help rather than here on the FlowForge Specific site.
When asking please be clear, do you mean when using the Node-RED Dashboard UI or are you trying to develop a custom node and want to include this in it’s configuration dialogue.
Hi Ben.
I mean the Node-RED Dashboard UI.
Thanks
Hi @Marius - I don’t believe there is a Radio Group available in Dashboard 1.0 unfortunately. Checkboxes are possible within a ui-form, but appreciate that’s multiple select.
We do have Radio Buttons planned for Dashboard 2.0 though: Radio Button Group · Issue #128 · flowforge/flowforge-nr-dashboard · GitHub and they should be added fairly soon
1 Like
Hello
I can’t see a simple way to add in a true radio button list to Dashboard. You could string together some switches then update the state of each when any single one is moved. This gives the same interaction options but requires some wiring in your flow to make it work. I’d not recommend this approach as it’s complex to maintain but it does seem to work from my testing.
[{"id":"ef54fc4a249f02e0","type":"group","z":"908deea30ff8748b","name":"Example of using switched to deliver radio buttons in Dashboard.","style":{"label":true},"nodes":["97b19e37a529092d","b961fb1b18678309","819110685ef0e933","4679255db4572f61","41df6e254ffefc02","9c4290546eb149d6","1d0962fb403ef407","743ead1113cab8ce","f7d461d7e2eb7407","7c52352bc54294e8","e588e1c580d64998","27532690043c2ab8","fd6ad6fa8093265a","efa9b78725ef4a32","4299d87136fcf225","20ab6fb0e545d36a"],"x":114,"y":99,"w":1392,"h":282},{"id":"97b19e37a529092d","type":"ui_switch","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"","label":"Option 1","tooltip":"","group":"fb2a600f0755140a","order":1,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":900,"y":200,"wires":[["4679255db4572f61"]]},{"id":"b961fb1b18678309","type":"ui_switch","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"","label":"Option 2","tooltip":"","group":"fb2a600f0755140a","order":2,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":900,"y":240,"wires":[["9c4290546eb149d6"]]},{"id":"819110685ef0e933","type":"ui_switch","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"","label":"Option 3","tooltip":"","group":"fb2a600f0755140a","order":3,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":900,"y":280,"wires":[["1d0962fb403ef407"]]},{"id":"4679255db4572f61","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"payload = 1","rules":[{"t":"set","p":"payload","pt":"msg","to":"1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1050,"y":200,"wires":[["41df6e254ffefc02","f7d461d7e2eb7407"]]},{"id":"41df6e254ffefc02","type":"debug","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1400,"y":200,"wires":[]},{"id":"9c4290546eb149d6","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"payload = 2","rules":[{"t":"set","p":"payload","pt":"msg","to":"2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1050,"y":240,"wires":[["41df6e254ffefc02","f7d461d7e2eb7407"]]},{"id":"1d0962fb403ef407","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"payload = 3","rules":[{"t":"set","p":"payload","pt":"msg","to":"3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1050,"y":280,"wires":[["41df6e254ffefc02","f7d461d7e2eb7407"]]},{"id":"743ead1113cab8ce","type":"switch","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"2","vt":"str"},{"t":"eq","v":"3","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":250,"y":240,"wires":[["e588e1c580d64998","efa9b78725ef4a32"],["27532690043c2ab8","4299d87136fcf225"],["fd6ad6fa8093265a","20ab6fb0e545d36a"]]},{"id":"f7d461d7e2eb7407","type":"link out","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"link out 1","mode":"link","links":["7c52352bc54294e8"],"x":1355,"y":280,"wires":[]},{"id":"7c52352bc54294e8","type":"link in","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"link in 1","links":["f7d461d7e2eb7407"],"x":155,"y":240,"wires":[["743ead1113cab8ce"]]},{"id":"e588e1c580d64998","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"2 & 3 = false","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":140,"wires":[["b961fb1b18678309","819110685ef0e933"]]},{"id":"27532690043c2ab8","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"1 & 3 = false","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":220,"wires":[["97b19e37a529092d","819110685ef0e933"]]},{"id":"fd6ad6fa8093265a","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"1 & 2 = false","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":300,"wires":[["97b19e37a529092d","b961fb1b18678309"]]},{"id":"efa9b78725ef4a32","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"1 = true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":180,"wires":[["97b19e37a529092d"]]},{"id":"4299d87136fcf225","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"2 = true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":260,"wires":[["b961fb1b18678309"]]},{"id":"20ab6fb0e545d36a","type":"change","z":"908deea30ff8748b","g":"ef54fc4a249f02e0","name":"3 = true","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":340,"wires":[["819110685ef0e933"]]},{"id":"fb2a600f0755140a","type":"ui_group","name":"Default","tab":"4e10c2777e8c98be","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"4e10c2777e8c98be","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
FYI - I’ve just shipped Radio Buttons to Dashboard 2.0 in the latest 0.2.0 release (Release Notes)
2 Likes
Until Dashboard 2.0 is available, you can use a ui-template node with HTML such as the following:
<div>
<input type="radio" id="one" name="radio1" value="one"> Radio 1<br>
<input type="radio" id="two" name="radio1" value="two"> Radio 2
</div>
