# Button on click to send message and clear the global array

**URL:** <https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 October 2024 18:51 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838 "2024-10-31T18:51:13Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [31 October 2024 18:51 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/1 "2024-10-31T18:51:13Z")

</div>

Hello I am trying on click to send the message to the function that will clear the global array here is the flow

```auto
[{"id":"caf7fa4cbdf6f91e","type":"function","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"Clear Logging Array","func":"if (msg.payload === \"clear_logs\") {\n // Clear the global 'logging' array and update the table\n global.set(\"logging\", []);\n node.log(\"Global logging array has been cleared.\");\n msg.payload = [];\n msg.message = \"Logs cleared.\";\n return msg;\n}","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1400,"y":2220,"wires":[["ca81a0f9eea99800"]]},{"id":"4577d339083eb495","type":"ui-template","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","group":"f7fdf836d56bdb03","page":"","ui":"","name":"Button Clear Logs","order":2,"width":0,"height":0,"head":"","format":"<template>\n <v-btn\n :loading=\"loading\"\n :disabled=\"loading\"\n color=\"success\"\n @click=\"clearLogs\"\n >\n Custom Loader\n <template v-slot:loader>\n <span>Loading...</span>\n </template>\n </v-btn>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n loading: false, // Manage loading state\n };\n },\n methods: {\n clearLogs() {\n console.log(\"Button clicked\"); // Log when button is clicked\n this.loading = true;\n\n // Emit a message to Node-RED\n this.$emit('send', { payload: \"clear_logs\" });\n\n // Reset loading state after 3 seconds\n setTimeout(() => {\n this.loading = false; // Reset loading\n }, 3000);\n }\n }\n};\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1190,"y":2220,"wires":[["caf7fa4cbdf6f91e"]]},{"id":"ca81a0f9eea99800","type":"debug","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"debug 43","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1580,"y":2220,"wires":[]},{"id":"f7fdf836d56bdb03","type":"ui-group","name":"Logging","page":"25148f9cdfb57143","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"25148f9cdfb57143","type":"ui-page","name":"Logging","ui":"7bae01ab12536b80","path":"/logging","icon":"alert-box-outline","layout":"tabs","theme":"aa55762736872fc4","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":"7bae01ab12536b80","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"aa55762736872fc4","type":"ui-theme","name":"Default Theme","colors":{"surface":"#1b263b","primary":"#0473aa","bgPage":"#0d1b2a","groupBg":"#0d1b2a","groupOutline":"#0d1b2a"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [31 October 2024 20:16 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/2 "2024-10-31T20:16:09Z")

</div>

Why don't you just use a dashboard 2 `button` node?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [31 October 2024 20:19 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/3 "2024-10-31T20:19:13Z")

</div>

And indeed, why a function node rather than a change node to delete a context variable?

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [31 October 2024 20:26 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/4 "2024-10-31T20:26:00Z")

</div>

I am building the whole template and the button on that node cannot be styled nor anything or put it where ever I want

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [31 October 2024 20:27 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/5 "2024-10-31T20:27:17Z")

</div>

Whole a lot of WHYs no answer Sorry but I want to be as I am doing it

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [31 October 2024 20:36 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/6 "2024-10-31T20:36:13Z")

</div>

That's fine of course.

I did download your flow and try it.  
I noticed that no message is received by the function node.  
Unfortunately I don't understand the code in your template so I can't help you diagnose the problem.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2024 20:46 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/7 "2024-10-31T20:46:27Z")

</div>

Here's about how to send messages from `ui_template` node's

> **[Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#sending-data)**
>
> Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.

The emit basically creates an event which also reaches server side but not via the wire but can be listened by `ui_event` node

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [31 October 2024 21:17 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/8 "2024-10-31T21:17:00Z")

</div>

Is there any example similar flow I can see how is structure that? I am not a pro just trying to do some stuff here and there

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 October 2024 21:23 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/9 "2024-10-31T21:23:43Z")

</div>

Your template and flow works fine, just change the sending like this.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b58d9336d71c4c63a3c315deac563d0397c179d1.png)

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [31 October 2024 21:29 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/10 "2024-10-31T21:29:40Z")

</div>

Never mind I did it. Thank for pointing me to the right link

Here is the flow if someone wants to use it

```auto
[{"id":"4577d339083eb495","type":"ui-template","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","group":"f7fdf836d56bdb03","page":"","ui":"","name":"Button Clear Logs","order":2,"width":0,"height":0,"head":"","format":"<template>\n <v-btn\n :loading=\"loading\"\n :disabled=\"loading\"\n color=\"success\"\n @click=\"clearLogs\"\n >\n Custom Loader\n <template v-slot:loader>\n <span>Loading...</span>\n </template>\n </v-btn>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n loading: false, // Manage loading state\n };\n },\n methods: {\n clearLogs() {\n console.log(\"Button clicked\"); // Log when button is clicked\n this.loading = true;\n\n // Create the message object\n const msg = { payload: \"clear_logs\" };\n\n // Send the message to Node-RED\n this.send(msg);\n\n // Reset loading state after 3 seconds\n setTimeout(() => {\n this.loading = false; // Reset loading\n }, 3000);\n }\n }\n};\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1150,"y":2220,"wires":[["caf7fa4cbdf6f91e"]]},{"id":"caf7fa4cbdf6f91e","type":"function","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"Clear Logging Array","func":"if (msg.payload === \"clear_logs\") {\n // Clear the global 'logging' array and update the table\n global.set(\"logging\", []);\n node.log(\"Global logging array has been cleared.\");\n msg.payload = [];\n msg.message = \"Logs cleared.\";\n return msg;\n}","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1380,"y":2140,"wires":[["ca81a0f9eea99800"]]},{"id":"ca81a0f9eea99800","type":"debug","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"debug 43","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1540,"y":2220,"wires":[]},{"id":"f7fdf836d56bdb03","type":"ui-group","name":"Logging","page":"25148f9cdfb57143","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"25148f9cdfb57143","type":"ui-page","name":"Logging","ui":"7bae01ab12536b80","path":"/logging","icon":"alert-box-outline","layout":"tabs","theme":"aa55762736872fc4","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":"7bae01ab12536b80","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"aa55762736872fc4","type":"ui-theme","name":"Default Theme","colors":{"surface":"#1b263b","primary":"#0473aa","bgPage":"#0d1b2a","groupBg":"#0d1b2a","groupOutline":"#0d1b2a"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

ENJOY 😀 😀 😀 😀 😀 😀

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [1 November 2024 03:51 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/11 "2024-11-01T03:51:43Z")

</div>

Thanks for your trying to help. I already did it you can try it.

---

<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:** [15 November 2024 03:52 UTC](https://discourse.nodered.org/t/button-on-click-to-send-message-and-clear-the-global-array/92838/12 "2024-11-15T03:52:05Z")

</div>

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