# Looking for a text input dialog popup window similar to notification widget

**URL:** <https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838>\
**Category:** Dashboard\
**Created:** [29 March 2020 16:21 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838 "2020-03-29T16:21:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [29 March 2020 16:21 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/1 "2020-03-29T16:21:50Z")

</div>

Hi,

do anybody know a way to create a popup dialog like notification ok / cancel but with a text input field?  
Or alternatively a dropdown list widget with editable text line.

I like to have a quick way to ask the user for a data set name when he clicks on a "new" button without eating up dashboard space. Normally I do it like below but the 2nd text input line is only usefull when a new item is created and rest of the time showing redundant information.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1c289f3c36508935d019472065777430dbd7a1c0.png)

I searched the forum and flows with little success.

Thank you for your help.  
Chris.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 March 2020 22:45 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/2 "2020-03-30T22:45:52Z")

</div>

Hi, this might not be exactly what you want but it might be a good starting point...

### Demo

![popup_dialog](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/786cb637642355f1b0e90d5a32345b781fffb7d0.gif)

### Flow...

```auto
[{"id":"18d52ef4.d18761","type":"ui_button","z":"19edfd5e.e96e03","name":"","group":"6d01ec93.b1d374","order":0,"width":0,"height":0,"passthru":false,"label":"First name","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"topic\":\"first_name\", \"title\":\"What is your first name?\", \"label\" : \"First Name\" }","payloadType":"json","topic":"show","x":150,"y":180,"wires":[["6e97d8ed.f01638"]]},{"id":"6e97d8ed.f01638","type":"ui_template","z":"19edfd5e.e96e03","group":"4510203f.79061","name":"User Input dialog","order":0,"width":"0","height":"0","format":"<div ng-init=\"init()\" id=\"popup_dialog\" class=\"dialog\">\n \n <div class=\"dialog_content\">\n \n <div class=\"dialog_header\">\n <span ng-click=\"closeDialog()\" class=\"close\">&times;</span>\n <h2 class=\"title\">{{payload.title}}</h2>\n </div>\n \n <div class=\"dialog_body\">\n\n <div layout=\"column\" layout-align=\"center\" style=\"margin-top: 10px\">\n <md-input-container>\n <label>{{payload.label}}</label>\n <input ng-model=\"userInput\">\n </md-input-container>\n \n <div layout=\"row\" layout-align=\"center\">\n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"confirm()\">\n <ng-md-icon icon=\"done\" style=\"color:#fff;\"></ng-md-icon> OK\n </md-button>\n </div>\n \n <div class=\"btn_box\">\n <md-button class=\"btn\" ng-click=\"closeDialog()\">\n <ng-md-icon icon=\"close\" style=\"color:#fff;\"></ng-md-icon> Cancel\n </md-button>\n </div>\n </div>\n </div> \n \n </div> <!--dialog_body-->\n </div> <!--dialog_content-->\n</div> <!--dialog-->\n\n\n<style>\n\n/* The Dialog (background) */\n.dialog {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n z-index: 9999; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n -webkit-transform: translateZ(0px);\n -webkit-transform: translate3d(0,0,0);\n -webkit-perspective: 1000;\n}\n\n.dialog_content {\n position: absolute;\n background-color: #fff;\n left: calc(50% - 170px);\n top: 30px;\n border-radius: 10px;\n padding: 0;\n width: 340px;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n -webkit-animation-name: animatetop;\n animation-name: animatetop;\n animation-duration: 0.4s;\n}\nh2.title {\n margin:10px;\n font-size: 20px;\n}\n/* Media query for smartphones (to Fix?) */\n@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { \n .dialog_content {\n margin-top: 5%;\n margin-left: 5%;\n}\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n from {top: -300px; opacity: 0} \n to {top: 0; opacity: 1}\n}\n\n@keyframes animatetop {\n from {top: -300px; opacity: 0}\n to {top: 0; opacity: 1}\n}\n\n/* Dialog Header */\n.dialog_header {\n padding: 2px 16px;\n background-color: #03A9F4;\n border-radius: 10px 10px 0 0;\n color: white;\n}\n\n/* Dialog Body */\n.dialog_body {padding: 5px;}\n\n/* The Close Button */\n.close {\n color: #fff;\n float: right;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n}\n\n.close:hover,\n.close:focus {\n color: #1565C0;\n text-decoration: none;\n cursor: pointer;\n}\n\n/* Number container */\n.btn_box{\n margin: 5px;\n}\n\n/* Buttons style */\n.btn {\n min-height: 40px;\n min-width: 80px;\n font-weight: bold;\n margin: 0px 10px 10px 0px;\n box-shadow: 4px 4px 6px 0 #dadada;\n background-color: #29B6F6;\n color: #fff;\n}\n\n.btn:not([disabled]):hover {\n background-color: #03A9F4;\n}\n\n\n</style>\n\n<script>\n\n/ **\n * Steve-Mcl 2020-03-30\n * Adapated from the excellent work by Daniel Lando, https://github.com/robertsLando\n * to be the basis of a user input popup form\n * Original licence below...\n ********************************************************************************** \n * pin_dialog.js\n * Node-Red UI template for Node-Red Dashboard. \n * Custom dialog that asks for a PIN to allow actions\n * Enjoy it :). \n * -- Daniel\n *\n *\n * @license The Unlicense, http://unlicense.org/\n * @version 0.2\n * @author Daniel Lando, https://github.com/robertsLando\n * @updated 2019-03-18\n * @link ----\n * ********************************************************************************** \n *\n */\n\nvar dialog;\n\n/* ==== */\n(function(scope) {\n scope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n scope.inited = false;\n \n scope.init = function() {\n scope.userInput = \"\";\n //Hide the md-panel\n $('#popup_dialog').parent().parent().css(\"display\", \"none\");\n dialog = $('#popup_dialog').detach();\n }\n \n scope.showDialog = function() {\n dialog.appendTo(document.body); // better to add the body only when the numpad is displayed (seams to be removed automatically)\n dialog.css(\"display\", \"block\");\n }\n \n scope.closeDialog = function(){\n scope.userInput = \"\";\n scope.payload = \"\";\n scope.topic = \"\";\n dialog.css(\"display\", \"none\");\n }\n \n\n scope.confirm = function() {\n scope.send({topic: scope.payload.topic || scope.topic, userInput: scope.userInput});\n scope.closeDialog();\n }\n\n scope.$watch('msg', function(data) {\n if(data && data.topic){\n switch(data.topic){\n case \"show\":\n if(scope.inited){\n scope.topic = data.topic;\n scope.payload = data.payload;\n scope.showDialog();\n }\n else\n scope.inited = true;\n break;\n case \"close\": \n scope.closeDialog(); \n break;\n }\n }\n });\n})(scope);\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":350,"y":220,"wires":[["7a56c2fa.08d4ec"]]},{"id":"7a56c2fa.08d4ec","type":"debug","z":"19edfd5e.e96e03","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":550,"y":220,"wires":[]},{"id":"8f11fbad.908d98","type":"ui_button","z":"19edfd5e.e96e03","name":"","group":"6d01ec93.b1d374","order":0,"width":0,"height":0,"passthru":false,"label":"Last name","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"topic\":\"last_name\", \"title\":\"What is your surname?\", \"label\" : \"Surname\" }","payloadType":"json","topic":"show","x":150,"y":220,"wires":[["6e97d8ed.f01638"]]},{"id":"88d473b1.853b3","type":"comment","z":"19edfd5e.e96e03","name":"Have a look at the debug output - you can separate results by topic","info":"","x":580,"y":180,"wires":[]},{"id":"bdf2e591.e821f8","type":"comment","z":"19edfd5e.e96e03","name":"Setup the JSON for each button","info":"","x":210,"y":140,"wires":[]},{"id":"6d01ec93.b1d374","type":"ui_group","z":"","name":"UserEntry","tab":"24301019.1f614","disp":true,"width":"6","collapse":false},{"id":"4510203f.79061","type":"ui_group","z":"","name":"dialog","tab":"24301019.1f614","disp":false,"width":"1","collapse":false},{"id":"24301019.1f614","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

```

### Credit...

Adapted from [the excellent work](https://flows.nodered.org/flow/7bcb0b049df4fa3c962294137ebaec19) by Daniel Lando

### Thoughts...

This demo only does a text input box at this time. You should be able to easily adapt this to include other means of input by passing an additional property in the JSON payload used to open the dialog (e.g. `{"title":"Enter your age", "label":"Age", "type": "number", "min":1, "max":999 }` that would hide the text box and instead show a number input spinner)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 March 2020 23:03 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/3 "2020-03-30T23:03:58Z")

</div>

I thought dashboard 2.19.4 added ability for feedback from dialogues ?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 March 2020 23:23 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/4 "2020-03-30T23:23:59Z")

</div>

Thank you, that is precisely what I was looking for, will give it a try tomorrow.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 March 2020 23:24 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/5 "2020-03-30T23:24:29Z")

</div>

Now you mention it, I think I seen that somewhere. The notification node right?

Well if that or this meets @Christian-Me needs, all is well.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 March 2020 23:28 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/6 "2020-03-30T23:28:42Z")

</div>

You mean it is already in the notification node? That happens when you are using Node-RED for a longer time - you sometimes miss an upgrade when you get used to a certain functionality or even limitation.  
Great that I have now two options.  
Thank you, both, stay safe.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 April 2020 23:28 UTC](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/7 "2020-04-29T23:28:42Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.