Dashbord 2 ui-notification with input dialog

Dashboard
1

Hi.

l'd like to use node-red-dashboard's ui-notification with input dialog in dashboard 2.0. Apparently, in dashboard-2 there is no configuration to do so. Any idea how could I achieve it?

I can add some raw HTML/JS in the pop up with some kind of input lines, but I dont know how to send back that data once the manual confirmation button is pushed.

Thanks!

PD: Configuration I'm looking for

image
image700Ă—436 11.1 KB

2

You can use these options to achieve that in the D2 Notification node.

image
image393Ă—145 6.95 KB

3

Thanks, Colin. I didn't explain that clearly. What I meant is that the "Dialog with Input" option doesn't seem to be available in D2.

I'm trying to do something that was already working in D1. The goal is for the user to enter some data in a popup, and when they click "Confirm," the input text should be sent back in the msg.

4

Well that is not what the OK cancel in the D1 node does.

You can do what I think you want using a Dialog Group.

5

Do you mean like this ?

dialog

1 Like
6

D1 does let the UI user add input in the notification pop-up.

image
image1383Ă—333 19.3 KB

image
image540Ă—315 6.77 KB

Besides that, the OK/CANCEL option is configurable (like for the D2 version), but I was specifically looking for the "INPUT" field.

I ended up creating my own pop-up using the template node as a workaround. Sharing it here in case anyone finds it useful:

Code here

[{"id":"8ef2682874b9fe11","type":"ui-template","z":"059063a63c8bf866","group":"","page":"","ui":"","name":"Notification","order":0,"width":0,"height":0,"head":"","format":"<template>\n <!-- Modal structure -->\n <div id=\"commentModal\" class=\"modal-notify-ui\">\n <div class=\"modal-content-notify-ui\">\n <!-- Textarea for user input -->\n <textarea id=\"commentText\" placeholder=\"Enter your comment\"></textarea>\n <!-- Buttons for actions -->\n <div class=\"modal-buttons-notify-ui\">\n <button id=\"okButton\">OK</button>\n <button id=\"cancelButton\">Cancel</button>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n // Reference to the current node (used for sending messages)\n const node = this;\n\n // Get DOM elements\n const commentModal = document.getElementById('commentModal');\n const commentText = document.getElementById('commentText');\n const okButton = document.getElementById('okButton');\n const cancelButton = document.getElementById('cancelButton');\n\n // Object to store incoming messages\n let inMsg = {};\n\n // Function to open the modal\n function openModal(inputMessage) {\n if (inputMessage) {\n commentText.placeholder = inputMessage; // Set placeholder if inputMessage is provided\n }\n commentModal.style.display = 'block'; // Show the modal\n commentText.focus(); // Focus on the textarea\n }\n\n // Function to close the modal\n function closeModal() {\n commentModal.style.display = 'none'; // Hide the modal\n commentText.value = ''; // Clear the textarea\n commentText.placeholder = ''; // Reset the placeholder\n }\n\n // Event listener for the \"OK\" button\n okButton.addEventListener('click', function () {\n const comment = commentText.value; // Get the comment from the textarea\n inMsg.inMessageContent = comment; // Store the comment in the inMsg object\n node.send(inMsg); // Send the message\n closeModal(); // Close the modal\n });\n\n // Event listener for the \"Cancel\" button\n cancelButton.addEventListener('click', closeModal);\n\n // Socket listener to trigger the modal with a message\n this.$socket.on('msg-input:' + this.id, function (msg) {\n inMsg = msg; // Store the incoming message\n openModal(inMsg.payload); // Open the modal with the message payload as the placeholder\n });\n</script>\n\n<style>\n /* Modal styling */\n .modal-notify-ui {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 1; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto; /* Enable scrolling if needed */\n background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */\n }\n\n /* Modal content styling */\n .modal-content-notify-ui {\n background-color: #3d3d3d; /* Dark background */\n margin: 15% auto; /* Centered */\n padding: 20px;\n border: 1px solid #888;\n border-radius: 10px; /* Rounded corners */\n width: 80%;\n max-width: 500px; /* Responsive width */\n color: white; /* Text color */\n }\n\n /* Textarea styling */\n .modal-content-notify-ui textarea {\n width: 100%;\n height: 100px; /* Fixed height */\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 5px; /* Rounded corners */\n border: 1px solid #888;\n background-color: #2d2d2d; /* Darker background */\n color: white; /* Text color */\n }\n\n /* Button container styling */\n .modal-buttons-notify-ui {\n display: flex;\n justify-content: flex-end; /* Align buttons to the right */\n gap: 10px; /* Space between buttons */\n }\n\n /* Button styling */\n .modal-buttons-notify-ui button {\n padding: 10px 20px;\n border: none;\n border-radius: 5px; /* Rounded corners */\n cursor: pointer; /* Pointer cursor on hover */\n color: white; /* Text color */\n background-color: #e40521; /* Red background */\n transition: background-color 0.3s ease; /* Smooth hover effect */\n }\n\n /* Button hover effect */\n .modal-buttons-notify-ui button:hover {\n background-color: #ff1a1a; /* Lighter red on hover */\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":906,"y":264,"wires":[[]],"icon":"font-awesome/fa-envelope-o"}]

Thanks for your help! :wink:

7

Much simpler, but yes. Nice pop-up btw!

8

Did you try using a Dialog Group? That was designed for exactly that type of requirement, but with much more flexibility than the D1 option.