Hi,
I have a message that is an array of 3 objects which is split.
Each message is then routed to different UI template depending on some property.
I was expecting the templates to display on the dashboard in the same order as the incoming messages and as many times as the number of objects in the array. But it displays 1 of each type (apparently the last one) and in the wrong order.
What am i missing here ?
{
"id": "723f9b1638015e68",
"type": "tab",
"label": "Flow 5",
"disabled": false,
"info": "",
"env": []
},
{
"id": "734edb285c81cbbe",
"type": "inject",
"z": "723f9b1638015e68",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": "3",
"topic": "",
"payload": "true",
"payloadType": "bool",
"x": 290,
"y": 180,
"wires": [
[
"9df217dee9f02af4"
]
]
},
{
"id": "9df217dee9f02af4",
"type": "function",
"z": "723f9b1638015e68",
"name": "Prepare message",
"func": "var msg=\n{\n \"payload\": [\n {\n \"TAG\": \"VALUE 1\",\n \"TYPE\":\"DINT\"\n },\n {\n \"TAG\": \"VALUE 2\",\n \"TYPE\":\"BOOL\"\n },\n {\n \"TAG\": \"VALUE 3\",\n \"TYPE\":\"DINT\"\n },\n ]\n};\nreturn msg;\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 450,
"y": 180,
"wires": [
[
"7909189edf0b1ece"
]
]
},
{
"id": "7909189edf0b1ece",
"type": "split",
"z": "723f9b1638015e68",
"name": "",
"splt": "\\n",
"spltType": "str",
"arraySplt": 1,
"arraySpltType": "len",
"stream": false,
"addname": "",
"x": 610,
"y": 180,
"wires": [
[
"ee3d4cd9ed7df25f"
]
]
},
{
"id": "ee3d4cd9ed7df25f",
"type": "switch",
"z": "723f9b1638015e68",
"name": "swich",
"property": "payload['TYPE']",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "BOOL",
"vt": "str"
},
{
"t": "eq",
"v": "DINT",
"vt": "str"
}
],
"checkall": "false",
"repair": true,
"outputs": 2,
"x": 730,
"y": 180,
"wires": [
[
"559a6a30e954aa11"
],
[
"5b459318fe711b10"
]
]
},
{
"id": "5b459318fe711b10",
"type": "ui-template",
"z": "723f9b1638015e68",
"group": "57a5edd5947a427e",
"page": "",
"ui": "",
"name": "DINT template",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n<v-container>\n <v-row>\n <v-col>{{value.TAG}}</v-col>\n <v-col>{{value.TYPE}}</v-col>\n <v-col><v-number-input v-model=\"fieldval\" @update:model-value=\"roundIt()\" :step=\"1\" :min=\"0\" :max=\"32767\"></v-number-input></v-col>\n <v-col><v-btn @click=\"sendIt(value)\">Send</v-btn></v-col>\n </v-row>\n</v-container>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n fieldval:0\n }\n },\n /*\n watch: {\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },*/\n methods: {\n // expose a method to our <template> and Vue Application\n roundIt:function(){\n this.fieldval=Math.round(this.fieldval)\n },\n sendIt:function(element){\n //alert(JSON.stringify(element));\n element[\"sentval\"]=this.fieldval;\n this.send({\"payload\":element})\n }\n }/*,\n mounted() {\n // code here when the component is first loaded \n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }*/\n }\n</script>\n\n<style>\n .v-number-input__control .v-btn {\n color: var(--v-theme-on-surface);\n }\n</style>",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 900,
"y": 200,
"wires": [
[
"80e18d2461cf2f15"
]
]
},
{
"id": "559a6a30e954aa11",
"type": "ui-template",
"z": "723f9b1638015e68",
"group": "57a5edd5947a427e",
"page": "",
"ui": "",
"name": "BOOL template",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n<v-container>\n <v-row>\n <v-col>{{value.TAG}}</v-col>\n <v-col>{{value.TYPE}}</v-col>\n <v-col><v-number-input v-model=\"fieldval\" @update:model-value=\"roundIt()\" :step=\"1\" :min=\"0\" :max=\"1\"></v-number-input></v-col>\n <v-col><v-btn @click=\"sendIt(value)\">Send</v-btn></v-col>\n </v-row>\n</v-container>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n fieldval:0\n }\n },\n /*\n watch: {\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },*/\n methods: {\n // expose a method to our <template> and Vue Application\n roundIt:function(){\n this.fieldval=Math.round(this.fieldval)\n },\n sendIt:function(element){\n //alert(JSON.stringify(element));\n element[\"sentval\"]=this.fieldval;\n this.send({\"payload\":element})\n }\n }/*,\n mounted() {\n // code here when the component is first loaded \n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }*/\n }\n</script>\n\n<style>\n .v-number-input__control .v-btn {\n color: var(--v-theme-on-surface);\n }\n</style>\n",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 900,
"y": 160,
"wires": [
[
"1fe6bccb9224a801"
]
]
},
{
"id": "1fe6bccb9224a801",
"type": "debug",
"z": "723f9b1638015e68",
"name": "debug 388",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1090,
"y": 160,
"wires": []
},
{
"id": "80e18d2461cf2f15",
"type": "debug",
"z": "723f9b1638015e68",
"name": "debug 389",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1090,
"y": 200,
"wires": []
},
{
"id": "57a5edd5947a427e",
"type": "ui-group",
"name": "Group 1",
"page": "49f182b05d0522ed",
"width": "6",
"height": "1",
"order": -1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "49f182b05d0522ed",
"type": "ui-page",
"name": "Page 2",
"ui": "76dffea7c8616640",
"path": "/page2",
"icon": "home",
"layout": "grid",
"theme": "b91842f7c03b4cb1",
"order": 4,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "76dffea7c8616640",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "fixed"
},
{
"id": "b91842f7c03b4cb1",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]```