# Ui\_template incoming message

**URL:** <https://discourse.nodered.org/t/ui-template-incoming-message/30242>\
**Category:** Dashboard\
**Created:** [17 July 2020 03:44 UTC](https://discourse.nodered.org/t/ui-template-incoming-message/30242 "2020-07-17T03:44:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ambrose](https://avatars.discourse-cdn.com/v4/letter/a/8c91f0/32.png) [@ambrose](https://discourse.nodered.org/u/ambrose)\
**Post date:** [17 July 2020 03:44 UTC](https://discourse.nodered.org/t/ui-template-incoming-message/30242/1 "2020-07-17T03:44:58Z")

</div>

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:

```auto
[{"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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 July 2020 08:15 UTC](https://discourse.nodered.org/t/ui-template-incoming-message/30242/2 "2020-07-17T08:15:24Z")

</div>

Or maybe look at the node-red-contrib-ui-table node that is built around tabulator ? [https://flows.nodered.org/node/node-red-node-ui-table](https://flows.nodered.org/node/node-red-node-ui-table)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 August 2020 08:15 UTC](https://discourse.nodered.org/t/ui-template-incoming-message/30242/3 "2020-08-16T08:15:37Z")

</div>

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