Hi.
I have a case where after user key in the inputs, the payload will be stored into database while also displayed on ui-template table. Then, user also can key in multiple inputs. My problem now is how to send the payload into the ui-template table. So, I have tried to make the payload into array so I can send it to the table, but seems not working as of now.
There has been a post some time ago where I gave this example:
[
{
"id": "a56bde124d673012",
"type": "tab",
"label": "ui-temp list",
"disabled": false,
"info": ""
},
{
"id": "8fbf6842f1528818",
"type": "ui_template",
"z": "a56bde124d673012",
"group": "c7e1043144be7729",
"name": "Content",
"order": 7,
"width": "15",
"height": "10",
"format": "\n<md-content layout=\"column\">\n <md-list>\n <md-list-item style=\"height: max-content\" ng-repeat=\"item in arrLog track by $index\">\n <div class=\"md-list-item-text\" layout=\"column\">\n <span style=\"text-decoration: underline\">{{item.label}}:</span>\n <p style=\"white-space: pre-line;\">{{item.value}}</p>\n <span style=\"height: 1em\"></span>\n </div>\n </md-list-item>\n </md-list>\n</md-content>\n\n\n<script>\n (function(scope) {\n scope.arrLog = [];\n \n //handle arriving messages\n scope.$watch('msg', function(msg) {\n\t\t\t try{\n \t\t\t switch(msg.topic) {\n \t\t\t \n \t\t\t case \"Content\":\n scope.$applyAsync(()=>{\n msg.payload.forEach((currentValue, index, arr)=>{\n scope.arrLog.push(currentValue);\n })\n });\n \t\t\t break;\n \t\t\t \n \t\t\tcase \"Clear\":\n \t\t\t scope.$applyAsync(()=>{\n \t\t\t scope.arrLog.length = 0;\n \t\t\t });\n \t\t\t break;\n\n \t default:\n \t\t\t}\n\t\t\t }catch(err){\n\t\t\t //console.error(err);\n\t\t\t }\n });\n })(scope);\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 1720,
"y": 500,
"wires": [
[]
]
},
{
"id": "2f096b8068cfbd2d",
"type": "ui_button",
"z": "a56bde124d673012",
"name": "Clear Button",
"group": "c2fc6f8ceca1aa7f",
"order": 6,
"width": "7",
"height": "1",
"passthru": false,
"label": "Clear",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-trash",
"payload": "true",
"payloadType": "bool",
"topic": "Clear",
"topicType": "str",
"x": 990,
"y": 640,
"wires": [
[
"8fbf6842f1528818",
"86056727c92d077a"
]
]
},
{
"id": "3070c17a7eed1205",
"type": "ui_button",
"z": "a56bde124d673012",
"name": "",
"group": "c2fc6f8ceca1aa7f",
"order": 4,
"width": "7",
"height": "1",
"passthru": false,
"label": "Set Content",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-play",
"payload": "true",
"payloadType": "bool",
"topic": "Content",
"topicType": "str",
"x": 990,
"y": 320,
"wires": [
[
"ab714e67bbc44e72"
]
]
},
{
"id": "ab714e67bbc44e72",
"type": "function",
"z": "a56bde124d673012",
"name": "",
"func": "msg.payload = [\n {label:'Numero de caso', value:1234567},\n {label:'URL', value:''},\n {label:'link a carpeta Gdrive', value:\"http://gdrive.com\"},\n {label:'Salida al servicio', value:\"PUBLICO\"},\n {label:'Accion de la integracion', value:\"Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer\"}\n]\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1280,
"y": 320,
"wires": [
[
"86056727c92d077a",
"8fbf6842f1528818"
]
]
},
{
"id": "86056727c92d077a",
"type": "debug",
"z": "a56bde124d673012",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1210,
"y": 500,
"wires": []
},
{
"id": "c7e1043144be7729",
"type": "ui_group",
"name": "Integracion pruebaa prueba pruebaa",
"tab": "85eef7cbe34c88d0",
"order": 1,
"disp": true,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "c2fc6f8ceca1aa7f",
"type": "ui_group",
"name": "Tools",
"tab": "85eef7cbe34c88d0",
"order": 2,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "85eef7cbe34c88d0",
"type": "ui_tab",
"name": "DEV URL Integraciones",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Perhaps it helps.
Thank you. I managed to generate the payload as an array like yours
However, on the ui template side, the payload is not shown. My ui template is like this
<style>
#history {
font-family: "Arial";
border-collapse: collapse;
width: 100%;
}
#history td, #history th {
border: 1px solid #ddd;
padding: 8px;
}
#history tr:nth-child(even){background-color: #E9ECEF;}
#history tr:hover {background-color: #E9ECEF;}
#history th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #383337;
color: white;
}
</style>
<table id="history" border="1">
<tr align="center">
<th>Name</th>
<th>ID</th>
<th>Address</th>
<th>Country</th>
<th>Occupation</th>
<th>Age</th>
</tr>
<tbody>
<tr align="center" ng-repeat="row in msg.payload">
<td ng-repeat="item in row" >{{item}}</td>
</tr>
</tbody>
</table>
I tried to modify the ng-repeat (last section), also not solved yet.
I tried this on ui template
</tr>
<tbody>
<tr align="center" ng-repeat="payload in msg.payload track by $index">
<td>{{msg.payload[0].payload}}</td>
</tr>
</tbody>
</table>
and give me the result in vertical manne instead of horizontal.
So any ideas to transpose that data to horizontal?
OK then something like that?
[
{
"id": "a56bde124d673012",
"type": "tab",
"label": "ui-temp list",
"disabled": false,
"info": ""
},
{
"id": "8fbf6842f1528818",
"type": "ui_template",
"z": "a56bde124d673012",
"group": "c7e1043144be7729",
"name": "Content",
"order": 7,
"width": "15",
"height": "10",
"format": "\n\n <table id=\"history\" border=\"1\">\n <tr align=\"center\">\n <th>Name</th>\n <th>ID</th>\n <th>Address</th>\n <th>Country</th>\n <th>Occupation</th>\n <th>Age</th>\n </tr>\n <tbody ng-repeat=\"item in arrLog track by $index\">\n <tr align=\"center\">\n <td>{{item.name}}</td>\n <td>{{item.id}}</td>\n <td>{{item.address}}</td>\n <td>{{item.country}}</td>\n <td>{{item.occupation}}</td>\n <td>{{item.age}}</td>\n </tr>\n </tbody>\n </table>\n\n\n\n<script>\n (function(scope) {\n scope.arrLog = [];\n \n //handle arriving messages\n scope.$watch('msg', function(msg) {\n\t\t\t try{\n \t\t\t switch(msg.topic) {\n \t\t\t \n \t\t\t case \"Content\":\n scope.$applyAsync(()=>{\n scope.arrLog.push(msg.payload);\n });\n console.log(scope.arrLog);\n \t\t\t break;\n \t\t\t \n \t\t\tcase \"Clear\":\n \t\t\t scope.$applyAsync(()=>{\n \t\t\t scope.arrLog.length = 0;\n \t\t\t });\n \t\t\t break;\n\n \t default:\n \t\t\t}\n\t\t\t }catch(err){\n\t\t\t //console.error(err);\n\t\t\t }\n });\n })(scope);\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 1720,
"y": 500,
"wires": [
[]
]
},
{
"id": "2f096b8068cfbd2d",
"type": "ui_button",
"z": "a56bde124d673012",
"name": "Clear Button",
"group": "c2fc6f8ceca1aa7f",
"order": 6,
"width": "7",
"height": "1",
"passthru": false,
"label": "Clear",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-trash",
"payload": "true",
"payloadType": "bool",
"topic": "Clear",
"topicType": "str",
"x": 990,
"y": 640,
"wires": [
[
"8fbf6842f1528818",
"86056727c92d077a"
]
]
},
{
"id": "3070c17a7eed1205",
"type": "ui_button",
"z": "a56bde124d673012",
"name": "",
"group": "c2fc6f8ceca1aa7f",
"order": 4,
"width": "7",
"height": "1",
"passthru": false,
"label": "Set Content",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-play",
"payload": "true",
"payloadType": "bool",
"topic": "Content",
"topicType": "str",
"x": 990,
"y": 320,
"wires": [
[
"ab714e67bbc44e72"
]
]
},
{
"id": "ab714e67bbc44e72",
"type": "function",
"z": "a56bde124d673012",
"name": "",
"func": "msg.payload = {\n name:\"Max Mustermann\",\n id:12345678,\n address:\"http://gdrive.com\",\n country:\"Germany\",\n occupation:\"waiter\",\n age:25\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1280,
"y": 320,
"wires": [
[
"86056727c92d077a",
"8fbf6842f1528818"
]
]
},
{
"id": "86056727c92d077a",
"type": "debug",
"z": "a56bde124d673012",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1210,
"y": 500,
"wires": []
},
{
"id": "c7e1043144be7729",
"type": "ui_group",
"name": "Integracion pruebaa prueba pruebaa",
"tab": "85eef7cbe34c88d0",
"order": 1,
"disp": true,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "c2fc6f8ceca1aa7f",
"type": "ui_group",
"name": "Tools",
"tab": "85eef7cbe34c88d0",
"order": 2,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "85eef7cbe34c88d0",
"type": "ui_tab",
"name": "DEV URL Integraciones",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
But you could also go with ui-table instead of ui-template. There are several posts about it in this forum.
Thank you for the help. That's working for me. Yes, ui-table also good to go, but just now I am trying using ui-template for table. Then, I wonder if I have a number column and can have auto numbering for every row inserted to the table?
Yes you can. In the ng-repeat directive you get the $index. A column with {{$index}} ?
Thanks a lot knoepsche. However, as my first question also, if let say the case is user can submit multiple times, I haven't figured out the way to store multiple objects in the array. Any idea for the function node?
I tried to simulate your database flow. It depends on the situation. When the browser opens, changes or refreshes your tab it has to read the whole database. If you add a database item it has to read only this item. If the database is cleared then it should be done also in your browser. The array which is shown up in your table is part of the ui-template node.
[
{
"id": "cb1707e817bf8c76",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "5c08b8b90be4f133",
"type": "function",
"z": "cb1707e817bf8c76",
"name": "Database",
"func": "let db = context.get('db');\nif(db === undefined){\n db = [];\n}\nswitch(msg.topic){\n case 'add item':\n db.push(msg.payload);\n context.set('db', db);\n return msg\n case 'get all':\n msg.payload = db;\n return msg;\n case 'clear all':\n db = [];\n context.set('db', db);\n return msg;\n}",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1320,
"y": 360,
"wires": [
[
"7a0fd2a09a554dcb"
]
]
},
{
"id": "7a0fd2a09a554dcb",
"type": "ui_template",
"z": "cb1707e817bf8c76",
"group": "86067baf4c147373",
"name": "Content",
"order": 1,
"width": "15",
"height": "10",
"format": "\n\n <table id=\"history\" border=\"1\">\n <tr align=\"center\">\n <th>No</th>\n <th>Name</th>\n <th>ID</th>\n <th>Address</th>\n <th>Country</th>\n <th>Occupation</th>\n <th>Age</th>\n </tr>\n <tbody ng-repeat=\"item in arrLog track by $index\">\n <tr align=\"center\">\n <td>{{$index + 1}}</td>\n <td>{{item.name}}</td>\n <td>{{item.id}}</td>\n <td>{{item.address}}</td>\n <td>{{item.country}}</td>\n <td>{{item.occupation}}</td>\n <td>{{item.age}}</td>\n </tr>\n </tbody>\n </table>\n\n\n\n<script>\n (function(scope) {\n scope.arrLog = [];\n \n //handle arriving messages\n scope.$watch('msg', function(msg) {\n\t\t\t try{\n \t\t\t switch(msg.topic) {\n \t\t\t \n \t\t\t case \"add item\":\n scope.$applyAsync(()=>{\n scope.arrLog.push(msg.payload);\n });\n \t\t\t break;\n \t\t\t \n \t\t\t case \"get all\":\n scope.$applyAsync(()=>{\n scope.arrLog = msg.payload;\n });\n \t\t\t break;\n \t\t\t \n \t\t\tcase \"clear all\":\n \t\t\t scope.$applyAsync(()=>{\n \t\t\t scope.arrLog.length = 0;\n \t\t\t });\n \t\t\t break;\n\n \t default:\n \t\t\t}\n\t\t\t }catch(err){\n\t\t\t //console.error(err);\n\t\t\t }\n });\n })(scope);\n</script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 1560,
"y": 360,
"wires": [
[]
]
},
{
"id": "61075f1e11d38dd3",
"type": "ui_form",
"z": "cb1707e817bf8c76",
"name": "",
"label": "New Item",
"group": "5fb2b4f7c946baf9",
"order": 1,
"width": 0,
"height": 0,
"options": [
{
"label": "Name",
"value": "name",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Address",
"value": "address",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Country",
"value": "country",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Occupation",
"value": "occupation",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Age",
"value": "age",
"type": "text",
"required": true,
"rows": null
}
],
"formValue": {
"name": "",
"address": "",
"country": "",
"occupation": "",
"age": ""
},
"payload": "",
"submit": "submit",
"cancel": "cancel",
"topic": "add item",
"topicType": "str",
"splitLayout": "",
"className": "",
"x": 640,
"y": 520,
"wires": [
[
"b26667f9b1ce477a"
]
]
},
{
"id": "b26667f9b1ce477a",
"type": "function",
"z": "cb1707e817bf8c76",
"name": "ID Generator",
"func": "msg.payload.id = RED.util.generateId();\ndelete msg.socketid;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 810,
"y": 520,
"wires": [
[
"4c0fa18b63cbbf76"
]
]
},
{
"id": "b5d48bab145e5618",
"type": "ui_ui_control",
"z": "cb1707e817bf8c76",
"name": "",
"events": "all",
"x": 640,
"y": 240,
"wires": [
[
"87dfe94a8d9c09eb"
]
]
},
{
"id": "9f84249ceaca27d2",
"type": "change",
"z": "cb1707e817bf8c76",
"name": "get all",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "get all",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1010,
"y": 240,
"wires": [
[
"5c08b8b90be4f133"
]
]
},
{
"id": "87dfe94a8d9c09eb",
"type": "switch",
"z": "cb1707e817bf8c76",
"name": "tab Example?",
"property": "name",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "Example",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 840,
"y": 240,
"wires": [
[
"9f84249ceaca27d2"
]
]
},
{
"id": "6a1ae48a96824422",
"type": "ui_button",
"z": "cb1707e817bf8c76",
"name": "",
"group": "5fb2b4f7c946baf9",
"order": 1,
"width": 0,
"height": 0,
"passthru": false,
"label": "Clear Database",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "clear all",
"topicType": "str",
"x": 620,
"y": 360,
"wires": [
[
"4c0fa18b63cbbf76"
]
]
},
{
"id": "4c0fa18b63cbbf76",
"type": "change",
"z": "cb1707e817bf8c76",
"name": "delete socketid",
"rules": [
{
"t": "delete",
"p": "socketid",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1060,
"y": 360,
"wires": [
[
"5c08b8b90be4f133"
]
]
},
{
"id": "8322f244bb9211f9",
"type": "comment",
"z": "cb1707e817bf8c76",
"name": "To get the array from database on tab open, change or browser refresh",
"info": "",
"x": 830,
"y": 200,
"wires": []
},
{
"id": "761ca70b16a7633e",
"type": "comment",
"z": "cb1707e817bf8c76",
"name": "Add new Item to the database",
"info": "",
"x": 700,
"y": 480,
"wires": []
},
{
"id": "ab9e7dca8888c0a4",
"type": "comment",
"z": "cb1707e817bf8c76",
"name": "clear the whole database",
"info": "",
"x": 690,
"y": 320,
"wires": []
},
{
"id": "a9026e3c14f3bec5",
"type": "comment",
"z": "cb1707e817bf8c76",
"name": "after database changes the changes are computed to all open tabs",
"info": "",
"x": 1500,
"y": 320,
"wires": []
},
{
"id": "86067baf4c147373",
"type": "ui_group",
"name": "Database",
"tab": "85eef7cbe34c88d0",
"order": 2,
"disp": true,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "5fb2b4f7c946baf9",
"type": "ui_group",
"name": "Input",
"tab": "85eef7cbe34c88d0",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "85eef7cbe34c88d0",
"type": "ui_tab",
"name": "Example",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Thank you knoepsche. Your way is nice and can be an alternative way for me. I found my way yesterday like below. However, new issue came up where when I key in 1st input, data is displayed immediately onto ui table, but when key in 2ns input, I need to refresh page to load the data onto ui table. Maybe you have any thought on this?
Then, in my case also, if user done with inputting data, user will press a start button which will start counting a timer up. Then, this timer up will be send and update to sql column timer. Now my issue is if I have multiple inputs like above, how I can update the sql column timer for those corresponding inputs? Now, if I have only one input submitted, all is okay using code function below.
I wouldn't allways send the whole Array to ui-table. Only the new item with the command
addRow
. The whole table only when there are Tab changes or Browser refeshs. It's the same as done by my ui-template flow. I don't really know why your table is not updated imeadetly by every new send Data without trying by myself.
To set a timestamp in your SQL command I would use pure javascript Date Objekt not any Timer at all. Something like
const start_time = new Date().valueOf();
Then you may create the timestamp in the same function node where you set the SQL command
the ui-template flow now transfered to ui-table flow:
[
{
"id": "fd3a93decc2a1270",
"type": "tab",
"label": "e.g. ui-table",
"disabled": false,
"info": ""
},
{
"id": "ec34c6ada52855bd",
"type": "change",
"z": "fd3a93decc2a1270",
"name": "Table Configuration",
"rules": [
{
"t": "set",
"p": "ui_control",
"pt": "msg",
"to": "$format := {\t \"tabulator\": {\t \"tableBuilt\":\"function(){this.tablebuilt = true;}\",\t \"dataLoaded\":\"function(data){if(this.tablebuilt){this.tablebuilt=false; this.send({topic:'build table', ui_control:{callback:'tableBuilt'}})}else{this.send({topic:'success', ui_control:{callback:'setData'}, return:{command:'setData', arguments:[data]}})}}\"\t }\t}",
"tot": "jsonata"
},
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{}",
"tot": "jsonata"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 730,
"y": 220,
"wires": [
[
"31731e53875dacf5"
]
],
"icon": "node-red/cog.svg"
},
{
"id": "863b8f9b8d52963d",
"type": "inject",
"z": "fd3a93decc2a1270",
"name": "",
"props": [
{
"p": "payload",
"v": "-1",
"vt": "num"
},
{
"p": "topic",
"v": "",
"vt": "string"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "-1",
"payloadType": "num",
"x": 230,
"y": 220,
"wires": [
[
"ec34c6ada52855bd"
]
]
},
{
"id": "29ee456cbd10be91",
"type": "debug",
"z": "fd3a93decc2a1270",
"name": "TABLE",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1370,
"y": 100,
"wires": []
},
{
"id": "31731e53875dacf5",
"type": "ui_table",
"z": "fd3a93decc2a1270",
"group": "d04cb83acc2064af",
"name": "Content",
"order": 1,
"width": "20",
"height": "12",
"columns": [
{
"field": "no",
"title": "No",
"width": "",
"align": "left",
"formatter": "rownum",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "name",
"title": "Name",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "id",
"title": "ID",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "address",
"title": "Address",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "country",
"title": "Contry",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "occupation",
"title": "Occupation",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "age",
"title": "Age",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
},
{
"field": "timestamp",
"title": "Timestamp",
"width": "",
"align": "left",
"formatter": "plaintext",
"formatterParams": {
"target": "_blank"
}
}
],
"outputs": 1,
"cts": true,
"x": 1140,
"y": 220,
"wires": [
[
"f18a891c4099b790",
"29ee456cbd10be91"
]
]
},
{
"id": "a2696265f95db3aa",
"type": "ui_button",
"z": "fd3a93decc2a1270",
"name": "",
"group": "21028a285361e1fc",
"order": 2,
"width": 0,
"height": 0,
"passthru": false,
"label": "Clear Database",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "clear all",
"topicType": "str",
"x": 200,
"y": 500,
"wires": [
[
"821293d40021dc19"
]
]
},
{
"id": "0f7aca16675ee795",
"type": "ui_form",
"z": "fd3a93decc2a1270",
"name": "",
"label": "New Item",
"group": "21028a285361e1fc",
"order": 1,
"width": 0,
"height": 0,
"options": [
{
"label": "Name",
"value": "name",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Address",
"value": "address",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Country",
"value": "country",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Occupation",
"value": "occupation",
"type": "text",
"required": true,
"rows": null
},
{
"label": "Age",
"value": "age",
"type": "text",
"required": true,
"rows": null
}
],
"formValue": {
"name": "",
"address": "",
"country": "",
"occupation": "",
"age": ""
},
"payload": "",
"submit": "submit",
"cancel": "cancel",
"topic": "add item",
"topicType": "str",
"splitLayout": "",
"className": "",
"x": 220,
"y": 660,
"wires": [
[
"18dcb329f842183f"
]
]
},
{
"id": "18dcb329f842183f",
"type": "function",
"z": "fd3a93decc2a1270",
"name": "ID Generator",
"func": "msg.payload.id = RED.util.generateId();\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 390,
"y": 660,
"wires": [
[
"821293d40021dc19"
]
]
},
{
"id": "821293d40021dc19",
"type": "change",
"z": "fd3a93decc2a1270",
"name": "delete socketid",
"rules": [
{
"t": "delete",
"p": "socketid",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 640,
"y": 500,
"wires": [
[
"fbe860b501639c1a"
]
]
},
{
"id": "fbe860b501639c1a",
"type": "function",
"z": "fd3a93decc2a1270",
"name": "Database",
"func": "let db = context.get('db');\nif(db === undefined){\n db = [];\n}\nswitch(msg.topic){\n case 'add item':\n msg.payload.timestamp = new Date().toISOString();\n db.push(msg.payload);\n context.set('db', db);\n msg.payload={\n command:\"addRow\",\n arguments: [\n [\n msg.payload\n ],\n false //false = add on end of list\n ],\n returnPromise: true\n }\n break;\n case 'build table':\n msg.payload={\n command:\"setData\",\n arguments: [\n db\n ],\n returnPromise: false\n }\n break;\n case 'clear all':\n db = [];\n context.set('db', db);\n msg.payload={\n command:\"setData\",\n arguments: [\n db\n ],\n returnPromise: false\n }\n break;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 900,
"y": 500,
"wires": [
[
"35571d7bd35ac114",
"31731e53875dacf5"
]
]
},
{
"id": "35571d7bd35ac114",
"type": "debug",
"z": "fd3a93decc2a1270",
"name": "DATABASE",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1290,
"y": 500,
"wires": []
},
{
"id": "f18a891c4099b790",
"type": "switch",
"z": "fd3a93decc2a1270",
"name": "",
"property": "topic",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "build table",
"vt": "str"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 1370,
"y": 220,
"wires": [
[
"4d8aebc1b773d32e"
]
]
},
{
"id": "4d8aebc1b773d32e",
"type": "change",
"z": "fd3a93decc2a1270",
"name": "",
"rules": [
{
"t": "delete",
"p": "ui_control",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1400,
"y": 280,
"wires": [
[
"fbe860b501639c1a"
]
]
},
{
"id": "d04cb83acc2064af",
"type": "ui_group",
"name": "Database",
"tab": "635ba43dc8d01298",
"order": 2,
"disp": true,
"width": "20",
"collapse": false,
"className": ""
},
{
"id": "21028a285361e1fc",
"type": "ui_group",
"name": "Input",
"tab": "635ba43dc8d01298",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "635ba43dc8d01298",
"type": "ui_tab",
"name": "example ui-table",
"icon": "track_changes",
"order": 1,
"disabled": false,
"hidden": false
}
]
Thank you knoepsche. Cool to see how the ui table works. Btw, I wonder how if I want to update a column in ui table for multiple rows at once? I use command of updateOrAddData to update the ui table, but not sure how to set the row value, since my data on table can be multiple and I want this multiple data updated its Start Time column with same start value
Your payload is wrong!
To add more than one items at once it should be something like that:
{"command":"updateOrAddData","arguments":[[[{"name":"Max Mustermann","address":"Irgendeinestraße 47","country":"Deutschland","occupation":"something","age":"20","id":"85f19c641c1ca618","timestamp":"2022-09-06T12:21:16.272Z"},{"name":"Marie Mustermann","address":"Irgendeinestraße 47","country":"Deutschland","occupation":"somethingelse","age":"18","id":"26c43d65fe392057","timestamp":"2022-09-06T12:21:16.272Z"}]],false],"returnPromise":true}
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
