Hi guys, I would like to show modal dialog via template node. I have couple of inputs and want to show modal dialog, when user submit values, to confirm what will happen.
Thank you for a help.
Content of my template node:
<md-input-container>
<label>SSID</label>
<input name="retention_duration" ng-model="msg.payload.wifi.ssid" required >
<md-tooltip md-direction="top">SSID can be anything</md-tooltip>
</md-input-container>
<md-input-container>
<label>Password</label>
<input name="retention_duration" ng-model="msg.payload.wifi.key" required type="test" min="8" >
<md-tooltip md-direction="top">At least 8 characters is required</md-tooltip>
</md-input-container>
<md-input-container>
<md-button class="md-raised" ng-click="clicked(); send(msg)"
ng-disabled="!(msg.payload.wifi.ssid > 1) || !(msg.payload.wifi.key.length >= 8)">
Submit
</md-button>
</md-input-container>
1 Like
can you not use the existing ui_notify node ?
@dceejay valid point, trying to avoid changing a lot of code as ui_notify needs string in a payload and my whole application is carry all data in payload 
so kinda was hoping to just implement something like in bootstrap https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
the Dashboard "Notification" does not allow for user to type in an input text box as a response, Just OK/Cancel. Can you please update the "Notification" such that it allows for a pull down pick, or type in the answer.
I believe you can add a plain javascript function to your send function (well, you'll have to create one first -- it looks like you are currently using the angular scope.send(...)).
<md-button class="md-raised" ng-click="clicked(); sendMsg(msg)"
Then in your sendMsg function, make sure they really want to continue before sending:
function sendMsg(msg) {
if (confirm("Are you nuts?!?")) {
$scope.send(msg);
}
else {
console.warn("Whew! Crisis averted...");
}
}
Hi guys!
I have same question: I need to show configuration form to set pump and light timers.
The idea is to put the form into mdDialog: you click settings button which opens a dialog. Seems like ui_notify is unable to do so.
My dashboard is a custom ui_template, I try to keep it light and clean, as I have ten "Units" (shelvings where I grow plants, each has it's own grow settings) and don't like the idea to have 50 inputs on one page.
I tried to implement a custom dialog as described here https://material.angularjs.org/latest/demo/dialog,
but mdDialog object is not available in ui_template scope (why???).
According to https://github.com/node-red/node-red-dashboard/blob/master/src/main.js (line 60 atm) the mdDialog object is passed into app.controller constructor..
So, is there a way to invoke mdDialog in ui_template? If not, what would you suggest instead?
am trying to do the same thing. have u find a solution ???
Hi @ArtReaktor and @hathemi, possibly others,
Here's a basic modal that forgoes md-dialog for a plain js modal:
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
opacity:0.99;
z-index: 100; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<div>
Qty of silly hats
<input type="number" ng-model="msg.payload" name="quantity" min="0" max="1000">
<md-button ng-click="send(msg)">Click to send to Node-Red</md-button>
</div>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
6 Likes
Thank you very much for reply 
.
I updated the modal code two posts above, adding a "slide from top" intro, Header and footer sections.
1 Like
Hi there. what if i want to send multiple data in ng-click="send()"???
You could do something like:
<input type="number" ng-model="msg.payload.data1" name="quantity1" min="0" max="1000">
<input type="number" ng-model="msg.payload.data2" name="quantity2" min="0" max="1000">
<md-button ng-click="send(msg)">Click to send to Node-Red</md-button>
1 Like
thank you very very much. actually i did figure out a solution like this
<h3>Nom : </h3><input type="text" ng-model="msg4.payload" id="name" name="Nom" placeholder="Nom" required size="77"><br><br>
<h3>Prenom : </h3><input type="text" ng-model="msg2.payload" id="prenom" name="Prenom" placeholder="Prenom" required size="77"> <br><br>
<md-button class="md-accent" ng-click="send({payload : {msg4, msg2} })" ng-disabled="(msg4.payload == null) || (msg2.payload == null)">Enregistrer</md-button>
but your solution is much better, because i can store my data in .csv file. THANK YOU.
Hi there it's me again.
when i test modal i find that i can only send data once. i cannot save another one only if i deploy the project.
any idea PLEASE.?
i think that ng-click send msg without reseting the value of msg!!! how can i reset it ?? i tried ths ng-click="send(msg);msg={}" but it doest work
You can inject a msg with some empty strings (ex: msg.payload.data1 = "") in the input of the ui_template,
1 Like
thanks for replay. what i did is i empty the msg inside a function after adding in a file and return it to template.
would there be an easy way to add a onscreen numerical keypad?
This would be awesome to do a pin code check or numerical input for any sort of buttons/operations...
You could add in the modal your buttons with number 0 -9 as strings that add a character to the payload, then have a Delete button that slices the last character and finally your Validate button to send back to NR. :
<div>
PIN
<md-button ng-click="msg.payload = msg.payload + '1'">1</md-button>
<md-button ng-click="msg.payload = msg.payload + '2'">2</md-button>
<md-button ng-click="msg.payload = msg.payload + '3'">3</md-button>
<md-button ng-click="msg.payload = msg.payload + '4'">4</md-button>
<md-button ng-click="msg.payload = msg.payload + '5'">5</md-button>
<md-button ng-click="msg.payload = msg.payload + '6'">6</md-button>
<md-button ng-click="msg.payload = msg.payload + '7'">7</md-button>
<md-button ng-click="msg.payload = msg.payload + '8'">8</md-button>
<md-button ng-click="msg.payload = msg.payload + '9'">9</md-button>
<md-button ng-click="msg.payload = msg.payload.slice(0,-1)">DEL</md-button>
<input type="text" ng-model="msg.payload" name="pin">
<md-button ng-click="send(msg)">Validate</md-button>
</div>
1 Like
Thanks for your example.
unfortunately I still have the problem. If I use it several times in the same Dashboard Tab, even if I change the id= for everyone that it always opens the same modal.
first modal
<!-- Trigger/Open The Modal -->
<button id="first">Open Modal</button>
<!-- The Modal -->
<div id="firstModal" class="modal">
// Get the modal
var modal = document.getElementById('firstModal');
// Get the button that opens the modal
var btn = document.getElementById("fisrt");
second
<!-- Trigger/Open The Modal -->
<button id="second">Open Modal</button>
<!-- The Modal -->
<div id="secondModal" class="modal">
// Get the modal
var modal = document.getElementById('secondModal');
// Get the button that opens the modal
var btn = document.getElementById("second");
etc
