Trying to display messages on the dashboard with template node

Dashboard
1

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

2

Can anyone help me with this

3

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.

4

Here it go sorry.

[{"id":"b929f6f742f3a2e8","type":"ui-template","z":"f5595386db625673","group":"f7fdf836d56bdb03","page":"","ui":"","name":"Alert Template","order":1,"width":"3","height":"1","head":"","format":"<template>\n  <div>\n    <v-alert\n      v-for=\"(alertMessage, index) in messages\" \n      :key=\"index\"\n      border=\"start\"\n      close-label=\"Close Alert\"\n      color=\"success\"\n      title=\"Warning Alert\"\n      variant=\"tonal\"\n      closable\n    >\n      {{ alertMessage }} <!-- Display each message here -->\n    </v-alert>\n  </div>\n</template>\n\n<script>\nexport default {\n  data: () => ({\n    messages: [] // Initialize an array to hold messages\n  }),\n  methods: {\n    // Method to update the messages array\n    updateMessages(newMessages) {\n      this.messages = newMessages; // Set the new messages array\n    }\n  },\n  watch: {\n    msg(newMsg) {\n      if (newMsg && newMsg.payload) {\n        const messageArray = newMsg.payload.map(entry => entry.message); // Extract messages\n        this.updateMessages(messageArray); // Update the messages array with new messages\n      }\n    }\n  }\n}\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1360,"y":380,"wires":[[]]},{"id":"d9521746106b3784","type":"function","z":"f5595386db625673","name":"Send Alerts to the Dashboard","func":"// Retrieve the injected 'logging' array from msg.payload\nlet loggingArray = msg.payload || [];\n\n// Initialize an array to hold the messages\nlet messagesToSend = [];\n\n// Iterate through the logging array\nloggingArray.forEach((entry) => {\n    if (entry.dashSend === 1) {\n        // Add the entry's message to the messagesToSend 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        entry.dashSend = 0;\n    }\n});\n\n// If there are messages to send, pass them as an array\nif (messagesToSend.length > 0) {\n    msg.payload = messagesToSend; // Set the payload to the array of messages\n    return msg; // Send the array of messages to the next node (e.g., Vue frontend)\n}\n\nreturn null; // Return null if no messages to send","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":830,"y":380,"wires":[["5eb6d9a26bdd2830","b929f6f742f3a2e8"]]},{"id":"f5fb4ece2f164560","type":"inject","z":"f5595386db625673","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"node\":\"Clear Logging Array\",\"message\":\"Log Cleared1\",\"logLevel\":0,\"dashSend\":1,\"timestamp\":\"2024-11-05T03:11:58.925Z\"},{\"node\":\"Clear Logging Array\",\"message\":\"Log Cleared2\",\"logLevel\":0,\"dashSend\":1,\"timestamp\":\"2024-11-05T03:11:58.925Z\"},{\"node\":\"Clear Logging Array\",\"message\":\"Log Cleared3\",\"logLevel\":0,\"dashSend\":1,\"timestamp\":\"2024-11-05T03:11:58.925Z\"}]","payloadType":"json","x":490,"y":380,"wires":[["d9521746106b3784"]]},{"id":"5eb6d9a26bdd2830","type":"debug","z":"f5595386db625673","name":"debug 442","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1110,"y":440,"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":"cb79bc4520925e32","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":2,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","appIcon":"home","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"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"}}]
5

Any result? I forgot what I was doing. Very slow answers here

6

Sorry it has been a busy day for me. I have not worked with dashboard 2 very much so hopefully someone else (@Colin or @Steve-Mcl) might be able to take a look at your template node and spot the issue.

7

Most threads are answered very quickly. Your thread is rather far reaching and asking for something that possibly requires a fair bit of development time. If you have specific and concise questions you will typically get very fast answers.

8

@xlameee
There have been related feature requests (like this one) for the standard ui-notification been logged. Seen the very low number of users that are willing to contribute to the dashboard project, those issues haven't been implemented yet. So it would be better if you could try to help fixing it in the ui-notification node, instead of expecting the same few contributors to solve it similar issues in the ui-template nodes of all individual users. Otherwise the same few contributors will never find time to solve the dashboard issues...

1 Like
9

Nobody is paying for support in this forum - people voluntarily give up their free time to help others. I am sure that there are paid support options if you need a greater level of support.

10

Understood I will wait