# Send out data from template table

**URL:** <https://discourse.nodered.org/t/send-out-data-from-template-table/92940>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [6 November 2024 11:13 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940 "2024-11-06T11:13:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![PratikVlegel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pratikvlegel/32/96138_2.png) [@PratikVlegel](https://discourse.nodered.org/u/PratikVlegel)\
**Post date:** [6 November 2024 11:13 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/1 "2024-11-06T11:13:01Z")

</div>

Hello,

could it be possible to send out data from my template node?  
I've build a table with some basic data and I'm trying to send out the data on a button click.  
I'll include the json for the table template (I do hope this is allowed).  
I've got everything ot work except for sending out data.  
I'm quite new to this forum so I do hope I'm not breaking any rules.  
Thanks in advance for your help.

```auto
[
    {
        "id": "48e19b07d2787ea9",
        "type": "ui-template",
        "z": "8061b32606ba62ec",
        "group": "06f2aed78fdc64fd",
        "page": "",
        "ui": "",
        "name": "",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div id=\"app\">\n <v-data-table \n :headers=\"headers\" \n :items=\"msg.payload\" \n class=\"elevation-1\" \n hide-default-footer>\n \n <template v-slot:item.status=\"{ item }\">\n <div style=\"display: flex; align-items: center;\">\n <v-icon\n v-if=\"item.status === 'OK'\"\n color=\"green\"\n class=\"mr-2\"\n >mdi-check-circle</v-icon>\n <v-icon\n v-if=\"item.status === 'NOK'\"\n color=\"red\"\n class=\"mr-2\"\n >mdi-close-circle</v-icon>\n <v-switch\n v-model=\"item.status\"\n inset\n :label=\"item.status === 'OK' ? 'OK' : 'NOK'\"\n :value=\"item.status === 'OK'\"\n false-value=\"NOK\"\n true-value=\"OK\"\n @change=\"updateStatus(item)\">\n </v-switch>\n </div>\n </template>\n </v-data-table>\n \n <!-- Toegevoegde knop -->\n <v-btn @click=\"sendAllDataAndSetToNOK\" color=\"primary\" class=\"mt-3\">\n Send All Data & Set to NOK\n </v-btn>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n headers: [\n { title: 'Step', key: 'step' },\n { title: 'Object', key: 'object' },\n { title: 'Task', key: 'task' },\n { title: 'Status', key: 'status' }\n],\n msg: {\n payload: [\n {\n \"step\": 1,\n \"object\": \"Wooden Beam\",\n \"task\": \"Look for the 4 screws.\",\n \"status\": \"OK\"\n },\n {\n \"step\": 2,\n \"object\": \"Metal Plate\",\n \"task\": \"Has the plate been aligned well?\",\n \"status\": \"NOK\"\n },\n {\n \"step\": 3,\n \"object\": \"Drill\",\n \"task\": \"Inspect the 6 drill holes.\",\n \"status\": \"OK\"\n },\n {\n \"step\": 4,\n \"object\": \"Screws\",\n \"task\": \"How has the beam been sawed off?\",\n \"status\": \"NOK\"\n },\n {\n \"step\": 5,\n \"object\": \"Wrench\",\n \"task\": \"Check tightness of the screws\",\n \"status\": \"OK\"\n }\n]\n }\n };\n },\n methods: {\n updateStatus(item) {\n console.log(`Step ${item.step} status changed to: ${item.status}`);\n },\n sendAllDataAndSetToNOK() {\n this.msg.payload.forEach(item => {\n item.status = \"NOK\";\n });\n\n let dataToSend = { payload: this.msg.payload };\n this.$emit('output', dataToSend); // Dit stuurt het bericht naar Node-RED\n console.log(\"All data sent and all statuses set to NOK\", dataToSend);\n }\n }\n};\n</script>\n\n<style>\n.v-data-table .v-data-table__wrapper tr {\n transition: background-color 0.3s ease;\n}\n</style>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 40,
        "wires": [
            [
                "3fe4dd92292a112e"
            ]
        ]
    },
    {
        "id": "06f2aed78fdc64fd",
        "type": "ui-group",
        "name": "Quality Control",
        "page": "edaf6a0dc7dc2a5f",
        "width": "14",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "edaf6a0dc7dc2a5f",
        "type": "ui-page",
        "name": "QC",
        "ui": "5cca096f6dc1eedd",
        "path": "/QC",
        "icon": "mdi mdi-check-decagram-outline",
        "layout": "grid",
        "theme": "0597569a149022b6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "5cca096f6dc1eedd",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "fixed",
        "titleBarStyle": "fixed"
    },
    {
        "id": "0597569a149022b6",
        "type": "ui-theme",
        "name": "Vlegel",
        "colors": {
            "surface": "#156873",
            "primary": "#e0e5e5",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "10px",
            "groupBorderRadius": "4px",
            "widgetGap": "10px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 November 2024 11:39 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/2 "2024-11-06T11:39:17Z")

</div>

> [@PratikVlegel](#):
>
> could it be possible to send out data from my template node

It's documented here: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#built-in-functions)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [6 November 2024 17:37 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/3 "2024-11-06T17:37:01Z")

</div>

Just be careful, when you do `this.send()`, that you are using the right `this`. (for example: when sending from within a function property, it has its own `this`.  
What I typically do is save the 'base' `this` into a variable, e.g.:

```auto
mounted() {
const vThis = this;
...
    this.$socket.on('msg-input:' + this.id, function(msg)
    {
        vThis.send(someMsg); // 'this' is different here
    });

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 November 2024 17:41 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/4 "2024-11-06T17:41:29Z")

</div>

Or use the fat arrow function to avoid _this_ issue

```auto
mounted() {
    this.$socket.on('msg-input:' + this.id, (msg) => {
        this.send(someMsg); // 'this' is the component
    });

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 November 2024 07:49 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/5 "2024-11-07T07:49:55Z")

</div>

I just looked a little closer and realised your snippet sends a message immediately upon receiving a message. This will cause a loop that will slow the user's dashboard down to a crawl.

I'm pretty sure it's not intentional and it's not what you're actually doing in your code and that it was for demonstration purposes only but I thought I'd best point it out just in case.

---

<div class="post-metadata">

**Author:** ![PratikVlegel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pratikvlegel/32/96138_2.png) [@PratikVlegel](https://discourse.nodered.org/u/PratikVlegel)\
**Post date:** [7 November 2024 09:17 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/6 "2024-11-07T09:17:55Z")

</div>

thank you for your help, I've got it to work. Wasn't that hard, but it took me some time to get used to dashboard 2.0. I've been using dashboard 1 up unitl monday

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [7 November 2024 18:25 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/7 "2024-11-07T18:25:15Z")

</div>

> [@Steve-Mcl](#):
>
> I just looked a little closer and realised your snippet sends a message immediately upon receiving a message. This will cause a loop that will slow the user's dashboard down to a crawl.

Thanks Steve. Of course, that's not real code, I just scribbled something quickly to point out the 'this' issue. And thank you for your comment about the fat arrow. I actually learned something new here.

Maybe I'm old school, but I like to play it safe and not have to evaluate every `this`...I noticed that in many places in the core Node-RED code, they are saving `this` into a variable called `that` for the same reason.

---

<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:** [21 November 2024 18:25 UTC](https://discourse.nodered.org/t/send-out-data-from-template-table/92940/8 "2024-11-21T18:25:24Z")

</div>

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