Hello everyone,
I am wondering if it is possible to add a text input to the "show notification" node when in "OK/ Cancel Dialog" Layout mode, to be outputted in msg.payload when the button is pressed.
In this node, moreover, the output is displayed only when the 2nd action label (button) is defined. It would be nice to have the output msg even when a single button is used, to notify the flow of the UI action.
I am trying to replicate what I need with the template node, but it is not working properly (it pops up when refreshing the page for example). See example flow below.
Any hints?
Edit: I just realized that the template node works much nicely when "Add output message to stored state" option is enabled. If disabled every page refresh the dialog appears.
[{"id":"93b9b6f5.e51a08","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"be3f0e50.8ae96","type":"ui_group","z":"","name":"Default","tab":"","disp":true,"width":"6","collapse":false},{"id":"43f48c27.fb4734","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":false},"page-titlebar-backgroundColor":{"value":"#097479","edited":false},"page-backgroundColor":{"value":"#111111","edited":false},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":false},"group-borderColor":{"value":"#555555","edited":false},"group-backgroundColor":{"value":"#333333","edited":false},"widget-textColor":{"value":"#eeeeee","edited":false},"widget-backgroundColor":{"value":"#097479","edited":false},"widget-borderColor":{"value":"#333333","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"5b337e3b.68826","type":"ui_tab","z":"","name":"Home","icon":"home","order":1},{"id":"35c01506.6c84ca","type":"ui_group","z":"","name":"Test me buttons","tab":"5b337e3b.68826","order":1,"disp":true,"width":"6","collapse":false},{"id":"133c8561.79df4b","type":"ui_group","z":"","name":"Template tab","tab":"5b337e3b.68826","order":2,"disp":true,"width":"6","collapse":false},{"id":"3b655c4e.939ed4","type":"ui_button","z":"93b9b6f5.e51a08","name":"","group":"35c01506.6c84ca","order":1,"width":0,"height":0,"passthru":false,"label":"Show standard notification","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Standard notification text from button message (maybe some custom HTML here?)","payloadType":"str","topic":"Standard notification title","x":460,"y":100,"wires":[["f4add6ab.a18b18"]]},{"id":"f4add6ab.a18b18","type":"ui_toast","z":"93b9b6f5.e51a08","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"Cancel","topic":"","name":"","x":750,"y":100,"wires":[[]]},{"id":"da7fa357.ca465","type":"ui_button","z":"93b9b6f5.e51a08","name":"","group":"35c01506.6c84ca","order":2,"width":0,"height":0,"passthru":false,"label":"Show notification made with template","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"show","x":430,"y":160,"wires":[["e4e666ba.a98938"]]},{"id":"e4e666ba.a98938","type":"ui_template","z":"93b9b6f5.e51a08","group":"133c8561.79df4b","name":"","order":1,"width":0,"height":0,"format":"<div ng-init=\"init()\" id=\"pin_insert\" class=\"dialog\">\n \n <div class=\"dialog_content\">\n \n <div class=\"dialog_header\">\n <h2 style=\"margin:10px\">Template page title</h2>\n </div>\n \n <div class=\"dialog_body\">\n\t\t\t<p>\n\t\t\tUsing the dialog class is not as elegant as the show notification. Style is not herited from the environment!\n\t\t\t</p>\n\t\t\t\n\t\t\t<label>Some nice test can be added by the user here </label><br>\n\t\t\t<input type=\"text\" ng-model= \"passcode\" ng-model-options=\"{ debounce: 200 }\" \n\t\t\tstyle=\"width: 100%\"><br>\n\n\t\t\t<md-button class=\"btn1 vibrate filled touched bigfont\" ng-click=\"closeDialog()\">Send text to the msg.payload output</md-button>\n </div> \n </div> \n</div> \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 color : rgb(255,255,255);\n\tbackground-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\tposition: absolute;\n background-color: rgb(51,51,51);\n left: 25%;\n top: 30px;\n border-radius: 3px;\n padding: 0;\n width: 50%;\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}\n\n/* Dialog Header */\n.dialog_header {\n padding: 2px 16px;\n background-color: rgb(20,117,120);\n border-radius: 3px 3px 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\n.btn1 {\n color : rgb(255,255,255);\n background-color: rgb(20,117,120);\n border-radius: 3px 3px 3px 3px;\n font-size: 16px;\n}\n\n\n</style>\n\n<script>\nvar dialog;\n\n/* ==== */\n(function(scope) {\n \n scope.passcode = \"\";\n \n scope.init = function() {\n scope.send({payload : \"init\"});\n\t\tscope.passcode = \"\";\n //Hide the md-panel\n $('#pin_insert').parent().parent().css(\"display\", \"none\");\n //This trick make it works on smartphones too :)\n dialog = $('#pin_insert').detach();\n //dialog.appendTo(document.body); // This leaves ghost numpads if pinpad is not opened!\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 dialog.css(\"display\", \"none\");\n\t\tscope.send({payload : scope.passcode});\n }\n \n\n scope.$watch('msg', function(data) {\n if(data && data.topic){\n switch(data.topic){\n case \"show\":\n\t\t\t\t\t\tscope.passcode = \"\";\n scope.showDialog();\n break;\n case \"close\": \n dialog.css(\"display\", \"none\");\n break;\n }\n }\n });\n})(scope);\n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":680,"y":160,"wires":[["c66d74c8.2a9058"]]},{"id":"c66d74c8.2a9058","type":"debug","z":"93b9b6f5.e51a08","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":870,"y":160,"wires":[]}]
