Button on click to send message and clear the global array

[xlameee]

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

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

[zenofmud]

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

[jbudd]

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

[xlameee]

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

[xlameee]

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

[jbudd]

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.

[hotNipi]

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

Template ui-template | Node-RED Dashboard 2.0

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

[xlameee]

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

[hotNipi]

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

[xlameee]

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

Here is the flow if someone wants to use it

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

[xlameee]

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