Get different messages from ui-template while using ng-repeat

Dashboard
1

Hey there,

I am trying to get a feedback from a table by using the template node.
Therefore I want to give every row a link (works like a button) so that i can choose between the rows (see first screenshot).
The goal is that with every link I press on the surface, my template node sends the payload of the row number. (e.g. click link in row 1 will return a 1).

Can someone help me?

image

image
image791×804 27.4 KB 

[{"id":"ef9961f6.80aa5","type":"function","z":"b16c9500.96faa8","name":"","func":"var test = [];\n\nfor(var i=0; i<3 ;i++)\n{\n    tabelle = {\n        value1:3,\n        value2:1,\n        value3:i\n    }\n    test.push(tabelle);\n}\nmsg.payload = test;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":550,"y":200,"wires":[["8217b659.6ef9a8","ca14e8c6.b69ce8"]]},{"id":"41f6083e.c5b108","type":"inject","z":"b16c9500.96faa8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":370,"y":200,"wires":[["ef9961f6.80aa5"]]},{"id":"8217b659.6ef9a8","type":"ui_template","z":"b16c9500.96faa8","group":"757cd4c6.20854c","name":"","order":1,"width":"20","height":"6","format":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n@media screen {\n    table, td, th {  \n    border: 1px solid #ddd;\n    text-align: center;\n    }\n\n    table {\n    border-collapse: collapse;\n    table-layout: auto;\n    width: auto;\n    empty-cells: show;\n    }\n\n    th, td {\n    padding: 12px;\n    }\n    tr:hover {font-size: 100%;color:#00c6f2;text-decoration: none; font-weight: 400;} /* {background-color:#00c6f2;} Teubert grün #65632e*/\n\n}\n\n</style>\n<script>\nvar value = \"\";\n// or overwrite value in your callback function ...\nthis.scope.action = function() { return 1; }\n\n</script>\n\n</head>\n\n<table class=\"table\" style=\"font-family: Arial, Verdana\">\n    <tr>\n        <th><font size=2><font color=#00c6f2 ><b>column1</b></font></font></th>\n        <th><font size=2><font color=#00c6f2 ><b>column2</b></font></font></th>\n        <th><font size=2><font color=#00c6f2 ><b>column3</b></font></font></th>\n    </tr>\n    \n    <tr ng-repeat=\"stuff in msg.payload\">\n        <td>{{::stuff.value1}}</td>\n        <td>{{::stuff.value2}}</td>\n        <td><a href={{::stuff.value3}} ng-click=\"send({payload:action()})\" target=\"_blank\"> showView </a></td>\n    </tr>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":200,"wires":[[]]},{"id":"ca14e8c6.b69ce8","type":"debug","z":"b16c9500.96faa8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":140,"wires":[]},{"id":"757cd4c6.20854c","type":"ui_group","name":"Standard","tab":"18e14d4.a4f85b3","order":2,"disp":true,"width":"20","collapse":false},{"id":"18e14d4.a4f85b3","type":"ui_tab","name":"Test","icon":"dashboard","order":9}]
2

try...

    <tr ng-repeat="item in msg.payload">
        <td>{{item.value1}}</td>
        <td>{{item.value2}}</td>
        <td>
            <md-button ng-click="send({payload:item})"> click me </md-button>
        </td>
    </tr>

↑ this should send the whole item back to node-red (so you can access msg.payload.value1 or msg.payload.value2 etc) (untested)

PS, DONT include <head> and <body> tags in the ui template (the dashboard provides these)

3

thank you. this works for me.
But after clicking the link, you need to reload the table

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.