Can't send data form dashboard template node

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

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

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

[
    {
        "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
    }
]
1 Like

@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. :smiley:
Thank you for help