# Creating a custom UI Form without using built in dashboard form
**URL:** https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [13 July 2023 12:41 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790 "2023-07-13T12:41:06Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [13 July 2023 12:41 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/1 "2023-07-13T12:41:06Z")
hello everyone, i want to create a form without using the ui form node because it doesnt have a dropdown menu as an element to choose from, so I want to create a form with text input nodes, dropdown menu nodes and checkboxes. I'm not sure how to make a submit button (or a function node) that takes the values inserted in those fields and makes an object with labels and values as a key/value field. This is where I am so far. Any help is much appreciated!
```auto
[
{
"id": "31003a427e9aa358",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"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": 450,
"y": 200,
"wires": [
[
"668135a38f68a318"
]
]
},
{
"id": "aa601e30df230ef8",
"type": "ui_text_input",
"z": "b9f9fd4c9675bc1a",
"name": "projet",
"label": "project",
"tooltip": "",
"group": "3cd226df1a4e0126",
"order": 1,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "projet",
"sendOnBlur": true,
"className": "",
"topicType": "str",
"x": 450,
"y": 120,
"wires": [
[]
]
},
{
"id": "60984213cab528f3",
"type": "ui_text_input",
"z": "b9f9fd4c9675bc1a",
"name": "",
"label": "Action. ex: CREATE, DELETE ...",
"tooltip": "",
"group": "3cd226df1a4e0126",
"order": 2,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "topic",
"sendOnBlur": true,
"className": "",
"topicType": "msg",
"x": 530,
"y": 160,
"wires": [
[]
]
},
{
"id": "78d2258df2a4f2e1",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"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": 450,
"y": 240,
"wires": [
[
"668135a38f68a318"
]
]
},
{
"id": "bcb015ea1ca914e5",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"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": 450,
"y": 280,
"wires": [
[
"668135a38f68a318"
]
]
},
{
"id": "67646bf263bfe3a8",
"type": "ui_button",
"z": "b9f9fd4c9675bc1a",
"name": "Submit",
"group": "3cd226df1a4e0126",
"order": 9,
"width": 0,
"height": 0,
"passthru": true,
"label": "button",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "playlist_add",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 260,
"y": 240,
"wires": [
[
"31003a427e9aa358",
"78d2258df2a4f2e1",
"bcb015ea1ca914e5"
]
]
},
{
"id": "ef9c9bf6507362c7",
"type": "debug",
"z": "b9f9fd4c9675bc1a",
"name": "debug 12",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 860,
"y": 300,
"wires": []
},
{
"id": "c5007d170aa2fdd9",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"name": "",
"label": "Image",
"tooltip": "",
"place": "Select option",
"group": "3cd226df1a4e0126",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"multiple": false,
"options": [
{
"label": "zos-build-618168",
"value": "zos-build-618168",
"type": "str"
},
{
"label": "zos-build-8463641",
"value": "zos-build-8463641",
"type": "str"
}
],
"payload": "",
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 450,
"y": 320,
"wires": [
[]
]
},
{
"id": "b9f92909c289f752",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"name": "",
"label": "Instance",
"tooltip": "",
"place": "Select option",
"group": "3cd226df1a4e0126",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"multiple": false,
"options": [
{
"label": "01::zos-build-1::Exited",
"value": "01::zos-build-1::Exited",
"type": "str"
},
{
"label": "02::zos-build-2::Exited",
"value": "02::zos-build-2::Exited",
"type": "str"
},
{
"label": "0::zos-build-3::Running",
"value": "0::zos-build-3::Running",
"type": "str"
}
],
"payload": "",
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 460,
"y": 360,
"wires": [
[]
]
},
{
"id": "09b8737c4a34f121",
"type": "ui_dropdown",
"z": "b9f9fd4c9675bc1a",
"name": "",
"label": "Pick",
"tooltip": "",
"place": "Select option",
"group": "3cd226df1a4e0126",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"multiple": true,
"options": [
{
"label": "DB2",
"value": "DB2",
"type": "str"
},
{
"label": "CICS",
"value": "CICS",
"type": "str"
},
{
"label": "MQ",
"value": "MQ",
"type": "str"
}
],
"payload": "",
"topic": "topic",
"topicType": "msg",
"className": "",
"x": 450,
"y": 400,
"wires": [
[]
]
},
{
"id": "668135a38f68a318",
"type": "join",
"z": "b9f9fd4c9675bc1a",
"name": "",
"mode": "custom",
"build": "array",
"property": "payload",
"propertyType": "msg",
"key": "topic",
"joiner": "\\n",
"joinerType": "str",
"accumulate": false,
"timeout": "",
"count": "3",
"reduceRight": false,
"reduceExp": "",
"reduceInit": "",
"reduceInitType": "",
"reduceFixup": "",
"x": 710,
"y": 220,
"wires": [
[
"ef9c9bf6507362c7"
]
]
},
{
"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
}
]
```
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [13 July 2023 13:03 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/2 "2023-07-13T13:03:05Z")
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.
```auto
[{"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](https://discourse.nodered.org/t/fr-dashboard-form-to-include-drop-down/67312/8) on resetting the dropdowns
---
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [13 July 2023 13:21 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/3 "2023-07-13T13:21:41Z")
Thanks man.
One more thing, is there a way to make it so that the cancel button clears out the values from the inputs outside of the form, and in case thats not possible, is there a way to make another button (different than the cancel button) that can do that, clearing the values in the input fields inside the for as well as the ones outside of it.
But I guess in that case the cancel button would be useless, since it only clears out the ones inside the form, which means the best solution would be to use individual input forms for the while thing and 2 independent buttons for submission and clearing the fields.
Again, thanks for the help!
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [13 July 2023 13:40 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/4 "2023-07-13T13:40:14Z")
Remove the form cancel and add a button to reset form and dropdowns
e.g
```auto
[{"id":"fd67569de042a30d","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Ram","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":6,"width":0,"height":0,"passthru":false,"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":330,"y":3580,"wires":[["93b04141b3dcbe69"]]},{"id":"93b04141b3dcbe69","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.ram","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":3580,"wires":[["2ce10ab9904cc7b2"]]},{"id":"2ce10ab9904cc7b2","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":530,"y":3720,"wires":[["877685d0d24e093a"]]},{"id":"9ade39eb6dd9c364","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.date","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":3660,"wires":[["2ce10ab9904cc7b2"]]},{"id":"3da125e6d8ef00c6","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":365,"y":3720,"wires":[["2ce10ab9904cc7b2","6fce7b344bacba4a"]],"l":false},{"id":"b628125223af8ade","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload.cpu","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":3620,"wires":[["2ce10ab9904cc7b2"]]},{"id":"877685d0d24e093a","type":"switch","z":"b9860b4b9de8c8da","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"form","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":670,"y":3720,"wires":[["bbb3c61962b6e86c"]]},{"id":"5ea74018a92cbc9f","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Date","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":7,"width":0,"height":0,"passthru":false,"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":330,"y":3660,"wires":[["9ade39eb6dd9c364"]]},{"id":"6fce7b344bacba4a","type":"ui_form","z":"b9860b4b9de8c8da","name":"","label":"","group":"f0701e9c6d17cdba","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":"","topic":"form","topicType":"str","splitLayout":"","className":"","x":280,"y":3720,"wires":[["3da125e6d8ef00c6"]]},{"id":"2c7d2920c0ee7cc1","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"CPU","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":5,"width":0,"height":0,"passthru":false,"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":330,"y":3620,"wires":[["b628125223af8ade"]]},{"id":"bbb3c61962b6e86c","type":"debug","z":"b9860b4b9de8c8da","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":860,"y":3720,"wires":[]},{"id":"b14bdd287dc46aed","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"f0701e9c6d17cdba","order":4,"width":0,"height":0,"passthru":false,"label":"reset","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":3820,"wires":[["8ae9271c1a6fb0b4","4dff6b0292369e2a","fd67569de042a30d","2c7d2920c0ee7cc1","5ea74018a92cbc9f"]]},{"id":"8ae9271c1a6fb0b4","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"name\":null,\"age\":null}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":3840,"wires":[["6fce7b344bacba4a"]]},{"id":"4dff6b0292369e2a","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"reset","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":3800,"wires":[["2ce10ab9904cc7b2"]]},{"id":"f0701e9c6d17cdba","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}]
```
[edit] added msg.reset to reset the join to.
---
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [13 July 2023 13:44 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/5 "2023-07-13T13:44:59Z")
Thanks for the help!
---
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [25 July 2023 09:05 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/6 "2023-07-25T09:05:43Z")
Hello, is it possible to replace the ui form with a simple button since i dont need the text fields inside the form, all I need is a button that, when clicked, triggers the merge node to send out the complete payload as an object. Thank you in advance.
PS: I am going to use many buttons in the future each with a different outcome.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [25 July 2023 12:35 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/7 "2023-07-25T12:35:50Z")
Yes add button where form is, add topics to button and dropdowns, remove change nodes after dropdowns. Configure join to join as key value object, with count of 4 and every subsequent and delete button property after switch node.
```auto
[{"id":"fd67569de042a30d","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Ram","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":6,"width":0,"height":0,"passthru":false,"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":"ram","topicType":"str","className":"","x":210,"y":2240,"wires":[["2ce10ab9904cc7b2"]]},{"id":"b14bdd287dc46aed","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"f0701e9c6d17cdba","order":4,"width":0,"height":0,"passthru":false,"label":"reset","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":210,"y":2460,"wires":[["4dff6b0292369e2a","fd67569de042a30d","2c7d2920c0ee7cc1","5ea74018a92cbc9f"]]},{"id":"2ce10ab9904cc7b2","type":"join","z":"b9860b4b9de8c8da","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"4","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":410,"y":2380,"wires":[["877685d0d24e093a"]]},{"id":"4dff6b0292369e2a","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"reset","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":2460,"wires":[["2ce10ab9904cc7b2"]]},{"id":"2c7d2920c0ee7cc1","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"CPU","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":5,"width":0,"height":0,"passthru":false,"multiple":true,"options":[{"label":"1","value":"1","type":"str"},{"label":"2","value":"2","type":"str"},{"label":"3","value":"3","type":"str"}],"payload":"","topic":"cpu","topicType":"str","className":"","x":210,"y":2280,"wires":[["2ce10ab9904cc7b2"]]},{"id":"5ea74018a92cbc9f","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"Date","tooltip":"","place":"Select option","group":"f0701e9c6d17cdba","order":7,"width":0,"height":0,"passthru":false,"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":"date","topicType":"str","className":"","x":210,"y":2320,"wires":[["2ce10ab9904cc7b2"]]},{"id":"13407c917eb9c4b9","type":"ui_button","z":"b9860b4b9de8c8da","name":"","group":"f0701e9c6d17cdba","order":4,"width":0,"height":0,"passthru":false,"label":"sub","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"str","topic":"submit","topicType":"str","x":270,"y":2380,"wires":[["2ce10ab9904cc7b2"]]},{"id":"877685d0d24e093a","type":"switch","z":"b9860b4b9de8c8da","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"submit","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":550,"y":2380,"wires":[["07c655b6b8ec9514"]]},{"id":"07c655b6b8ec9514","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"delete","p":"payload.submit","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":2380,"wires":[["bbb3c61962b6e86c"]]},{"id":"bbb3c61962b6e86c","type":"debug","z":"b9860b4b9de8c8da","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":740,"y":2380,"wires":[]},{"id":"f0701e9c6d17cdba","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}]
```
---
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [25 July 2023 14:50 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/8 "2023-07-25T14:50:29Z")
Thanks a lot.
This is unrelated but, do you happen to know how i can implement authentication for dashboard in a non static way (hardcoding users into settings.js file)? The users will be redirected to a login page where they must enter their credentials, then they will be redirected to the page requested initially, and I plan to store the users info in a table in mysql.
If this isn't feasible, can you give me any info about how i can implement something remotely similar?
Thanks in advance.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [25 July 2023 15:37 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/9 "2023-07-25T15:37:50Z")
Short answer possible but not an easy task, and possible very fragile. Dashboard is also coming to end of life
This is a question deserves its own topic, as there are members with more experience in this. More info from you would also be required. Your set up? Where are these users? Is this internet or intranet etc.
---
### Author:  [@mehdichbani](https://discourse.nodered.org/u/mehdichbani)
#### Post date: [28 July 2023 08:36 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/10 "2023-07-28T08:36:48Z")
Why is dashboard coming to end of life?
Users info will be stored in a local MySQL Database. I only want something very simple at first and dynamic, since I don't want to hardcode users into settings file under httpNodeAuth.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [28 July 2023 10:40 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/11 "2023-07-28T10:40:36Z")
Dashboard is based on [Angularjs 1](https://duckduckgo.com/?q=angular+js+1++support&ia=qa), A new dashboard is in development i believe.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [28 July 2023 14:04 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/12 "2023-07-28T14:04:03Z")
See [Dashboard 2.0 Pre-Alpha Available](https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142)
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 August 2023 14:04 UTC](https://discourse.nodered.org/t/creating-a-custom-ui-form-without-using-built-in-dashboard-form/79790/13 "2023-08-11T14:04:04Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.