I am working on loading data to mysql using a dashboard. I want that as soon as the data is loaded correctly, a floating message appears saying that the data has been loaded correctly.
To do this, I used the affectedRow variable returned by the mysql node. I created the floating message, but the template node does not detect the msg.payload.affectedrow. Here I leave a simplification of the flow so that you can see where my error is.
greetings and thanks
[ { "id": "88bc9b7989643e09", "type": "inject", "z": "cb00c3a841285e40", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{ \"affectedRows\": 1 } ", "payloadType": "json", "x": 650, "y": 300, "wires": [ [ "781b3fffc708a025" ] ] } ]
Your flow contains only the Inject node. We need to see the template node too.
It is msg.payload.affectedRows, not msg.payload.affectedrow
sorry check it now
[
{
"id": "6b94d4a4c0e3829a",
"type": "debug",
"z": "cb00c3a841285e40",
"name": "debug 14",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1040,
"y": 300,
"wires": []
},
{
"id": "781b3fffc708a025",
"type": "ui_template",
"z": "cb00c3a841285e40",
"group": "fa937a70f3302944",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"format": "<!-- Contenedor del mensaje flotante -->\n<div id=\"floatingMessage\" class=\"floating-message\" style=\"display: none;\"></div>\n\n<script>\n (function(scope) {\n // Función para mostrar el mensaje flotante\n function showFloatingMessage(text, color) {\n const floatingMessage = document.getElementById('floatingMessage');\n floatingMessage.style.display = 'block';\n floatingMessage.textContent = text;\n floatingMessage.style.color = color;\n\n // Ocultar el mensaje después de 3 segundos\n setTimeout(function() {\n floatingMessage.style.display = 'none';\n }, 3000);\n }\n\n // Escuchar el mensaje que proviene del nodo inject\n scope.on('msg', function(msg) {\n console.log('Mensaje recibido en el template:', msg); // Verificar que se recibe el mensaje\n\n // Asegurarse de que msg.payload y msg.payload.affectedRows existan\n if ({{payload}} && {{payload.affectedRows}} !== undefined) {\n // Imprimir el número de affectedRows en la consola\n console.log('Affected Rows:', {{msg.payload.affectedRows}}); \n\n if ({{payload.affectedRows}} !== 0) {\n showFloatingMessage('Los datos fueron cargados exitosamente.', 'green');\n } else {\n showFloatingMessage('No se pudieron cargar los datos.', 'red');\n }\n } else {\n // Mensaje de advertencia si no se recibe affectedRows\n showFloatingMessage('Error: affectedRows no definido.', 'red');\n }\n });\n })(scope);\n</script>\n\n<style>\n .floating-message {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 15px;\n background-color: rgba(255, 255, 255, 0.9);\n border: 2px solid #ccc;\n border-radius: 5px;\n z-index: 1000;\n text-align: center;\n font-weight: bold;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n }\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 860,
"y": 300,
"wires": [
[
"6b94d4a4c0e3829a"
]
]
},
{
"id": "88bc9b7989643e09",
"type": "inject",
"z": "cb00c3a841285e40",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{ \"affectedRows\": 1 } ",
"payloadType": "json",
"x": 650,
"y": 300,
"wires": [
[
"781b3fffc708a025"
]
]
},
{
"id": "fa937a70f3302944",
"type": "ui_group",
"name": "Prueba Carga",
"tab": "8c22a23a1f8fc122",
"order": 1,
"disp": true,
"width": 30,
"collapse": false,
"className": ""
},
{
"id": "8c22a23a1f8fc122",
"type": "ui_tab",
"name": "prueba",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Using sope.$watch may work for you.
// Escuchar el mensaje que proviene del nodo inject
scope.$watch('msg', function(msg) {
console.log('Mensaje recibido en el template:', msg); // Verificar que se recibe el mensaje
// Asegurarse de que msg.payload y msg.payload.affectedRows existan
if (msg.payload && msg.payload.affectedRows !== undefined) {
// Imprimir el número de affectedRows en la consola
console.log('Affected Rows:', msg.payload.affectedRows);
if (msg.payload.affectedRows !== 0) {
showFloatingMessage('Los datos fueron cargados exitosamente.', 'green');
} else {
showFloatingMessage('No se pudieron cargar los datos.', 'red');
}
} else {
// Mensaje de advertencia si no se recibe affectedRows
showFloatingMessage('Error: affectedRows no definido.', 'red');
}
});
It worked, but every time I deploy the banner appears with the last message I received.I honestly don't understand the reason.
The msg.payload is being resent to the template when the page refreshes, you will need to detect a window.onload and halt the script some how.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
