Ui From Node - Insert Elements from Payload

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. :slight_smile:

You could use a dashboard dropdown to make a selection to fill the form with the desired data.

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 :

Kitchen Audio,600,5:15,7:30,"1,2,3,4,5",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

[{"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}]

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.

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?

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.

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.