I am trying to pass on the contents of a msg.payload to build a dynamic table and have done fair bit of research before posting this finally in despair.
there are several threads on this in the forum , but i am unable to adapt any solution for my case, due to my limited or no knowledge of html/javascript.
I also tried the no-code /low code solution of uibuilder and pestered many users but i could not get it to work.
In the final attempt, I am here asking for a simple solution, where two of my sections are working, i just want to convert any one of them into executing a dynamic solution.
In the below flow,
- ONOFF Table (Flow) is using flow.context and executing a table, but the number of rows are static. There are two separate data sets to just prove that the template node is reading flow.context and executing as per requirement but is not dynamic in number of rows.
- ONOFF Table (array) is using array data within the template node (hard coded) and is working, the rows counts are dynamic, but the data is static.
- the third one i am attempting to use scope. watch etc. .but not going anywhere. this node is abandoned and incorrectly setup.
- I have included the flow with sample data (they are in the change nodes) if anyone is ready to help. (and am looking forward to, as if I continue on my own, my head is going to explode)
[{"id":"f1b687be593e0af4","type":"group","z":"3a20af9f0b232322","name":"","style":{"stroke":"#0070c0","fill":"#ffff7f","label":true,"color":"#001f60"},"nodes":["513e2c56d20e1ba9","45895bea0b5250ad","35a101f65656bd73","f4c73d7b2ab25e77","59f976f5b0017020","3b4b37ca3dae80e3","f5e11346630d19f1","47744976110a3809","ca790e475454ed18","b04aa79ad17dc65c","337a47a08d2f4aac","eb1f046a0b0e7e28","bbf83130807ac50f","047a71dcd5a71a2f","81165822cc122998"],"x":154,"y":1539,"w":892,"h":282},{"id":"513e2c56d20e1ba9","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"ONOFF TABLE (flow)","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<body>\n<div>\nTABLE-1\n</div> \n<table border = \"solid white 2 px\" border-collapse = \"separate\" cellpadding=\"1px\"> \n\n \n <tr><td colspan =\"100%\">THIS DATA IS GENERATED FROM FLOW CONTEXT</td></tr>\n <tr><td colspan =\"100%\">Flow context has 10 rows, but there are only 4 rows here because of hard coding</td></tr> \n \n \n <tr><td width= \"150px\"></td><td width= \"150px\"></td><td width= \"60px\"></td><td width= \"60px\"></td><td width= \"60px\"></td></tr>\n <tr bgcolor = 'blue'>\n <th>FROM TIME</th><th>TO TIME</th><th>DURATION</th><th>State</th><th>Machine</th></tr>\n\n <tr> <td>{{flow.one[0].FROM}}</td><td>{{flow.one[0].To}}</td><td>{{flow.one[0].DUR}}</td><td>{{flow.one[0].state}}</td><td>{{flow.one[0].mcn}}</td></tr>\n <tr> <td>{{flow.one[1].FROM}}</td><td>{{flow.one[1].To}}</td><td>{{flow.one[1].DUR}}</td><td>{{flow.one[1].state}}</td><td>{{flow.one[1].mcn}}</td></tr>\n <tr> <td>{{flow.one[2].FROM}}</td><td>{{flow.one[2].To}}</td><td>{{flow.one[2].DUR}}</td><td>{{flow.one[2].state}}</td><td>{{flow.one[2].mcn}}</td></tr>\n <tr> <td>{{flow.one[3].FROM}}</td><td>{{flow.one[3].To}}</td><td>{{flow.one[3].DUR}}</td><td>{{flow.one[3].state}}</td><td>{{flow.one[3].mcn}}</td></tr>\n\n</table>\n</body>","output":"str","x":760,"y":1620,"wires":[["45895bea0b5250ad","35a101f65656bd73"]]},{"id":"45895bea0b5250ad","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"986fd8031d6f53ed","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1620,"wires":[[]]},{"id":"35a101f65656bd73","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"ONOFF TABLE (array)","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n\n<div>\n\tTABLE-2\n</div>\n\n<table border = \"solid white 1px\" border-collapse = \"collapse\" >\n \n\t<tr><td colspan =\"100%\">THIS DATA IS GENERATED FROM AN ARRAY HARDCODED INTO TEMPLATE NODE</td></tr>\n <tr><td colspan =\"100%\"></td></tr> \n\n\t<tr bgcolor = 'red'>\n <th>Machine</th>\n <th>Start-Time</th>\n <th>End-Time</th>\n <th>Duration</th>\n <th>Status</th>\n </tr>\n\n <tbody id=\"myTable\">\n \n </tbody>\n</table>\n\n\n<script>\n\t\nvar myArray = [\n\t{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:22\",\"DUR\":23,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 22:22\",\"To\":\"2024-10-28 22:23\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 22:23\",\"To\":\"2024-10-28 22:52\",\"DUR\":29,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 22:52\",\"To\":\"2024-10-28 22:53\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 22:53\",\"To\":\"2024-10-28 23:38\",\"DUR\":85,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:38\",\"To\":\"2024-10-28 23:41\",\"DUR\":3,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:41\",\"To\":\"2024-10-28 23:42\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:47\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-28 23:47\",\"To\":\"2024-10-29 01:37\",\"DUR\":7790,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-29 01:37\",\"To\":\"2024-10-29 01:47\",\"DUR\":10,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-29 01:47\",\"To\":\"2024-10-29 02:37\",\"DUR\":90,\"mcn\":\"m03\",\"state\":\"OFF\"},\n\t{\"FROM\":\"2024-10-29 02:37\",\"To\":\"2024-10-29 02:48\",\"DUR\":11,\"mcn\":\"m03\",\"state\":\"ON\"},\n\t{\"FROM\":\"2024-10-29 02:48\",\"To\":\"2024-10-29 02:49\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"}\n]\n\n\n\tbuildTable(myArray)\n\n\tfunction buildTable(data){\n\t\tvar table = document.getElementById('myTable')\n\n\t\tfor (var i = 0; i < data.length; i++){\n\t\t\tvar row = `<tr>\n\t\t\t\t\t\t\t<td>${data[i].mcn}</td>\n\t\t\t\t\t\t\t<td>${data[i].FROM}</td>\n\t\t\t\t\t\t\t<td>${data[i].To}</td>\n\t\t\t\t\t\t\t<td>${data[i].DUR}</td>\n\t\t\t\t\t\t\t<td>${data[i].state}</td>\n\t\t\t\t\t </tr>`\n\t\t\ttable.innerHTML += row\n\t\t}\n\t}\n\n</script>","output":"str","x":760,"y":1660,"wires":[["3b4b37ca3dae80e3"]]},{"id":"f4c73d7b2ab25e77","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":1620,"wires":[["59f976f5b0017020"]]},{"id":"59f976f5b0017020","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"One data set","rules":[{"t":"set","p":"one","pt":"flow","to":"[{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:22\",\"DUR\":23,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:22\",\"To\":\"2024-10-28 22:23\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:23\",\"To\":\"2024-10-28 22:52\",\"DUR\":29,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:52\",\"To\":\"2024-10-28 22:53\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:53\",\"To\":\"2024-10-28 23:38\",\"DUR\":85,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:38\",\"To\":\"2024-10-28 23:41\",\"DUR\":3,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:41\",\"To\":\"2024-10-28 23:42\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m03\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:47\",\"DUR\":2,\"mcn\":\"m03\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":1620,"wires":[["513e2c56d20e1ba9"]]},{"id":"3b4b37ca3dae80e3","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"7854688a9892977d","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1660,"wires":[[]]},{"id":"f5e11346630d19f1","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":1660,"wires":[["47744976110a3809"]]},{"id":"47744976110a3809","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"Another data set","rules":[{"t":"set","p":"one","pt":"flow","to":"[{\"FROM\":\"2024-10-28 21:59\",\"To\":\"2024-10-28 22:25\",\"DUR\":26,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 22:25\",\"To\":\"2024-10-28 22:30\",\"DUR\":5,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 22:30\",\"To\":\"2024-10-28 23:19\",\"DUR\":89,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:19\",\"To\":\"2024-10-28 23:36\",\"DUR\":17,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:36\",\"To\":\"2024-10-28 23:42\",\"DUR\":6,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:42\",\"To\":\"2024-10-28 23:43\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:43\",\"To\":\"2024-10-28 23:45\",\"DUR\":2,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:45\",\"To\":\"2024-10-28 23:46\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"ON\"},{\"FROM\":\"2024-10-28 23:46\",\"To\":\"2024-10-28 23:47\",\"DUR\":1,\"mcn\":\"m04\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-28 23:47\",\"To\":\"2024-10-28 23:50\",\"DUR\":3,\"mcn\":\"m04\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":1660,"wires":[["513e2c56d20e1ba9"]]},{"id":"ca790e475454ed18","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"5","height":"1","passthru":false,"label":"Load Data Set One (m03)","tooltip":"","color":"black","bgcolor":"white","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":290,"y":1580,"wires":[["59f976f5b0017020"]]},{"id":"b04aa79ad17dc65c","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"5","height":"1","passthru":false,"label":"Load Data Set Two (m04)","tooltip":"","color":"","bgcolor":"blue","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":290,"y":1700,"wires":[["47744976110a3809"]]},{"id":"337a47a08d2f4aac","type":"inject","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":1740,"wires":[["eb1f046a0b0e7e28"]]},{"id":"eb1f046a0b0e7e28","type":"change","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"data in payload","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"FROM\":\"2024-10-29 06:00\",\"To\":\"2024-10-29 07:57\",\"DUR\":157,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 07:57\",\"To\":\"2024-10-29 08:57\",\"DUR\":100,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 08:57\",\"To\":\"2024-10-29 09:02\",\"DUR\":45,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:02\",\"To\":\"2024-10-29 09:11\",\"DUR\":9,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 09:11\",\"To\":\"2024-10-29 09:12\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:12\",\"To\":\"2024-10-29 09:37\",\"DUR\":25,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 09:37\",\"To\":\"2024-10-29 09:48\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 09:48\",\"To\":\"2024-10-29 10:14\",\"DUR\":66,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:14\",\"To\":\"2024-10-29 10:16\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:16\",\"To\":\"2024-10-29 10:20\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:20\",\"To\":\"2024-10-29 10:21\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:21\",\"To\":\"2024-10-29 10:23\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 10:23\",\"To\":\"2024-10-29 10:27\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 10:27\",\"To\":\"2024-10-29 11:23\",\"DUR\":96,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:23\",\"To\":\"2024-10-29 11:25\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:25\",\"To\":\"2024-10-29 11:36\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:36\",\"To\":\"2024-10-29 11:37\",\"DUR\":1,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:37\",\"To\":\"2024-10-29 11:39\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:39\",\"To\":\"2024-10-29 11:43\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:43\",\"To\":\"2024-10-29 11:47\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 11:47\",\"To\":\"2024-10-29 11:51\",\"DUR\":4,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 11:51\",\"To\":\"2024-10-29 12:19\",\"DUR\":68,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 12:19\",\"To\":\"2024-10-29 12:30\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 12:30\",\"To\":\"2024-10-29 12:32\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"ON\"},{\"FROM\":\"2024-10-29 12:32\",\"To\":\"2024-10-29 12:34\",\"DUR\":2,\"mcn\":\"m08\",\"state\":\"OFF\"},{\"FROM\":\"2024-10-29 12:34\",\"To\":\"2024-10-29 12:45\",\"DUR\":11,\"mcn\":\"m08\",\"state\":\"ON\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":1740,"wires":[["bbf83130807ac50f"]]},{"id":"bbf83130807ac50f","type":"template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"JUST A TRIAL - NOT WORKING ","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n\n<div>\n\tTABLE-3\n</div>\n\n<table border = \"solid white 1px\" border-collapse = \"collapse\" >\n \n\t<tr><td colspan =\"100%\">TRYING HERE TO GENERATE DYNAMIC TABLE USING msg.payload INPUT</td></tr>\n <tr><td colspan =\"100%\"></td></tr> \n\n\t<tr bgcolor = 'green'>\n <th>Machine</th>\n <th>Start-Time</th>\n <th>End-Time</th>\n <th>Duration</th>\n <th>Status</th>\n </tr>\n\n <tbody id=\"myTable\">\n \n </tbody>\n</table>\n\n\n<script>\n\t\nvar myArray = [\n\n]\n\n\tbuildTable(myArray)\n\n\tfunction buildTable(data){\n\t\tvar table = document.getElementById('myTable')\n\n\t\tfor (var i = 0; i < data.length; i++){\n\t\t\tvar row = `<tr>\n\t\t\t\t\t\t\t<td>${data[i].mcn}</td>\n\t\t\t\t\t\t\t<td>${data[i].FROM}</td>\n\t\t\t\t\t\t\t<td>${data[i].To}</td>\n\t\t\t\t\t\t\t<td>${data[i].DUR}</td>\n\t\t\t\t\t\t\t<td>${data[i].state}</td>\n\t\t\t\t\t </tr>`\n\t\t\ttable.innerHTML += row\n\t\t}\n\t}\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload) {\n items = msg.payload// example [{\"x\":67,\"y\":12},{\"x\":12,\"y\":30}]\n // Get the container element\n let container = document.getElementById('container');\n\n // Loop through the array and create divs\n items.forEach(item => {\n // Create a new div element\n let div = document.createElement('div');\n \n // Set the class of the div\n div.className = 'dot';\n \n // Set the position of the div\n div.style.left = `${item.x}px`;\n div.style.top = `${item.y}px`;\n \n // Append the div to the container\n container.appendChild(div);\n });\n }\n });\n })(scope);\n\n</script>","output":"str","x":750,"y":1740,"wires":[["047a71dcd5a71a2f"]]},{"id":"047a71dcd5a71a2f","type":"ui_template","z":"3a20af9f0b232322","g":"f1b687be593e0af4","group":"3232542c7d0a8f20","name":"","order":10,"width":"20","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1740,"wires":[[]]},{"id":"81165822cc122998","type":"ui_button","z":"3a20af9f0b232322","g":"f1b687be593e0af4","name":"","group":"986fd8031d6f53ed","order":1,"width":"7","height":"1","passthru":false,"label":"Load Data into Table-3 (msg.payload)","tooltip":"","color":"","bgcolor":"green","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":1780,"wires":[["eb1f046a0b0e7e28"]]},{"id":"986fd8031d6f53ed","type":"ui_group","name":"Demo","tab":"6c38d6937a4ace93","order":1,"disp":false,"width":"20","collapse":false,"className":""},{"id":"7854688a9892977d","type":"ui_group","name":"Demo1","tab":"6c38d6937a4ace93","order":2,"disp":false,"width":"20","collapse":false,"className":""},{"id":"3232542c7d0a8f20","type":"ui_group","name":"Demo2","tab":"6c38d6937a4ace93","order":3,"disp":false,"width":"20","collapse":false,"className":""},{"id":"6c38d6937a4ace93","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
