Hello,
I would like to use ui_template node to create a table with Tabulator from incomming message.
I follow the ui_template help document, now I can get the incomming message. But how could I pass the data to the script to create the Tabulator table?
Below is the nodered script:
[{"id":"f5f1673c.ab5fd8","type":"ui_template","z":"513028f6.ddf718","group":"a1c4bf65.5c4ee","name":"Tabulator-Template","order":6,"width":"0","height":"0","format":"<head>\n <link href=\"https://unpkg.com/tabulator-tables@4.0.5/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n <script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables@4.0.5/dist/js/tabulator.min.js\"></script>\n <script>\n // define some sample data\n var tabledata = [\n { id: 1, col1: \"123\", col2: \"456\", col3: \"789\" },\n { id: 2, col1: \"321\", col2: \"654\", col3: \"987\" },\n ];\n\n (function (scope) {\n scope.$watch('msg', function (msg) {\n if (msg) {\n scope.send({payload: msg.payload});\n tabledata = msg.payload\n }\n });\n })(scope);\n \n var table = new Tabulator(\"#example-table\", {\n data: tabledata, //assign data to table\n layout: \"fitColumns\",\n columns: [\n { title: \"Col 1\", field: \"col1\", width: 150 },\n { title: \"Col 2\", field: \"col2\", hozAlign: \"left\" },\n { title: \"Col 2\", field: \"col3\", hozAlign: \"left\" },\n ]\n });\n </script>\n</head>\n\n<body>\n <div id=\"example-table\"></div>\n</body>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":590,"y":240,"wires":[["7ea62fe0.c5d4d"]]},{"id":"119598e4.b67af7","type":"function","z":"513028f6.ddf718","name":"Table Data","func":"\nmsg.payload = [\n { id: 1, col1: \"aaa\", col2: \"bbb\", col3: \"ccc\" },\n { id: 2, col1: \"ddd\", col2: \"eee\", col3: \"fff\" },\n]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":240,"wires":[["f5f1673c.ab5fd8"]]},{"id":"c287e44e.044b58","type":"inject","z":"513028f6.ddf718","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":240,"wires":[["119598e4.b67af7"]]},{"id":"7ea62fe0.c5d4d","type":"debug","z":"513028f6.ddf718","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":790,"y":240,"wires":[]},{"id":"a1c4bf65.5c4ee","type":"ui_group","z":"","name":"Default","tab":"fe213df9.bc40e","order":2,"disp":true,"width":"6","collapse":false},{"id":"fe213df9.bc40e","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
Thank you.
Ambrose
