How to show modal dialog in template node

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>

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 :frowning: 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">&times;</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>
5 Likes

Thank you very much for reply :blush:.

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