Editable table in template node

Karl Norseman Bo

unread,

Apr 24, 2018, 8:42:44 AM4/24/18

to Node-RED

Hi, i need som angular js help

i am getting a array of data into my editable table, all good so far.

its even possible to edit, but, when i click save (lagre) it just grabs the original array and sends it back to payload.

this has been boggling my old brain for months, please if you see where im fucking it up, let me know.

Best regards

Karl

[{"id":"a08b0ad6.dc5bd8","type":"ui_template","z":"5a6a90ff.9350b","group":"8b52e4d3.c22b18","name":"","order":0,"width":"12","height":"5","format":"<!DOCTYPE HTML>\n</head>\n<body>\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" >\n\n\n <tr>\n <th>ANIMAL</th>\n <th>GROUP</th>\n <th>STATION</th>\n <th>CHANGE</th>\n \n <tr ng-repeat=\"x in msg.payload | limitTo:50\">\n <td contenteditable=\"true\" input type=\"text\">{{msg.payload[$index].animal}} </td>\n <td contenteditable=\"true\" input type=\"text\">{{msg.payload[$index].grup}} </td>\n <td contenteditable=\"true\" input type=\"text\">{{msg.payload[$index].station}} </td>\n <td><center><md-button ng-click=\"click(b)\">LAGRE</md-button></center>\n </tr>\n </table>\n \n\n<script> \n scope.button = [{ \n payload: 'table1', \n }];\n scope.click = function(b) { \n if (!this.msg) this.msg = {}; \n if (!this.msg.payload) this.msg.payload = {}; \n this.msg.payload[b.payload] = !this.msg.payload[b.payload]; \n this.send(this.msg); \n \n }.bind(scope); \n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":627.2222862243652,"y":624.444429397583,"wires":[["d0c15aee.878e58"]]},{"id":"8b52e4d3.c22b18","type":"ui_group","z":"","name":"graftest","tab":"64fa169a.f322f8","order":1,"disp":true,"width":"12","collapse":false},{"id":"64fa169a.f322f8","type":"ui_tab","z":"","name":"utvikling","icon":"dashboard","order":5}]

Karl Norseman Bo

unread,

Apr 25, 2018, 8:08:09 AM4/25/18

to Node-RED

Ok, so i did some changes, found a different set of "lego blocks" to work with

im now able to send edited data back to console log, but i cant figure out how to send it back to msg. payload

yes i know its not really a node-red issue, however, im sure lots of the users in this group will benefit from it anyway, and i know there are heavyweights in html and js frequently visiting here :-)

function Lagre(indice) {

myArray[indice].animal = document.getElementById("inputname"+indice).value;

myArray[indice].grup = document.getElementById("inputgroup"+indice).value;

myArray[indice].maskin = document.getElementById("inputbox"+indice).value;

var htmltext = "<tr id='table"+indice+"'><td>"

+myArray[indice].animal+

"</td><td>"

+myArray[indice].grup+

"</td><td>"

+myArray[indice].maskin+

"</td><td><button onclick='Endre("

+indice+")'>Endre</button><button onclick='Slett("

+indice+")'>Slett</button></td></tr>";

document.getElementById("table"+indice).innerHTML = htmltext;

console.log(myArray[indice]);

}

so, if i could just send (myArray[indice]); to msg.payload, i would be happy as pig in shit.

Any help is appreciated

Best regards

Karl

steve rickus

unread,

Apr 25, 2018, 3:57:06 PM4/25/18

to Node-RED

Karl,

If you search this forum for "html table" you should find several good examples of ways to accomplish this -- like this thread that I wrote late last year...

The trick is to use the "send" function that is defined inside the dashboard's angular scope -- as described in the Info sidebar for the ui_template node:

Sending a message:
<script>
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
    Click me to send a hello world
</md-button>
Will display a button that when clicked will send a message with the payload 'Hello world'.

Karl Norseman Bo

unread,

Apr 27, 2018, 5:12:52 AM4/27/18

to Node-RED

Thank you for that, will test it this weekend, got called away on a mysql project.

Karl

Karl Norseman Bo

unread,

May 21, 2018, 8:22:45 AM5/21/18

to Node-RED

Hi again, sorry it some time for me to revisit this problem

Thank you for the example in your thread

i made some modifications to it, and made some of the cells editable

<style>
    th {
        text-decoration: underline;
    }
    .numeric {
        text-align: right;
        padding-right: 15px;
    }
</style>

<table cellpadding="1" border="1" id="table1" class="table-hover"  style="width: 100%;">
    <thead>
        <tr>
    <th>value1</th>        
    <th>value2</th>
    <th>value3</th>
    <th>value4</th>
    <th>value5</th>
    <th>value7</th>
    <th>value8</th>
    <th>value9</th>
    <th>value10</th>
    <th>value11</th>
    <th>value12</th>
    <th>value13</th>
    <th>value14</th>
    <th>value15</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in msg.payload" ng-dblclick="sendRow(row)">
            <td class="numeric">{{row.value1}}</td>
            <td contenteditable="true">{{row.value2}}</td>
            <td contenteditable="true">{{row.value3}}</td>
            <td contenteditable="true">{{row.value4}}</td>
            <td contenteditable="true">{{row.value5}}</td>
            <td>{{row.value7}}</td>
            <td contenteditable="true">{{row.value8}}</td>
            <td>{{row.value9}}</td>
            <td>{{row.value10}}</td>
            <td contenteditable="true">{{row.value11}}</td>
            <td>{{row.value12}}</td>
            <td>{{row.value13}}</td>
            <td contenteditable="true">{{row.value14}}</td>
            <td contenteditable="true">{{row.value15}}</td>
        </tr>
    </tbody>
</table>

<script>
(function($scope) {
    $scope.sendRow = function(obj) {
       $scope.send({ "payload": obj });
        };

</script>

so, my problem now is to capture the inputs from the cells that are editable.

please help me to solve this problem, its really doing my head in :-)

Best regards

Karl

On Wednesday, 25 April 2018 21:57:06 UTC+2, steve rickus wrote:

steve rickus

unread,

May 21, 2018, 10:38:40 AM5/21/18

to Node-RED

Karl, so what happens when you double-click a row in the table that has been modified? Did you put a debug node on the ui_template output port? If so, you should see a msg.payload object containing the data from that row.

If you want to export your flow with some test data, I can try it for myself, and perhaps work out what's missing...

--

Steve

Karl Norseman Bo

unread,

May 21, 2018, 10:46:56 AM5/21/18

to Node-RED

Hi, when i doubleclick it forwards the same msg.payload initially delivered from my sql, it does not catch the actual input from the editable cells.

that function with capturing the row only is really nice, i tried to add a button on end of the row, but hehe, it added multiple buttons

angulars are cool stuff, but im totally green(novice) in it

Best regards

Karl

Karl Norseman Bo

unread,

May 21, 2018, 11:02:44 AM5/21/18

to Node-RED

ooops, i did a copy paste plunder on my code into here,

})(scope);

is missing above </script>

Karl Norseman Bo

unread,

May 21, 2018, 1:16:21 PM5/21/18

to Node-RED

[{"id":"947ce28a.82527","type":"inject","z":"61a54679.3fa588","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":235,"y":492,"wires":[["dfd4ab6.b135c58"]]},{"id":"ead8322b.aa694","type":"ui_template","z":"61a54679.3fa588","group":"11de737e.5901ed","name":"Data-table","order":3,"width":"24","height":"14","format":"<style>\n    th {\n        text-decoration: underline;\n    }\n    .numeric {\n        text-align: right;\n        padding-right: 15px;\n    }\n</style>\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\"  style=\"width: 100%;\">\n    <thead>\n        <tr>\n    <th>value1</th>        \n    <th>value2</th>\n    <th>value3</th>\n    <th>value4</th>\n    <th>value5</th>\n    <th>value7</th>\n    <th>value8</th>\n    <th>value9</th>\n    <th>value10</th>\n    <th>value11</th>\n    <th>value12</th>\n    <th>value13</th>\n    <th>value14</th>\n    <th>value15</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\n            <td class=\"numeric\">{{row.value1}}</td>\n            <td contenteditable=\"true\">{{row.value2}}</td>\n            <td contenteditable=\"true\">{{row.value3}}</td>\n            <td contenteditable=\"true\">{{row.value4}}</td>\n            <td contenteditable=\"true\">{{row.value5}}</td>\n            <td>{{row.value7}}</td>\n            <td contenteditable=\"true\">{{row.value8}}</td>\n            <td>{{row.value9}}</td>\n            <td>{{row.value10}}</td>\n            <td contenteditable=\"true\">{{row.value11}}</td>\n            <td>{{row.value12}}</td>\n            <td>{{row.value13}}</td>\n            <td contenteditable=\"true\">{{row.value14}}</td>\n            <td contenteditable=\"true\">{{row.value15}}</td>\n        </tr>\n    </tbody>\n</table>\n\n<script>\n(function($scope) {\n    $scope.sendRow = function(obj) {\n       $scope.send({ \"payload\": obj });\n        };\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":647,"y":527,"wires":[["6381e6ed.034e28"]]},{"id":"6381e6ed.034e28","type":"debug","z":"61a54679.3fa588","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":886,"y":519,"wires":[]},{"id":"dfd4ab6.b135c58","type":"function","z":"61a54679.3fa588","name":"dummyarray","func":"var myArray = [{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":420.1666946411133,"y":522.0000038146973,"wires":[["ead8322b.aa694"]]},{"id":"11de737e.5901ed","type":"ui_group","z":"","name":"Tank 2","tab":"305237f.43a80c8","order":1,"disp":true,"width":"24","collapse":false},{"id":"305237f.43a80c8","type":"ui_tab","z":"","name":"Tank 2","icon":"dashboard","order":3}]

here is a flow with a dummy array for simulating data from mysql

i have left some editable and some not

Best regards

Karl

On Monday, 21 May 2018 16:38:40 UTC+2, steve rickus wrote:

Karl Norseman Bo

unread,

May 29, 2018, 1:55:53 AM5/29/18

to Node-RED

Hi, i noticed if i added a innerhtml i could target the newly added text in the row, but my html coding skill is limited, unlike the code you have that chooses the row one double clicks, mine takes only defined row

(function($scope) {

$scope.sendRow = function(obj) {

$scope.send({ "payload": obj });

$scope.send({ "payload": (document.getElementById("table1").rows[1].innerHTML) });

};

})(scope);

</script>

perhaps it is possible to merge the 2?

Best regards

Karl

On Monday, 21 May 2018 16:38:40 UTC+2, steve rickus wrote:

Reply all

Reply to author

Forward