# Send MSG back to NR from Dashboard 2.0 template node

**URL:** https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [10 September 2024 11:52 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850 "2024-09-10T11:52:49Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)
#### Post date: [10 September 2024 11:52 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850/1 "2024-09-10T11:52:49Z")

</div>

Hi there,

I'm currently working with NR 4.0.2 and @flowfuse/node-red-dashboard:1.16.0

I'm aiming to have a button in a template node that sends back a msg.payload when I click it. Following the documentation [DOC](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#built-in-functions) , I used this.send() function to pass on data back into Node-RED.

However I must be missing something because I recieve the data when this.send is directly on the script (page's first load), but when it's inside an event listener, the browser's console returns that send is not defined.

I leave here the code im using so you can test it:

**Flow**

```auto
[
    {
        "id": "722d8da36de071df",
        "type": "ui-template",
        "z": "f6f2187d.f17ca8",
        "group": "71a95203ce9df61e",
        "page": "",
        "ui": "",
        "name": "Button",
        "order": 1,
        "width": "6",
        "height": "4",
        "head": "",
        "format": "<template>\n <button id=\"test-btn\" class=\"test-btn\" >My Button</button>\n</template>\n\n<script>\n document.getElementById(\"test-btn\").addEventListener(\"click\", function() {\n var data1 = \"AA\";\n var data2 = \"BB-1\";\n var msg = {payload: {'data1': data1, 'data2': data2}};\n this.send(msg);\n });\n this.send('ScriptOn');\n</script>\n\n<style>\n /* define any styles here - supports raw CSS */\n .test-btn {\n background-color: #f54;\n color: white;\n border: none;\n padding: 10px;\n border-radius: 5px;\n cursor: pointer;\n }\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 178,
        "y": 424,
        "wires": [
            [
                "fd077dd87df6d242"
            ]
        ]
    },
    {
        "id": "fd077dd87df6d242",
        "type": "debug",
        "z": "f6f2187d.f17ca8",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 428,
        "y": 424,
        "wires": []
    },
    {
        "id": "71a95203ce9df61e",
        "type": "ui-group",
        "name": "Group Name",
        "page": "9ef10008cf9bd85d",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "9ef10008cf9bd85d",
        "type": "ui-page",
        "name": "TEST",
        "ui": "99b0f7213609f95f",
        "path": "/page3",
        "icon": "home",
        "layout": "grid",
        "theme": "7595dc06ddd9d219",
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "99b0f7213609f95f",
        "type": "ui-base",
        "name": "MES",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "none",
        "titleBarStyle": "hidden"
    },
    {
        "id": "7595dc06ddd9d219",
        "type": "ui-theme",
        "name": "MA_Theme",
        "colors": {
            "surface": "#bababa",
            "primary": "#e40521",
            "bgPage": "#111111",
            "groupBg": "#3c3c3b",
            "groupOutline": "#3c3c3b"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "10px",
            "widgetGap": "12px"
        }
    }
]

```

**Template content** :

```auto
<template>
    <button id="test-btn" class="test-btn" >My Button</button>
</template>

<script>
    document.getElementById("test-btn").addEventListener("click", function() {
        var data1 = "AA";
        var data2 = "BB-1";
        var msg = {payload: {'data1': data1, 'data2': data2}};
        this.send(msg);
    });
    this.send('ScriptOn');
</script>

<style>
    /* define any styles here - supports raw CSS */
    .test-btn {
        background-color: #f54;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

```

Hope some of you could help me with that, thanks!

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [10 September 2024 12:21 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850/2 "2024-09-10T12:21:57Z")

</div>

> [@aitor](#):
>
> ```auto
> <script>
> document.getElementById("test-btn").addEventListener("click", function() {
> var data1 = "AA";
> var data2 = "BB-1";
> var msg = {payload: {'data1': data1, 'data2': data2}};
> this.send(msg);
> });
> this.send('ScriptOn');
> </script>
> 
> ```

With JavaScript, if you use `function () { }` to define, well, a function, it creates a new scope, meaning that `this.` refers to your function definition, rather than it's parent scope (where the `this.send()` function is defined.

In this case, you'll just need to define it as an "anonymous" function:

```js
    document.getElementById("test-btn").addEventListener("click", () => {
        var data1 = "AA";
        var data2 = "BB-1";
        var msg = {payload: {'data1': data1, 'data2': data2}};
        this.send(msg);
    });
    this.send('ScriptOn');

```

---

<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: [11 September 2024 09:24 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850/3 "2024-09-11T09:24:55Z")

</div>

To be on the safe side and not have worry about this, I always keep the template's `this` value in a variable, and use it.  
for example:

```auto
<script>
const $scope = this;
...
$scope.send(msg); //from anywhere in the script
...
</script>

```

---

<div class="post-metadata">

### Author: ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)
#### Post date: [12 September 2024 09:53 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850/4 "2024-09-12T09:53:46Z")

</div>

Thanks, that was useful!

---

<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: [26 September 2024 09:53 UTC](https://discourse.nodered.org/t/send-msg-back-to-nr-from-dashboard-2-0-template-node/90850/5 "2024-09-26T09:53:55Z")

</div>

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