# Ui From Node - Insert Elements from Payload
**URL:** https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562
**Category:** Dashboard
**Created:** [5 July 2020 16:47 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562 "2020-07-05T16:47:35Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [5 July 2020 16:47 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/1 "2020-07-05T16:47:36Z")
I am working on a Master settings file that will contain all the settings that I use within my home automation. The idea is to have the csv file with all the settings that I use and access them from the global data. I also have a Form node in the Ui that I am able to edit the settings and update. But now I want to take it a step further.
Currently, I have a Form node that relates to the Object that is retrieved from the CSV file but that means that I will have to have a from the node for every Object with the description that relates to the item.
Is there a way that the elements within the form can be passed through the payload of a message? I can then have one form node with a selection that will populate the form. I have seen that I could be done via the Template node but I have not found an example that I could work from.
Any help or redirection will be appreciated. 🙂
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [5 July 2020 18:35 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/2 "2020-07-05T18:35:00Z")
You could use a dashboard dropdown to make a selection to fill the form with the desired data.
---
### Author:  [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [6 July 2020 02:24 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/3 "2020-07-06T02:24:45Z")
That is what I am currently doing.
The problem is that I am confined by the set fields within the form node.
Example :
The incoming payload looks like this :
```auto
Device,var1,var2,var3,var4,var5,var6,var7,var8
Kitchen Audio,600,5:15,7:30,"1,2,3,4,5",17:00,19:00,0,0
Universal,300,6:50,8:15,1,7:00,9:00,,
Holiday,1800,7:30,9:00,1,17:00,19:00,0,0
```
Var1, in this case, represents a timeout var2 - time start , var3 time stop.
In the form, I have to declare the name and the label of each field and can then only pass the data into the form with a lookup function from the dropdown.
What I would like to do is to pass the Lable, name, and type of field into the form node because should I not need the Time start variable it should not show in the form.
Here is a copy of my current flow hope this makes it a bit more clear
```auto
[{"id":"2205f596.a15eca","type":"ui_form","z":"b331f8c0.f70018","name":"","label":"Edit Device Settings","group":"e8a02bb4.bc5ea8","order":0,"width":0,"height":0,"options":[{"label":"Index","value":"loc","type":"text","required":false,"rows":null},{"label":"Device Name","value":"Device","type":"text","required":true,"rows":null},{"label":"Time Out","value":"var1","type":"text","required":true,"rows":null},{"label":"Start Time A","value":"var2","type":"text","required":true,"rows":null},{"label":"End Time A","value":"var3","type":"text","required":true,"rows":null},{"label":"Days A","value":"var4","type":"text","required":false,"rows":null},{"label":"Start Time B","value":"var5","type":"text","required":false,"rows":null},{"label":"Start Time B","value":"var6","type":"text","required":false,"rows":null},{"label":"Days B","value":"var7","type":"text","required":false,"rows":null}],"formValue":{"loc":"","Device":"","var1":"","var2":"","var3":"","var4":"","var5":"","var6":"","var7":""},"payload":"","submit":"submit","cancel":"cancel","topic":"","x":240,"y":440,"wires":[["abc35a72.91e708"]]},{"id":"5bb9090.546dff8","type":"ui_dropdown","z":"b331f8c0.f70018","name":"","label":"Select Device","tooltip":"Select to Edit","place":"","group":"5bd5d682.0011c8","order":3,"width":0,"height":0,"passthru":false,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":950,"y":360,"wires":[["d2668945.5a1d08"]]},{"id":"b6d31aed.897758","type":"link in","z":"b331f8c0.f70018","name":"Device DropDown","links":["40f219ee.ba47f8"],"x":115,"y":360,"wires":[["d9e313f0.38716"]]},{"id":"6dfc5131.23a15","type":"inject","z":"b331f8c0.f70018","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":320,"wires":[["d9e313f0.38716"]]},{"id":"35c751bf.5d973e","type":"split","z":"b331f8c0.f70018","name":"Split array","splt":"\\n","spltType":"str","arraySplt":"1","arraySpltType":"len","stream":false,"addname":"","x":370,"y":360,"wires":[["e08953ac.99a52"]]},{"id":"3594cdbf.51edf2","type":"join","z":"b331f8c0.f70018","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":600,"y":360,"wires":[["39ec45d5.42f9fa"]]},{"id":"d9e313f0.38716","type":"change","z":"b331f8c0.f70018","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"UiSettings","tot":"global"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":360,"wires":[["35c751bf.5d973e"]]},{"id":"e08953ac.99a52","type":"function","z":"b331f8c0.f70018","name":"","func":"dev = msg.payload.Device\nvar myObject = {};\nvar myVar = dev;\nmyObject[myVar] = dev;\nmsg.payload = myObject\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":360,"wires":[["3594cdbf.51edf2"]]},{"id":"39ec45d5.42f9fa","type":"change","z":"b331f8c0.f70018","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":360,"wires":[["5bb9090.546dff8"]]},{"id":"d2668945.5a1d08","type":"function","z":"b331f8c0.f70018","name":"Lookup Device","func":"function search(nameKey, myArray){\n for (var i=0; i < myArray.length; i++) {\n if (myArray[i].Device === nameKey) {\n return myArray[i];\n }\n }\n}\n\nvar array = global.get(\"UiSettings\")\nfind = msg.payload\nvar resultObject = search(find, array);\nmsg.payload = resultObject\n\nreturn msg;","outputs":1,"noerr":0,"x":1120,"y":360,"wires":[["f3640aa6.ebc7d8","2205f596.a15eca"]]},{"id":"abc35a72.91e708","type":"function","z":"b331f8c0.f70018","name":"Update Settings","func":"\n\nfunction search(nameKey, myArray){\n for (var i=0; i < myArray.length; i++) {\n if (myArray[i].Device === nameKey) {\n return i;\n }\n }\n}\n\nfunction testNumber(num){\n if (isNaN(num) === false ){\n if (num < 0){\n return \"Timeout needs larger than 0\"\n }else{\n return true\n }\n}else{\nreturn \"Timeout needs to be a number\"\n } \n}\n\nfunction testTime(varTime){\n if (varTime.includes(\":\")=== true){\n i = varTime.split(\":\")\n if (testNumber(i[0]*1) === true){ // first test the first part of time\n if ((i[0]*1) >= 0 && (i[0]*1) <= 24) {\n tm1 = true\n \n //return true\n }else{\n return \"Hours must be between 0 and 24 your value is \"+ i[0] \n }\n }else{\n return \"Hours should be a number 24 your value is \"+ i[0] \n }\n if (testNumber(i[1]*1) === true){\n if ((i[1]*1) >= 0 && (i[1]*1) <= 59) {\n tm2 = true\n //return true\n }else{\n return \"Minutes must be between 0 and 59 your value is \"+ i[1] \n }\n }else{\n return \"Minutes should be a number your value is \"+ i[1] \n } \n }else{\n return \"Time format should be hh:mm your value is \"+ varTime\n }\n if (tm1 === true && tm2 === true){\n \n return true\n }\n \n \n}\n\nfunction getHour(varTime){\n i = varTime.split(\":\")\n return parseInt(i[0])\n}\n\n\nvar array = global.get(\"UiSettings\")\nvar find = msg.payload.Device\nvar i = search(find, array); // the index of the Array\n\n// 1 Test if time value is a number\nif ( testNumber(msg.payload.var1*1) === true){\n //array[i].var1 =msg.payload.var1 \n vr1 = true\n \n //return [msg,null]\n}else{\n msg.payload = testNumber(msg.payload.var1*1)\n return [null,msg]\n}\n\n// 2 Check start Time A value is a time or not\n\nif (testTime(msg.payload.var2)=== true){\n //array[i].var2 =msg.payload.var2\n vr2 = true\n \n}else{\n msg.payload = testTime(msg.payload.var2)\n return [null,msg] \n}\n\n\n// 3 Check is value is a time or not\nif (testTime(msg.payload.var3)=== true){\n //array[i].var3 =msg.payload.var3\n vr3 = true\n}else{\n msg.payload = testTime(msg.payload.var3)\n return [null,msg] \n}\n\n// 4 Check is value is a time or not\nif (testTime(msg.payload.var5)=== true){\n //array[i].var3 =msg.payload.var3\n vr5 = true\n}else{\n msg.payload = testTime(msg.payload.var5)\n return [null,msg] \n}\n\n// 4 Check is value is a time or not\nif (testTime(msg.payload.var6)=== true){\n //array[i].var3 =msg.payload.var3\n vr6 = true\n}else{\n msg.payload = testTime(msg.payload.var6)\n return [null,msg] \n}\nvar arrays = global.get(\"UiSettings\")\n//var finds = msg.payload.Device\nvar is = search(find, arrays); // the index of the Array\n\nif (vr1 === true && vr2 === true && vr3 === true && vr5 === true && vr6 === true){\n \nStartHA = getHour(msg.payload.var2)\nEndHA = getHour(msg.payload.var3)\nStartHB = getHour(msg.payload.var5)\nEndHB = getHour(msg.payload.var6)\n //msg.payload = StartHA //+ \":\"+EndHB\n //msg.payload = \"Data Updated\"\n //return msg \n \nif (StartHA < EndHA ){\n if (StartHB < EndHB ){\n arrays[is].var1 =msg.payload.var1 \n arrays[is].var2 =msg.payload.var2 \n arrays[is].var3 =msg.payload.var3 \n arrays[is].var5 =msg.payload.var5 \n arrays[is].var6 =msg.payload.var6 \n arrays[is].var7 = 0\n arrays[is].var8 = 0\n //msg.payload = StartHB //+ \":\"+EndHB\n msg.payload = \"Data Updated\"\n return [msg,null] \n }else{\n arrays[is].var1 =msg.payload.var1 \n arrays[is].var2 =msg.payload.var2 \n arrays[is].var3 =msg.payload.var3 \n arrays[is].var5 =msg.payload.var5 \n arrays[is].var6 =msg.payload.var6 \n arrays[is].var7 = 0\n arrays[is].var8 = 1\n //msg.payload = StartHB //+ \":\"+EndHB\n msg.payload = \"Data Updated\"\n return [msg,null] \n }\n }else{\n arrays[is].var1 =msg.payload.var1 \n arrays[is].var2 =msg.payload.var2 \n arrays[is].var3 =msg.payload.var3 \n arrays[is].var5 =msg.payload.var5 \n arrays[is].var6 =msg.payload.var6 \n arrays[is].var7 = 1\n arrays[is].var8 = 0\n //msg.payload = StartHB //+ \":\"+EndHB\n msg.payload = \"Data Updated\"\n return [msg,null] \n }\n \n\n}\n\n\n","outputs":2,"noerr":0,"x":440,"y":440,"wires":[["284d2d3e.8d7202"],["e7cf5dc7.b93e8"]]},{"id":"284d2d3e.8d7202","type":"ui_toast","z":"b331f8c0.f70018","position":"dialog","displayTime":"5","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"topic":"","name":"","x":660,"y":420,"wires":[["5563c1ae.0191a"]]},{"id":"5563c1ae.0191a","type":"function","z":"b331f8c0.f70018","name":"Clear Settings","func":"msg.payload = {\n Device:'',\n var1:'',\n var2:'',\n var3:'',\n var4:'',\n var5:'',\n var6:'',\n var7:''\n}\nreturn msg;","outputs":1,"noerr":0,"x":830,"y":420,"wires":[["7de8b7ef.1d9508","2205f596.a15eca"]]},{"id":"e7cf5dc7.b93e8","type":"ui_toast","z":"b331f8c0.f70018","position":"dialog","displayTime":"5","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"topic":"","name":"","x":660,"y":460,"wires":[[]]},{"id":"7de8b7ef.1d9508","type":"link out","z":"b331f8c0.f70018","name":"Update Settings","links":["e2b3d178.e3633"],"x":955,"y":420,"wires":[]},{"id":"e8a02bb4.bc5ea8","type":"ui_group","z":"","name":"Middle","tab":"9b6eeaaa.3a0958","order":2,"disp":true,"width":"6","collapse":false},{"id":"5bd5d682.0011c8","type":"ui_group","z":"","name":"Left","tab":"9b6eeaaa.3a0958","order":1,"disp":true,"width":"6","collapse":false},{"id":"9b6eeaaa.3a0958","type":"ui_tab","z":"","name":"Settings","icon":"dashboard","disabled":false,"hidden":false}]
```
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [6 July 2020 08:11 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/4 "2020-07-06T08:11:48Z")
if your intention is to dynamically create the form fields etc, then no I don't think that is possible. You can define the form and all its fields and then pre-populate it with values, but you can't just dynamically hide fields etc. You could probably do that with a ui\_template as you can then control all the elements within.
---
### Author:  [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [6 July 2020 13:24 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/5 "2020-07-06T13:24:09Z")
The more I play with the date the more begins to dawn on me that I am going to be out of luck on this one. Do any one know of an example flow for a template node that could achieve this?
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [6 July 2020 14:24 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/6 "2020-07-06T14:24:52Z")
As your flow exists, I can't test it since there in nothing to initialize the global.
Ignoring that, if I fill in the form and submit it, an error is thrown in the 'Update Settings `function` node most likely because the global is undefined.
---
### Author:  [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [7 July 2020 03:24 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/7 "2020-07-07T03:24:51Z")
The example does work as but you will need the global variable to populate the form. My idea / question was if the form node node can be changed dynamically but it seems like wont be as easy as I though it might be.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [6 August 2020 03:32 UTC](https://discourse.nodered.org/t/ui-from-node-insert-elements-from-payload/29562/8 "2020-08-06T03:32:51Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.