# Can't send data form dashboard template node

**URL:** <https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [27 July 2022 16:55 UTC](https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711 "2022-07-27T16:55:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vrrrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vrrrum/32/60000_2.png) [@Vrrrum](https://discourse.nodered.org/u/Vrrrum)\
**Post date:** [27 July 2022 16:55 UTC](https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711/1 "2022-07-27T16:55:40Z")

</div>

Hello  
I'm trying to make a simple schedule editor. But the problem is I can't send data from the template node.  
Here's my flow:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/30d8cd4614d826f32e7a36f84bee5829cb6fd969.png)

```auto
[{"id":"ec96f91dfb1e17e0","type":"ui_template","z":"68076f3321e9d37c","group":"fffc367495eb6a2d","name":"","order":2,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html lang=\"pl\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Schedule</title>\n <style>\n table,\n th,\n td {\n border: 1px solid;\n border-collapse: collapse;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n }\n\n #day {\n color: #fde424;\n }\n\n .checkbox {\n min-width: 3em;\n min-height: 1.3em;\n }\n\n .day {\n background-color: #fde424;\n }\n .night {\n background-color: #281aed;\n }\n .off {\n background-color: #2e2d34;\n }\n </style>\n </head>\n <body>\n <div class=\"options\">\n <input type=\"radio\" name=\"mode\" id=\"day\" checked />\n <label for=\"day\">Dzień</label>\n <input type=\"radio\" name=\"mode\" id=\"night\" />\n <label for=\"night\">Noc</label>\n <input type=\"radio\" name=\"mode\" id=\"off\" />\n <label for=\"off\">Off</label>\n </div>\n <div class=\"container\">\n <table>\n <tr>\n <th></th>\n <th>pn</th>\n <th>wt</th>\n <th>śr</th>\n <th>czw</th>\n <th>pt</th>\n <th>sb</th>\n <th>nd</th>\n </tr>\n <tr class=\"row\">\n <th>0:00</th>\n </tr>\n <tr class=\"row\">\n <th>0:15</th>\n </tr>\n <tr class=\"row\">\n <th>0:30</th>\n </tr>\n <tr class=\"row\">\n <th>0:45</th>\n </tr>\n <tr class=\"row\">\n <th>1:00</th>\n </tr>\n <tr class=\"row\">\n <th>1:15</th>\n </tr>\n <tr class=\"row\">\n <th>1:30</th>\n </tr>\n <tr class=\"row\">\n <th>1:45</th>\n </tr>\n <tr class=\"row\">\n <th>2:00</th>\n </tr>\n <tr class=\"row\">\n <th>2:15</th>\n </tr>\n <tr class=\"row\">\n <th>2:30</th>\n </tr>\n <tr class=\"row\">\n <th>2:45</th>\n </tr>\n <tr class=\"row\">\n <th>3:00</th>\n </tr>\n <tr class=\"row\">\n <th>3:15</th>\n </tr>\n <tr class=\"row\">\n <th>3:30</th>\n </tr>\n <tr class=\"row\">\n <th>3:45</th>\n </tr>\n <tr class=\"row\">\n <th>4:00</th>\n </tr>\n <tr class=\"row\">\n <th>4:15</th>\n </tr>\n <tr class=\"row\">\n <th>4:30</th>\n </tr>\n <tr class=\"row\">\n <th>4:45</th>\n </tr>\n <tr class=\"row\">\n <th>5:00</th>\n </tr>\n <tr class=\"row\">\n <th>5:15</th>\n </tr>\n <tr class=\"row\">\n <th>5:30</th>\n </tr>\n <tr class=\"row\">\n <th>5:45</th>\n </tr>\n <tr class=\"row\">\n <th>6:00</th>\n </tr>\n <tr class=\"row\">\n <th>6:15</th>\n </tr>\n <tr class=\"row\">\n <th>6:30</th>\n </tr>\n <tr class=\"row\">\n <th>6:45</th>\n </tr>\n <tr class=\"row\">\n <th>7:00</th>\n </tr>\n <tr class=\"row\">\n <th>7:15</th>\n </tr>\n <tr class=\"row\">\n <th>7:30</th>\n </tr>\n <tr class=\"row\">\n <th>7:45</th>\n </tr>\n <tr class=\"row\">\n <th>8:00</th>\n </tr>\n <tr class=\"row\">\n <th>8:15</th>\n </tr>\n <tr class=\"row\">\n <th>8:30</th>\n </tr>\n <tr class=\"row\">\n <th>8:45</th>\n </tr>\n <tr class=\"row\">\n <th>9:00</th>\n </tr>\n <tr class=\"row\">\n <th>9:15</th>\n </tr>\n <tr class=\"row\">\n <th>9:30</th>\n </tr>\n <tr class=\"row\">\n <th>9:45</th>\n </tr>\n <tr class=\"row\">\n <th>10:00</th>\n </tr>\n <tr class=\"row\">\n <th>10:15</th>\n </tr>\n <tr class=\"row\">\n <th>10:30</th>\n </tr>\n <tr class=\"row\">\n <th>10:45</th>\n </tr>\n <tr class=\"row\">\n <th>11:00</th>\n </tr>\n <tr class=\"row\">\n <th>11:15</th>\n </tr>\n <tr class=\"row\">\n <th>11:30</th>\n </tr>\n <tr class=\"row\">\n <th>11:45</th>\n </tr>\n <tr class=\"row\">\n <th>12:00</th>\n </tr>\n <tr class=\"row\">\n <th>12:15</th>\n </tr>\n <tr class=\"row\">\n <th>12:30</th>\n </tr>\n <tr class=\"row\">\n <th>12:45</th>\n </tr>\n <tr class=\"row\">\n <th>13:00</th>\n </tr>\n <tr class=\"row\">\n <th>13:15</th>\n </tr>\n <tr class=\"row\">\n <th>13:30</th>\n </tr>\n <tr class=\"row\">\n <th>13:45</th>\n </tr>\n <tr class=\"row\">\n <th>14:00</th>\n </tr>\n <tr class=\"row\">\n <th>14:15</th>\n </tr>\n <tr class=\"row\">\n <th>14:30</th>\n </tr>\n <tr class=\"row\">\n <th>14:45</th>\n </tr>\n <tr class=\"row\">\n <th>15:00</th>\n </tr>\n <tr class=\"row\">\n <th>15:15</th>\n </tr>\n <tr class=\"row\">\n <th>15:30</th>\n </tr>\n <tr class=\"row\">\n <th>15:45</th>\n </tr>\n <tr class=\"row\">\n <th>16:00</th>\n </tr>\n <tr class=\"row\">\n <th>16:15</th>\n </tr>\n <tr class=\"row\">\n <th>16:30</th>\n </tr>\n <tr class=\"row\">\n <th>16:45</th>\n </tr>\n <tr class=\"row\">\n <th>17:00</th>\n </tr>\n <tr class=\"row\">\n <th>17:15</th>\n </tr>\n <tr class=\"row\">\n <th>17:30</th>\n </tr>\n <tr class=\"row\">\n <th>17:45</th>\n </tr>\n <tr class=\"row\">\n <th>18:00</th>\n </tr>\n <tr class=\"row\">\n <th>18:15</th>\n </tr>\n <tr class=\"row\">\n <th>18:30</th>\n </tr>\n <tr class=\"row\">\n <th>18:45</th>\n </tr>\n <tr class=\"row\">\n <th>19:00</th>\n </tr>\n <tr class=\"row\">\n <th>19:15</th>\n </tr>\n <tr class=\"row\">\n <th>19:30</th>\n </tr>\n <tr class=\"row\">\n <th>19:45</th>\n </tr>\n <tr class=\"row\">\n <th>20:00</th>\n </tr>\n <tr class=\"row\">\n <th>20:15</th>\n </tr>\n <tr class=\"row\">\n <th>20:30</th>\n </tr>\n <tr class=\"row\">\n <th>20:45</th>\n </tr>\n <tr class=\"row\">\n <th>21:00</th>\n </tr>\n <tr class=\"row\">\n <th>21:15</th>\n </tr>\n <tr class=\"row\">\n <th>21:30</th>\n </tr>\n <tr class=\"row\">\n <th>21:45</th>\n </tr>\n <tr class=\"row\">\n <th>22:00</th>\n </tr>\n <tr class=\"row\">\n <th>22:15</th>\n </tr>\n <tr class=\"row\">\n <th>22:30</th>\n </tr>\n <tr class=\"row\">\n <th>22:45</th>\n </tr>\n <tr class=\"row\">\n <th>23:00</th>\n </tr>\n <tr class=\"row\">\n <th>23:15</th>\n </tr>\n <tr class=\"row\">\n <th>23:30</th>\n </tr>\n <tr class=\"row\">\n <th>23:45</th>\n </tr>\n </table>\n </div>\n <md-button id=\"save\">Zapisz</md-button>\n\n <script type=\"text/javascript\">\n const schedule = []; // Variable I want to send\n const rows = document.querySelectorAll(\".row\");\n\n const createRow = (n) => {\n for (let i = 1; i <= 7; i++) {\n const cell = document.createElement(\"td\");\n const div = document.createElement(\"div\");\n div.classList = \"checkbox\";\n let day;\n if (i == 7) day = 0;\n else day = i;\n div.setAttribute(\"data-day\", day);\n div.setAttribute(\"data-hr\", n);\n cell.appendChild(div);\n rows[n].appendChild(cell);\n }\n };\n\n // CREATE TABLE ------------------------\n for (let i = 0; i < 96; i++) {\n const weekArray = [0, 0, 0, 0, 0, 0, 0];\n schedule[i] = weekArray;\n\n createRow(i);\n }\n // ---------------------------------------\n\n const checkboxes = document.querySelectorAll(\".checkbox\");\n const mode = document.getElementsByName(\"mode\");\n const save = document.getElementById(\"save\")\n let state = \"day\";\n\n const checkState = () => {\n for (let i = 0; i < mode.length; i++) {\n if (mode[i].checked) {\n state = mode[i].id;\n }\n }\n };\n\n const fillSchedule = (schedule) => {\n if (schedule.length != 96) {\n console.error(\"Wrong data\");\n return;\n }\n\n for (let i = 0; i < schedule.length; i++) {\n for (let j = 0; j < schedule[i].length; j++) {\n const savedState = schedule[i][j];\n const element = document.querySelector(\n `[data-day='${j}'][data-hr='${i}']`\n );\n switch (savedState) {\n case 0:\n element.classList.add(\"off\");\n break;\n case 1:\n element.classList.add(\"day\");\n break;\n case 2:\n element.classList.add(\"night\");\n break;\n }\n }\n }\n };\n\n const handleChange = (e) => {\n e.target.classList.remove(\"day\");\n e.target.classList.remove(\"off\");\n e.target.classList.remove(\"night\");\n e.target.classList.add(state);\n let day = e.target.getAttribute(\"data-day\");\n let hour = e.target.getAttribute(\"data-hr\");\n let numState = 0;\n switch (state) {\n case \"off\":\n numState = 0;\n break;\n case \"day\":\n numState = 1;\n break;\n case \"night\":\n numState = 2;\n break;\n }\n schedule[hour][day] = numState;\n };\n\n schedule[0][1] = 2;\n console.log(schedule);\n fillSchedule(schedule);\n\n for (let i = 0; i < mode.length; i++) {\n mode[i].addEventListener(\"change\", checkState);\n }\n\n for (let i = 0; i < checkboxes.length; i++) {\n checkboxes[i].addEventListener(\"mousedown\", (e) => {\n handleChange(e);\n });\n checkboxes[i].addEventListener(\"mouseover\", (e) => {\n if (e.buttons) {\n handleChange(e);\n }\n });\n }\n \n save.addEventListener(\"click\", ()=>{\n this.scope.send({payload: schedule})\n })\n \n // Here's the code that doesn't work\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload.match('check')) {\n alert(msg.payload);\n scope.send({payload: \"payload sent\"});\n }\n });\n })(scope);\n \n </script>\n </body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":300,"y":460,"wires":[["5263238797ed55b9"]]},{"id":"5263238797ed55b9","type":"debug","z":"68076f3321e9d37c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":460,"wires":[]},{"id":"ce9cb7b78948bffa","type":"ui_button","z":"68076f3321e9d37c","name":"","group":"fffc367495eb6a2d","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"check","payloadType":"str","topic":"topic","topicType":"msg","x":150,"y":460,"wires":[["ec96f91dfb1e17e0"]]},{"id":"fffc367495eb6a2d","type":"ui_group","name":"Temperatura","tab":"b0b5440f73fb87b5","order":1,"disp":true,"width":"8","collapse":false},{"id":"b0b5440f73fb87b5","type":"ui_tab","name":"Edycja","icon":"dashboard","order":2,"disabled":false,"hidden":true}]

```

I copied some code from [Sending msg.payload from ui template - #3 by paulalsmith1000](https://discourse.nodered.org/t/sending-msg-payload-from-ui-template/61453/3)

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [30 July 2022 08:31 UTC](https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711/2 "2022-07-30T08:31:54Z")

</div>

I reduced your html code just to show my way to do it. Perhaps this flow helps:

```auto
[
    {
        "id": "ca3e3633fc572ae8",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "ec96f91dfb1e17e0",
        "type": "ui_template",
        "z": "ca3e3633fc572ae8",
        "group": "fffc367495eb6a2d",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<style>\n .break {\n flex-basis: 100%;\n height: 100px;\n width: 30px;\n }\n .button-ripple{\n overflow:hidden;\n width:100%;\n height:100%;\n left:0;\n top: 0;\n position:absolute;\n display:block;\n z-index:1;\n border-radius: inhirit;\n background-clip: padding-box;\n background-color: rgba(255,255,255,0);\n transition: all 0.55s cubic-bezier(0,0,0.6,1) ;\n -webkit-transform: translateZ(1);\n }\n .button-ripple:active{\n left:50%;\n width:0%;\n background-color: rgba(255,255,255,0.1);\n transition: all 0s;\n }\n</style>\n\n <div class=\"nr-dashboard-button container-right-margin\">\n <md-tooltip md-direction=\"center\">My Button</md-tooltip>\n <button id=\"myButton_ccd3e21e\" class=\"md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"mybutton\">\n <ui-icon ng-show=\"true\" icon=\"mi-play_arrow\" ng-style=\"{color:GetIconColor()}\" aria-hidden=\"false\">\n \t\t<div ng-if=\"iconType==='mi'\" style=\"display:inline-block; margin:auto; line-height:initial;\">\n \t\t\t<i class=\"material-icons mi-play_arrow\" ng-class=\"icon\">mybutton</i>\n \t\t</div>\n </ui-icon>\n <span>my Label</span>\n <div class=\"button-ripple\"></div>\n </button>\n </div>\n <script type=\"text/javascript\">\n \n // Here's the code that doesn't work\n (function(scope) {\n scope.GetIconColor = function(){return \"white\"}\n scope.OnButtonClick = function(evt){\n switch(evt.currentTarget.id){\n case \"myButton_ccd3e21e\":\n scope.send({payload: \"My Button clicked\"});\n break;\n default:\n //console.log(evt.currentTarget.id);\n break;\n }\n }\n scope.$watch('msg', function(msg) {\n if (msg.payload.match('check')) {\n alert(msg.payload);\n scope.send({payload: \"payload sent\"});\n }\n });\n })(scope);\n \n </script>\n </body>\n</html>\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 640,
        "y": 220,
        "wires": [
            [
                "5263238797ed55b9"
            ]
        ]
    },
    {
        "id": "5263238797ed55b9",
        "type": "debug",
        "z": "ca3e3633fc572ae8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 810,
        "y": 220,
        "wires": []
    },
    {
        "id": "ce9cb7b78948bffa",
        "type": "ui_button",
        "z": "ca3e3633fc572ae8",
        "name": "",
        "group": "fffc367495eb6a2d",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "check",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 220,
        "wires": [
            [
                "ec96f91dfb1e17e0"
            ]
        ]
    },
    {
        "id": "fffc367495eb6a2d",
        "type": "ui_group",
        "name": "Temperatura",
        "tab": "b0b5440f73fb87b5",
        "order": 1,
        "disp": true,
        "width": "8",
        "collapse": false
    },
    {
        "id": "b0b5440f73fb87b5",
        "type": "ui_tab",
        "name": "Edycja",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": true
    }
]

```

---

<div class="post-metadata">

**Author:** ![Vrrrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vrrrum/32/60000_2.png) [@Vrrrum](https://discourse.nodered.org/u/Vrrrum)\
**Post date:** [31 July 2022 15:39 UTC](https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711/3 "2022-07-31T15:39:40Z")

</div>

@knoepsche I managed to make it work thanks to your code. I feel like I understand scope concept better, although it got me to know, how much I lack fundamental knowledge about node red. Guess it's time to finally read the documentation. 😃  
Thank you for help

---

<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:** [14 August 2022 15:40 UTC](https://discourse.nodered.org/t/cant-send-data-form-dashboard-template-node/65711/4 "2022-08-14T15:40:12Z")

</div>

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