Need Help: Dashboard layout in wrong order

General
1

I have a flow in which data is being read from a CSV and then displayed online using Dashboard.
In the final part, the data from the CSV is split up into 10 components by a function node and sent forward to template nodes using 10 outputs. Output 1 should be the first line of the CSV, output 2 the second and so on.

The Problem is that sometimes (at other times it "just works") these outputs send the wrong data, meaning that output 8 might send line 4 and output 1 line 10.

Is it possible that Node-RED can have trouble with routing data to many outputs? And how would i go around that problem?

Edit: The problem is not that the flow is sending wrong data, but that the dashbord is putting them in the wrong order.

2

I would start by debugging your function node to ensure its doing what you think. Node-RED only does what you ask it to - if data is coming out of the wrong output of a function node it is because that's what your code has asked it to do.

3

I checked the node and found no error so far. I also added delays between the outputs from the function node and the template nodes and routed the outputs from the delays into a debug node.

Flow%20Debugging%201
Flow Debugging 1.png830Ă—450 63.4 KB

The debug node outputs the data in the correct sequence.

Yet the data is displayed wrong in the Dashboard. (They should be sorted ascending by minutes)

4

Output debug node:

Flow%20Debugging%202
Flow Debugging 2.png487Ă—683 16.2 KB

5

Dashboard:

Flow%20Debugging%203
Flow Debugging 3.png839Ă—699 34.4 KB

6

Post your flow so we can have a look. If possible use an inject node to feed in some data so that we can test it. For how to share you flow see
https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506/4

7

So is it simply that the UI elements are in the wrong order on the page?

8

Here is the flow. I had to adapt it a bit but the problem is still there.

[{"id":"11f31bbd.20e38c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"1db60099.ab54f7","type":"function","z":"11f31bbd.20e38c","name":"Split","func":"var deletme = msg.payload\nvar pos\nvar split = ';';\n\n//Unicode Replacement Character (replaces ä ö ü)\nvar rpc = '\\uFFFD';\n\n//String not empty?\nif(deletme !== '' && deletme != ' '){\n    \n    //Prepare Output Array\n    var output = [\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n        {payload: {\"machine\": \" - \", \"art\": \" - \", \"minutes\": \" - \", \"state\": \" - \"}},\n    ]\n    \n    //Loop Array\n    for(i = 0; i < 10; i++){\n        \n        //Split Machine\n        pos = deletme.search(split)\n        output[i].payload.machine = deletme.substr(0, pos).replace(/(\\r\\n|\\n|\\r)/gm,\"\")\n        deletme = deletme.substr(pos+1, deletme.length-pos)\n        \n        //Split Article\n        pos = deletme.search(split)\n        output[i].payload.art = deletme.substr(1, pos-1)\n        deletme = deletme.substr(pos+1, deletme.length-pos)\n        \n        if(output[i].payload.art == '_DUMMY'){\n            \n            output[i].payload.art = \"Dummy\"\n            \n        } else {\n            \n            output[i].payload.art = output[i].payload.art.substr(0,4)\n            \n        }\n        \n        //Split Minutes\n        pos = deletme.search(split)\n        output[i].payload.minutes = deletme.substr(0, pos)\n        if(output[i].payload.minutes >= 43200) output[i].payload.minutes = \"-\"\n        deletme = deletme.substr(pos+1, deletme.length-pos)\n        \n        //Split State\n        pos = 0\n        currentChar = deletme.charAt(pos);\n        //Go until #\n        while(currentChar != '#' || pos > 50) {\n            pos++;\n            currentChar = deletme.charAt(pos);\n        }\n        output[i].payload.state = deletme.substr(0, pos)\n        deletme = deletme.substr(pos+1, deletme.length-pos)\n    \n        //Repair Text\n        if(output[i].payload.state == ('R' + rpc + 'sten'))        output[i].payload.state = \"Rüsten\"\n        if(output[i].payload.state == ('Zusatzger' + rpc + 't'))   output[i].payload.state = \"Zusatzgerät\"\n        if(output[i].payload.state == ('Entnahmeger' + rpc + 't')) output[i].payload.state = \"Entnahmegerät\"\n    \n    }\n    \n    return [output[0], output[1], output[2], output[3], output[4], output[5], output[6], output[7], output[8], output[9], output[10]];\n\n}","outputs":10,"noerr":0,"x":930,"y":400,"wires":[["95604efd.3c7c78"],["6222b790.0a8218"],["664ab6c5.811108"],["4c7830b2.b3fff8"],["a2b20c4.d5e9c7"],["74616c3d.64b754"],["4aa86b60.332dec"],["b19358d9.5561d8"],["378705bd.4f069a"],["1467a837.21aff"]]},{"id":"b874f841.feaf7","type":"delay","z":"11f31bbd.20e38c","name":"1 msg. / 1 sec.","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":380,"y":400,"wires":[["eed9c293.6702c8","6ab5df6c.7399a8"]]},{"id":"cd443f7f.46c098","type":"function","z":"11f31bbd.20e38c","name":"Tidy up Input","func":"while(msg.payload.includes(\"'\")){\n    \n    msg.payload = msg.payload.replace(\"'\", \"\")\n\n}\n\nreturn msg","outputs":1,"noerr":0,"x":770,"y":400,"wires":[["1db60099.ab54f7"]]},{"id":"c0ffad43.5a942","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Dashboard Settings","order":1,"width":"0","height":"0","format":"<style>\n    \n    .container{\n        \n        display:flex;\n        justify-content: space-around;\n        align-items:center;\n        max-width: 100%;\n        \n    }\n    \n    .items{\n        \n        flex: 1 0 23%;\n        font-size: 40pt;\n        text-align:center;\n        font:helvetica;\n        \n    }\n    \n    #state {\n        \n        font-size: 25pt;\n        \n    }\n    \n    #top {\n        \n        flex: 1 0 23%;\n        font-size: 35pt;\n        padding: 4px 4px 4px 4px;\n        font-weight: bold;\n        text-decoration: underline;\n        \n    }\n    \n    @viewport {\n        width: device-width;\n        zoom: 1.0;\n    } \n    \n    .flash {\n      background-color: #004A7F;\n      -webkit-border-radius: 10px;\n      border-radius: 10px;\n      border: none;\n      color: #FFEEEE;\n      font-family: Arial;\n      text-decoration: none;\n      -webkit-animation: glowing 1500ms infinite;\n      -moz-animation: glowing 1500ms infinite;\n      -o-animation: glowing 1500ms infinite;\n      animation: glowing 1500ms infinite;\n    }\n    @-webkit-keyframes glowing {\n      0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }\n      50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }\n      100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }\n    }\n    \n    @-moz-keyframes glowing {\n      0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }\n      50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }\n      100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }\n    }\n    \n    @-o-keyframes glowing {\n      0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }\n      50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }\n      100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }\n    }\n    \n    @keyframes glowing {\n      0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }\n      50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }\n      100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }\n    }\n    \n</style>\n\n<script>\n    \n    //Abstand zwischen Zeilen\n    sizes.cy = 1;\n    \n    //Padding zwischen Gruppen\n    sizes.py = 1;\n    \n    //Dokumentation\n    //https://groups.google.com/forum/#!topic/node-red/jKcy83XsI7Y\n    \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1400,"y":100,"wires":[[]]},{"id":"3622a41c.a0af74","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 1","order":3,"width":"0","height":"0","format":"<div id = \"row1\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row1\").classList.add('flash');\n            } else {\n                document.getElementById(\"row1\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":220,"wires":[[]]},{"id":"95604efd.3c7c78","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"200","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1250,"y":220,"wires":[["3622a41c.a0af74","60ef9c2e.a842f4"]]},{"id":"6222b790.0a8218","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"400","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1250,"y":260,"wires":[["bc5e82aa.2cac18","60ef9c2e.a842f4"]]},{"id":"664ab6c5.811108","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"600","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1250,"y":300,"wires":[["3a589c8.bd67ee4","60ef9c2e.a842f4"]]},{"id":"4c7830b2.b3fff8","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"800","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1250,"y":340,"wires":[["fca81059.b54f08","60ef9c2e.a842f4"]]},{"id":"a2b20c4.d5e9c7","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"1000","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":380,"wires":[["1c84032e.afe595","60ef9c2e.a842f4"]]},{"id":"74616c3d.64b754","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"1200","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":420,"wires":[["2ccb66b8.3b0b3a","60ef9c2e.a842f4"]]},{"id":"4aa86b60.332dec","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"1400","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":460,"wires":[["a428d9d3.ad4f7","60ef9c2e.a842f4"]]},{"id":"b19358d9.5561d8","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"1600","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":500,"wires":[["245cf0bf.85a6c","60ef9c2e.a842f4"]]},{"id":"378705bd.4f069a","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"1800","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":540,"wires":[["ddcdb301.710068","60ef9c2e.a842f4"]]},{"id":"1467a837.21aff","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"2000","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1260,"y":580,"wires":[["197bb382.d80d1c","60ef9c2e.a842f4"]]},{"id":"fc9fae2d.acab7","type":"comment","z":"11f31bbd.20e38c","name":"Anzeigen (4)","info":"Dashboard Settings ändert CSS und Layout.\n\nTablet friendly macht die Seite mit einem Tablet\nansehbar.\n\nDie Informationen werden noch kurzzeitig verzögert,\nweil das interessanten Effekt macht.\n\nManchmal hatte ich kurz das Problem dass er\ndie Blöcke an falsche Anzeigen schickt.\nBeispiel:   1  -> 5\n            5  -> 10\n            10 -> 1\n            \nSollte das nochmal passieren, einfach die Leitungen\nzwischen Delay und Anzeige richtig verkabeln.\nIch weiß echt nicht woran es liegt, ich glaube\ndas ist einfach ein Fehler\n\nDanach werden sie in den HTML Blöcken angezeigt.","x":1370,"y":20,"wires":[]},{"id":"3f95855.992c1fa","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Überschrift","order":2,"width":"0","height":"0","format":"<div id = \"top_con\" class = \"container\">\n    \n    <div class = \"items\" id = \"top\">Maschine</div>\n    <div class = \"items\" id = \"top\">Artikel</div>\n    <div class = \"items\" id = \"top\">Minuten</div>\n    <div class = \"items\" id = \"top\">Status</div>\n    \n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":180,"wires":[[]]},{"id":"eed9c293.6702c8","type":"delay","z":"11f31bbd.20e38c","name":"","pauseType":"delay","timeout":"200","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":610,"y":400,"wires":[["cd443f7f.46c098"]]},{"id":"df22512b.4dd1b8","type":"ui_ui_control","z":"11f31bbd.20e38c","name":"","x":620,"y":560,"wires":[[]]},{"id":"a11ce5a9.94f8b8","type":"template","z":"11f31bbd.20e38c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{\"\"}}","output":"str","x":620,"y":520,"wires":[["df22512b.4dd1b8"]]},{"id":"6ab5df6c.7399a8","type":"delay","z":"11f31bbd.20e38c","name":"1 msg. / 5 sec.","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"5","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"x":620,"y":480,"wires":[["a11ce5a9.94f8b8"]]},{"id":"bc5e82aa.2cac18","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 2","order":3,"width":"0","height":"0","format":"<div id = \"row2\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row2\").classList.add('flash');\n            } else {\n                document.getElementById(\"row2\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":260,"wires":[[]]},{"id":"3a589c8.bd67ee4","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 3","order":3,"width":"0","height":"0","format":"<div id = \"row3\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row3\").classList.add('flash');\n            } else {\n                document.getElementById(\"row3\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":300,"wires":[[]]},{"id":"fca81059.b54f08","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 4","order":3,"width":"0","height":"0","format":"<div id = \"row4\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row4\").classList.add('flash');\n            } else {\n                document.getElementById(\"row4\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":340,"wires":[[]]},{"id":"1c84032e.afe595","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 5","order":3,"width":"0","height":"0","format":"<div id = \"row5\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row5\").classList.add('flash');\n            } else {\n                document.getElementById(\"row5\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":380,"wires":[[]]},{"id":"2ccb66b8.3b0b3a","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 6","order":3,"width":"0","height":"0","format":"<div id = \"row6\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row6\").classList.add('flash');\n            } else {\n                document.getElementById(\"row6\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":420,"wires":[[]]},{"id":"a428d9d3.ad4f7","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 7","order":3,"width":"0","height":"0","format":"<div id = \"row7\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row7\").classList.add('flash');\n            } else {\n                document.getElementById(\"row7\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":460,"wires":[[]]},{"id":"245cf0bf.85a6c","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 8","order":3,"width":"0","height":"0","format":"<div id = \"row8\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row8\").classList.add('flash');\n            } else {\n                document.getElementById(\"row8\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":500,"wires":[[]]},{"id":"ddcdb301.710068","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 9","order":3,"width":"0","height":"0","format":"<div id = \"row9\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row9\").classList.add('flash');\n            } else {\n                document.getElementById(\"row9\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":540,"wires":[[]]},{"id":"197bb382.d80d1c","type":"ui_template","z":"11f31bbd.20e38c","group":"b439d5f3.ea864","name":"Element 10","order":3,"width":"0","height":"0","format":"<div id = \"row10\" class = \"flash container\">\n    \n    <div class = \"items\">{{msg.payload.machine}}</div>\n    <div class = \"items\">{{msg.payload.art}}</div>\n    <div class = \"items\">{{msg.payload.minutes}} min.</div>\n    <div class = \"items\" id = \"state\">{{msg.payload.state}}</div>\n    \n</div>\n\n<script>\n\n    (function(scope) {\n        scope.$watch('msg.payload.minutes', function(data) {\n            if(data <= 10){\n                document.getElementById(\"row10\").classList.add('flash');\n            } else {\n                document.getElementById(\"row10\").classList.remove('flash');\n            }\n        });\n    })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1550,"y":580,"wires":[[]]},{"id":"bbe61a1d.baf6f8","type":"ui_template","z":"11f31bbd.20e38c","group":"47c1ea48.eb88f4","name":"Tablet friendly","order":1,"width":"0","height":"0","format":"<meta name=\"viewport\" content=\"height=device-height, initial-scale=1\"> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1380,"y":60,"wires":[[]]},{"id":"60ef9c2e.a842f4","type":"debug","z":"11f31bbd.20e38c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":1550,"y":620,"wires":[]},{"id":"2265cba0.19f5b4","type":"inject","z":"11f31bbd.20e38c","name":"Dummy Data","topic":"","payload":"'M1';'W1';1;'S1'# 'M2';'W2';2;'S2'# 'M3';'W3';4;'S3'# 'M4';'W4';8;'S4'# 'M5';'W5';16;'S5'# 'M6';'W6';32;'S6'# 'M7';'W7';64;'S7'# 'M8';'W8';128;'S8'# 'M9';'W9';256;'S9'# 'M10';'W10';512;'S10'#","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":400,"wires":[["b874f841.feaf7"]]},{"id":"b439d5f3.ea864","type":"ui_group","z":"","name":"List","tab":"b053a115.9a99e","order":1,"disp":false,"width":"26","collapse":false},{"id":"47c1ea48.eb88f4","type":"ui_group","z":"","name":"List","tab":"f7d873f2.7ab88","order":1,"disp":false,"width":"17","collapse":false},{"id":"b053a115.9a99e","type":"ui_tab","z":"","name":"Flow Debug","icon":"dashboard","order":1},{"id":"f7d873f2.7ab88","type":"ui_tab","z":"","name":"Inaktive Maschinen (Hochkant)","icon":"dashboard","order":2}]
9

I thought that too at first, but they are in the right order.

10

Do they always appear in the same (wrong) places?

11

You need to include the dashboard output so we can see the problem. Or can the problem be seen with the flow you posted?

12

Sadly, no. It is pretty random where they apper.
Sometimes it gets it right on the first try, otherwise the sequence is mostly random.

I deactivated all other flows and checked the debug one i posted, and the problem was still there.

And thank you all for your help by the way!

13

How have you verified the elements are in the right order? Did you inspect the DOM on the page to check the ids of each div?

1 Like
14

I just tried and you are right. The rows are somehow in a wrong order. (Which means the data ist sent correctly, which is a big plus).

The strange thing is how the rows are placed, because i specified in the dashboard layout what comes after what. I also cannot imagine why sometimes it works and sometimes it doesn't, if it is an error with the dashboard layout.

15

I just loaded up my normal version of the flow, and it started putting them in the right sequence again. (??)

It would yet be good to know what the problem was, so i could be able to fix it should it come back, which i assume it will.

16

It happens sometimes on a deploy, the dashboard order can get messed up (even though it appears right in the layout of the editor). When that happens you need to just change the order, change it back to what it was and deploy. That fixes it. I'm not sure why it does that sometimes, haven't been able to find a pattern yet.

Here'a a diffcheck of your flow when the order is wrong even though it appears right in the layout of the editor and the same flow once the order has been reordered and redeployed
https://www.diffchecker.com/7Q5A4Mix

You can see the only thing that changes is the "order" key of each ui_template.

17

This has been a problem for well over a year... as you can see in the diffchecker page, on the left side there are many ui nodes with same order number = 3

I believe the root of the problem begins when you copy/paste a ui node -- but i've not confirmed that the order number does not get incremented correctly (or maybe at all?). Perhaps the rendering of the tabs/groups in the Dashboard sidebar can detect that the order does not match the array index, and possibly even fix it? Yes, it would mean that a redeploy would be necessary, but at least there would be some feedback in the editor.

18

Yes I think that is the root of the problem - when a node is added (or pasted) to the workspace the order does not get generated - when moved in the sidebar it does... so the code is there... just isn't being called at all the necessary times it needs to be.

3 Likes