# My Template does not respond as I expect after a key press

**URL:** <https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137>\
**Category:** General\
**Created:** [24 December 2024 16:04 UTC](https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137 "2024-12-24T16:04:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [24 December 2024 16:04 UTC](https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137/1 "2024-12-24T16:04:18Z")

</div>

when I deploy here is what my screen looks like

 ![onDeploy](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/6261f78d6821a155fe7f4df4a0a414499de5bfd8.jpeg)  
After I push a button here is what my screen looks like  
 ![buttonPush](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a764b20a586b7bbb34e411fd34375aa72b7200b.jpeg)  
My flow is setup to push to the template the same setup every time. I would expect to see the different cells return to a set configuration after 4 seconds but they don't. I have tried for two days so many different code configurations I'm getting lost. Time to yell for help.

```auto
[{"id":"05daba1cbc7fb101","type":"function","z":"763f73a520fc8a76","name":"Timer Running","func":"\n\n\nlet ZoneData = [];\n\nZoneData[0] = false;\nZoneData[1] = true;\nZoneData[2] = false;\nZoneData[3] = true;\nZoneData[4] = false;\nZoneData[5] = true;\n msg = {\n payload: ZoneData,\n }\n return msg;\n\n\n\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2340,"y":160,"wires":[["0672422db903f679","c9b39a90a8a4576b"]]},{"id":"c9b39a90a8a4576b","type":"debug","z":"763f73a520fc8a76","name":"debug 3","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":2540,"y":200,"wires":[]},{"id":"0672422db903f679","type":"ui-template","z":"763f73a520fc8a76","group":"f39cf9ca3b0aa2b9","page":"","ui":"","name":"Zone Testing","order":13,"width":"3","height":"1","head":"","format":"<template>\n <v-container>\n\n <v-col>\n <v-row class=\"topone\">Zone Status Testing</v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 1</v-card>\n <v-card class=\"topthree\">Zone 2</v-card>\n <v-card class=\"topthree\">Zone 3</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 1: Sunday to Wednesday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone1\" :class=\"{ 'active': isActive['zone1'] }\">{{ buttonText['zone1'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone2\" :class=\"{ 'active': isActive['zone2'] }\">{{ buttonText['zone2'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone3\" :class=\"{ 'active': isActive['zone3'] }\">{{ buttonText['zone3'] }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 4</v-card>\n <v-card class=\"topthree\">Zone 5</v-card>\n <v-card class=\"topthree\">Zone 6</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 2: Thursday to Saturday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone4\" :class=\"{ 'active': isActive['zone4'] }\">{{ buttonText['zone4'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone5\" :class=\"{ 'active': isActive['zone5'] }\">{{ buttonText['zone5'] }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zone6\" :class=\"{ 'active': isActive['zone6'] }\">{{ buttonText['zone6'] }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n\n </v-container>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n isActive: {\n zone1: false,\n zone2: false,\n zone3: false,\n zone4: false,\n zone5: false,\n zone6: false,\n },\n buttonText: {\n zone1: 'Off',\n zone2: 'Off',\n zone3: 'Off',\n zone4: 'Off',\n zone5: 'Off',\n zone6: 'Off',\n }\n };\n },\n\n watch: {\n msg: {\n deep: true,\n handler(newVal) {\n if (newVal.payload[0] == true) {\n this.buttonText['zone1'] = \"Active\";\n this.isActive['zone1'] = true;\n }\n if (newVal.payload[0] == false) {\n this.buttonText['zone1'] = \"Off\";\n this.isActive['zone1'] = false;\n }\n\n if (newVal.payload[1] == true) {\n this.buttonText['zone2'] = \"Active\";\n this.isActive['zone2'] = true;\n }\n if (newVal.payload[1] == false) {\n this.buttonText['zone2'] = \"Off\";\n this.isActive['zone2'] = false;\n }\n\n if (newVal.payload[2] == true) {\n this.buttonText['zone3'] = \"Active\";\n this.isActive['zone3'] = true;\n }\n if (newVal.payload[2] == false) {\n this.buttonText['zone3'] = \"Off\";\n this.isActive['zone3'] = !this.isActive;\n }\n\n },\n },\n },\n\n methods: {\n zone1() {\n this.send({ payload: 'zone1' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone1'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone1active', payload: false });\n } else {\n this.buttonText['zone1'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone1active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone2() {\n this.send({ payload: 'zone2' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone2'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone2active', payload: false });\n } else {\n this.buttonText['zone2'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone2active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone3() {\n this.send({ payload: 'zone3' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone3'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone3active', payload: false });\n } else {\n this.buttonText['zone3'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone3active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone4() {\n this.send({ payload: 'zone4' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone4'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone4active', payload: false });\n } else {\n this.buttonText['zone4'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone4active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone5() {\n this.send({ payload: 'zone5' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone5'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone5active', payload: false });\n } else {\n this.buttonText['zone5'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone5active', payload: true });\n }\n this.clicked = !this.clicked\n },\n zone6() {\n this.send({ payload: 'zone6' })\n this.isActive = !this.isActive // Toggle isActive state\n if (this.clicked) {\n this.buttonText['zone6'] = 'Off'\n this.isActive = false\n this.send({ topic: 'zone6active', payload: false });\n } else {\n this.buttonText['zone6'] = 'Active'\n this.isActive = true\n this.send({ topic: 'zone6active', payload: true });\n }\n this.clicked = !this.clicked\n },\n },\n\n};\n</script>\n\n<style>\n.root {\n \n}\n\n.topone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 25px; /* Adjust height as needed */\n background-color: black;\n color: white;\n font-size: 12px;\n text-align: center;\n border-bottom: 2px solid #dd7f00;\n border-top: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.bottomone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px; /* Adjust height as needed */\n background-color: black !important;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n //font-size: 40px;\n font-family: \"Times New Roman\", Times, serif;\n font-style: normal;\n}\n\n.bottomtwo {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 130px;\n height: 80px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.topthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\n height: 25px; /* Adjust height as needed */\n background-color: black;\n color: white;\n font-size: 12px;\n text-align: center;\n border-bottom: 2px solid #dd7f00;\n border-top: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.bottomthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\n height: 80px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n}\n\n.time{\n color: white;\n font-size: 12px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px; /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #dd7f00;\n border-bottom: 3px solid #dd7f00;\n border-left: 3px solid #dd7f00;\n border-right: 3px solid #dd7f00;\n}\n\n.active {\n background-color: green; /* Changed background color when active */\n}\n\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2530,"y":120,"wires":[[]]},{"id":"62043c6f074725a6","type":"inject","z":"763f73a520fc8a76","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"4","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"1","payloadType":"str","x":2170,"y":160,"wires":[["05daba1cbc7fb101"]]},{"id":"f39cf9ca3b0aa2b9","type":"ui-group","name":"MainPage","page":"1b352f1ce9069293","width":"3","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"1b352f1ce9069293","type":"ui-page","name":"Sprinkler","ui":"94623a7f1f14d705","path":"/Sprinkler","icon":"home","layout":"grid","theme":"ccd391fe59d04f39","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":1,"className":"","visible":"true","disabled":"false"},{"id":"94623a7f1f14d705","type":"ui-base","name":"Main","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"ccd391fe59d04f39","type":"ui-theme","name":"Sprink","colors":{"surface":"#000000","primary":"#000000","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

So here I am looking for help  
Thanks

[EDIT]on pi4b latest node red 4.08, node 22, all nodes updated to latest yesterday

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [24 December 2024 20:24 UTC](https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137/2 "2024-12-24T20:24:12Z")

</div>

Hello @gerry

1. I think you can simplify a lot of the code by using inline ternary operator  
so you dont have to use `buttonText` since most of the logic can be derived by `isActive` itself.

2. it would be more consistent if you send to the ui a msg that is an object instead of an array .. the same way you have it in the front end code. (made some change in the function node)

3. A single method `zoneClicked(zone)` can be used for all buttons

```auto
[{"id":"05daba1cbc7fb101","type":"function","z":"54efb553244c241f","name":"Timer Running","func":"// let ZoneData = [];\n\n// ZoneData[0] = false;\n// ZoneData[1] = true;\n// ZoneData[2] = false;\n// ZoneData[3] = true;\n// ZoneData[4] = false;\n// ZoneData[5] = true;\n\nlet ZoneData = {\n \"zone1\": false,\n \"zone2\": true,\n \"zone3\": false,\n \"zone4\": true,\n \"zone5\": false,\n \"zone6\": true\n}\n\nmsg = {\n payload: ZoneData,\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":400,"y":2880,"wires":[["0672422db903f679","c9b39a90a8a4576b"]]},{"id":"c9b39a90a8a4576b","type":"debug","z":"54efb553244c241f","name":"debug 3","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":600,"y":2920,"wires":[]},{"id":"0672422db903f679","type":"ui-template","z":"54efb553244c241f","group":"f39cf9ca3b0aa2b9","page":"","ui":"","name":"Zone Testing","order":1,"width":"3","height":"1","head":"","format":"<template>\n <v-container>\n\n <v-col>\n <v-row class=\"topone\">Zone Status Testing</v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 1</v-card>\n <v-card class=\"topthree\">Zone 2</v-card>\n <v-card class=\"topthree\">Zone 3</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 1: Sunday to Wednesday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone1')\" :class=\"{ 'active': isActive['zone1'] }\">{{ isActive['zone1'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone2')\" :class=\"{ 'active': isActive['zone2'] }\">{{ isActive['zone2'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone3')\" :class=\"{ 'active': isActive['zone3'] }\">{{ isActive['zone3'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n <v-col>\n <v-row>\n <v-card class=\"topthree\">Zone 4</v-card>\n <v-card class=\"topthree\">Zone 5</v-card>\n <v-card class=\"topthree\">Zone 6</v-card>\n </v-row>\n </v-col>\n\n <!-- Row 2: Thursday to Saturday -->\n <v-col>\n <v-row>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone4')\" :class=\"{ 'active': isActive['zone4'] }\">{{ isActive['zone4'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone5')\" :class=\"{ 'active': isActive['zone5'] }\">{{ isActive['zone5'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n <v-card class=\"bottomthree\">\n <v-btn rounded @click=\"zoneClicked('zone6')\" :class=\"{ 'active': isActive['zone6'] }\">{{ isActive['zone6'] ? 'Active' : 'Off' }}</v-btn>\n </v-card>\n </v-row>\n </v-col>\n\n </v-container>\n</template>\n\n<script>\n export default {\n data() {\n return {\n isActive: {\n zone1: false,\n zone2: false,\n zone3: false,\n zone4: false,\n zone5: false,\n zone6: false,\n },\n };\n },\n\n watch: {\n msg: {\n handler(newVal) {\n console.log(\"Msg received from Node-RED\", newVal.payload)\n this.isActive = newVal.payload // replace whole isActive obj\n },\n },\n },\n\n methods: {\n zoneClicked(zone) {\n this.isActive[zone] = !this.isActive[zone] // Toggle isActive state\n this.send({ payload: this.isActive })\n },\n },\n\n};\n</script>\n\n<style>\n .root {}\n\n .topone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 25px;\n /* Adjust height as needed */\n background-color: black;\n color: white;\n font-size: 12px;\n text-align: center;\n border-bottom: 2px solid #dd7f00;\n border-top: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n }\n\n .bottomone {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px;\n /* Adjust height as needed */\n background-color: black !important;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n //font-size: 40px;\n font-family: \"Times New Roman\", Times, serif;\n font-style: normal;\n }\n\n .bottomtwo {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 130px;\n height: 80px;\n /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n }\n\n .topthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\n height: 25px;\n /* Adjust height as needed */\n background-color: black;\n color: white;\n font-size: 12px;\n text-align: center;\n border-bottom: 2px solid #dd7f00;\n border-top: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n }\n\n .bottomthree {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 90px;\n height: 80px;\n /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #6689a1;\n border-bottom: 3px solid #6689a1;\n border-left: 3px solid #6689a1;\n border-right: 3px solid #6689a1;\n }\n\n .time {\n color: white;\n font-size: 12px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 270px;\n height: 40px;\n /* Adjust height as needed */\n background-color: black;\n border-top: 3px solid #dd7f00;\n border-bottom: 3px solid #dd7f00;\n border-left: 3px solid #dd7f00;\n border-right: 3px solid #dd7f00;\n }\n\n .active {\n background-color: green;\n /* Changed background color when active */\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":590,"y":2840,"wires":[["ac30d184b87915fa"]]},{"id":"62043c6f074725a6","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"10","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"1","payloadType":"str","x":230,"y":2880,"wires":[["05daba1cbc7fb101"]]},{"id":"ac30d184b87915fa","type":"debug","z":"54efb553244c241f","name":"debug 75","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":780,"y":2840,"wires":[]},{"id":"f39cf9ca3b0aa2b9","type":"ui-group","name":"MainPage","page":"1b352f1ce9069293","width":"3","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"1b352f1ce9069293","type":"ui-page","name":"Sprinkler","ui":"957559fb8731ef90","path":"/Sprinkler","icon":"home","layout":"grid","theme":"ccd391fe59d04f39","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":1,"className":"","visible":"true","disabled":"false"},{"id":"957559fb8731ef90","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"ccd391fe59d04f39","type":"ui-theme","name":"Sprink","colors":{"surface":"#000000","primary":"#000000","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [24 December 2024 20:44 UTC](https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137/3 "2024-12-24T20:44:38Z")

</div>

yep, it works, will need to study this further to see how it works, assuming I can wrap my head around it  
thanks

---

<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:** [7 January 2025 20:44 UTC](https://discourse.nodered.org/t/my-template-does-not-respond-as-i-expect-after-a-key-press/94137/4 "2025-01-07T20:44:50Z")

</div>

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