Creating a custom UI Form without using built in dashboard form

You could use the ui-template to create your form, using html css and javascript.
or
You could combine the dropdowns with a form
e.g.

[{"id":"31003a427e9aa358","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Ram","tooltip":"","place":"Select option","group":"3cd226df1a4e0126","order":6,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"1","value":"2","type":"str"},{"label":"2","value":"4","type":"str"},{"label":"3","value":"8","type":"str"},{"label":"16","value":"16","type":"str"},{"label":"32","value":0,"type":"num"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":190,"y":3480,"wires":[["80e2b32fbe1f08f1"]]},{"id":"80e2b32fbe1f08f1","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.ram","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":3480,"wires":[["d4debbb046f7dea0"]]},{"id":"d4debbb046f7dea0","type":"join","z":"b9860b4b9de8c8da","name":"merge","mode":"custom","build":"merged","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"5","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":390,"y":3620,"wires":[["6910cd0d476e15bd"]]},{"id":"fb7c1839573e3375","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.date","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":3560,"wires":[["d4debbb046f7dea0"]]},{"id":"6099276b58ce1478","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":225,"y":3620,"wires":[["d4debbb046f7dea0","5570195d6415ed75"]],"l":false},{"id":"b90655a73afd35ae","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.cpu","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":3520,"wires":[["d4debbb046f7dea0"]]},{"id":"6910cd0d476e15bd","type":"switch","z":"b9860b4b9de8c8da","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"form","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":530,"y":3620,"wires":[["83385b46eea3a5dc"]]},{"id":"bcb015ea1ca914e5","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Date","tooltip":"","place":"Select option","group":"3cd226df1a4e0126","order":7,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"12/2021","value":"1","type":"str"},{"label":"08/2022","value":"2","type":"str"},{"label":"19/2019","value":"3","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":190,"y":3560,"wires":[["fb7c1839573e3375"]]},{"id":"5570195d6415ed75","type":"ui_form","z":"b9860b4b9de8c8da","name":"","label":"","group":"3cd226df1a4e0126","order":14,"width":0,"height":0,"options":[{"label":"name","value":"name","type":"text","required":true,"rows":null},{"label":"age","value":"age","type":"number","required":true,"rows":null}],"formValue":{"name":"","age":""},"payload":"","submit":"submit","cancel":"cancel","topic":"form","topicType":"str","splitLayout":"","className":"","x":140,"y":3620,"wires":[["6099276b58ce1478"]]},{"id":"78d2258df2a4f2e1","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"CPU","tooltip":"","place":"Select option","group":"3cd226df1a4e0126","order":5,"width":0,"height":0,"passthru":true,"multiple":true,"options":[{"label":"1","value":"1","type":"str"},{"label":"2","value":"2","type":"str"},{"label":"3","value":"3","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":190,"y":3520,"wires":[["b90655a73afd35ae"]]},{"id":"83385b46eea3a5dc","type":"debug","z":"b9860b4b9de8c8da","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":720,"y":3620,"wires":[]},{"id":"3cd226df1a4e0126","type":"ui_group","name":"Instances ","tab":"7c447e96.4b96a","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"7c447e96.4b96a","type":"ui_tab","name":"Instances","icon":"description","order":2,"disabled":false,"hidden":false}]

more ideas here on resetting the dropdowns

1 Like