Trying to display messages on the dashboard with template node

Here is the flow. Yes I know there is notification node in dashboard 2 but this is much more flexable :grinning: :grinning: :grinning:

[{"id":"75bd32781e3cd9e2","type":"function","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"Send Alerts to the Dashboard","func":"// Retrieve the global 'logging' array\nlet loggingArray = global.get(\"logging\") || [];\n\n// Initialize an array to hold messages that need to be sent\nlet messagesToSend = [];\n\n// Iterate through the logging array\nloggingArray.forEach((entry, index) => {\n    if (entry.dashSend === 1) {\n        // Push the entry to the messages array\n        messagesToSend.push({\n            node: entry.node,\n            message: entry.message,\n            logLevel: entry.logLevel,\n            timestamp: entry.timestamp\n        });\n\n        // Set dashSend back to 0 to prevent it from being sent again\n        loggingArray[index].dashSend = 0;\n    }\n});\n\n// Update the global 'logging' array\nglobal.set(\"logging\", loggingArray);\n\n// If there are messages to send, send them as separate messages\nif (messagesToSend.length > 0) {\n    // Send each message one by one\n    messagesToSend.forEach(message => node.send({ payload: message }));\n}\n\nreturn null;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":470,"y":2400,"wires":[["09330440ee852dfd"]]},{"id":"09330440ee852dfd","type":"ui-template","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","group":"f7fdf836d56bdb03","page":"","ui":"","name":"Alert Template","order":0,"width":"3","height":"1","head":"","format":"<template>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Pompiere&display=swap\">\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Share:ital,wght@0,400;0,700;1,400;1,700&display=swap\">\n  <div>\n    <v-alert\n      v-for=\"(msg, index) in messages\"\n      :key=\"index\"  <!-- Use index as key for rendering -->\n      v-model=\"alertStatus[index]\"\n      border=\"start\"\n      close-label=\"Close Alert\"\n      color=\"success\"\n      title=\"Warning Alert\"\n      variant=\"tonal\"\n      closable\n      @close=\"removeAlert(index)\"  <!-- Add close handler -->\n    >\n      {{ msg }}  <!-- Display the message here -->\n    </v-alert>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      messages: [], // Initialize an array to hold messages\n      alertStatus: [] // Track the open status of each alert\n    };\n  },\n  methods: {\n    // Method to add a new alert message\n    addAlert(newMessage) {\n      this.messages.push(newMessage); // Add message to array\n      this.alertStatus.push(true); // Set alert as open\n    },\n    // Method to remove an alert by index\n    removeAlert(index) {\n      this.messages.splice(index, 1); // Remove the alert message\n      this.alertStatus.splice(index, 1); // Remove alert status\n    }\n  },\n  watch: {\n    msg(newMsg) {\n      if (newMsg && newMsg.payload && newMsg.payload.message) {\n        this.addAlert(newMsg.payload.message); // Add the new alert message\n      }\n    }\n  }\n}\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1000,"y":2400,"wires":[[]]},{"id":"ffe110f370a01245","type":"inject","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":2400,"wires":[["75bd32781e3cd9e2"]]},{"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"}}]

Actually this one is working perfectly

[{"id":"75bd32781e3cd9e2","type":"function","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"Send Alerts to the Dashboard","func":"// Retrieve the global 'logging' array\nlet loggingArray = global.get(\"logging\") || [];\n\n// Initialize an array to hold messages that need to be sent\nlet messagesToSend = [];\n\n// Iterate through the logging array\nloggingArray.forEach((entry, index) => {\n    if (entry.dashSend === 1) {\n        // Push the entry to the messages array\n        messagesToSend.push({\n            node: entry.node,\n            message: entry.message,\n            logLevel: entry.logLevel,\n            timestamp: entry.timestamp\n        });\n\n        // Set dashSend back to 0 to prevent it from being sent again\n        loggingArray[index].dashSend = 0;\n    }\n});\n\n// Update the global 'logging' array\nglobal.set(\"logging\", loggingArray);\n\n// If there are messages to send, send them as separate messages\nif (messagesToSend.length > 0) {\n    // Send each message one by one\n    messagesToSend.forEach(message => node.send({ payload: message }));\n}\n\nreturn null;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":470,"y":2400,"wires":[["09330440ee852dfd"]]},{"id":"09330440ee852dfd","type":"ui-template","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","group":"f7fdf836d56bdb03","page":"","ui":"","name":"Alert Template","order":0,"width":"3","height":"1","head":"","format":"<template>\n  <div>\n    <v-alert\n      v-model=\"alert\"\n      border=\"start\"\n      close-label=\"Close Alert\"\n      color=\"success\"\n      title=\"Warning Alert\"\n      variant=\"tonal\"\n      closable\n    >\n      {{ message }}  <!-- Display the message here -->\n    </v-alert>\n  </div>\n</template>\n\n<script>\nexport default {\n  data: () => ({\n    alert: true,\n    message: '' // Initialize message\n  }),\n  methods: {\n    // Method to update the alert message\n    updateMessage(newMessage) {\n      this.message = newMessage; // Set the new message\n      this.alert = true; // Show the alert\n    }\n  },\n  watch: {\n    msg(newMsg) {\n      if (newMsg && newMsg.payload && newMsg.payload.message) {\n        this.updateMessage(newMsg.payload.message); // Update the alert message\n      }\n    }\n  }\n}\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1000,"y":2400,"wires":[[]]},{"id":"ffe110f370a01245","type":"inject","z":"a1b23c45d6e7890f","g":"62fd9d439065487e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":2400,"wires":[["75bd32781e3cd9e2"]]},{"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"}}]

but this flow replacing the existing alert the goal is to display multiple alerts one on top of the other instead of replacing the existing alert. Tried few things but I can't get it to work in the 1st flow

Can anyone help me with this

Running your flow produces no output.

This is because your function node is retrieving data from global context but you have not provided that data.

If you want help, you should create a second flow that will populate the global context so the first flow will work and people can see your issue.