Multiple text input in notification

Dashboard
1

Hi all,
I'm building something like a login dialogue.
To do this I'm using the node notification but I don't find a way to have more than one text input.
There is a way to have more than one text input?

This is my flow from now but it did not send the value of the first text input.
I think because the first one is in the title.

[{"id":"273f2657952486e5","type":"ui_toast","z":"a95c4d40.a6cc6","position":"prompt","displayTime":"3","highlight":"","sendall":false,"outputs":1,"ok":"OK","cancel":"Cancel","raw":true,"className":"","topic":"","name":"","x":530,"y":700,"wires":[["d915d2a3baa50d61"]]},{"id":"94e23136411f9681","type":"function","z":"a95c4d40.a6cc6","name":"function 2","func":"msg.payload = `<md-input-container md-no-float=\"\" ng-if=\"::dialog.$type == 'prompt'\" class=\"md-prompt-input-container md-auto-horizontal-margin md-input-has-placeholder md-default-theme md-input-has-value\" style=\"\"><input ng-keypress=\"dialog.keypress($event)\" md-autofocus=\"\" ng-model=\"dialog.result\" placeholder=\"\" ng-required=\"dialog.required\" class=\"ng-valid md-autofocus md-input ng-valid-required ng-not-empty ng-dirty ng-valid-parse ng-touched\" id=\"input_138\" aria-invalid=\"false\" style=\"\"><div class=\"md-errors-spacer\"></div></md-input-container>`;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":700,"wires":[["273f2657952486e5","362f8bfd332a9ea1"]]},{"id":"7aa4980e48c5f343","type":"inject","z":"a95c4d40.a6cc6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":700,"wires":[["94e23136411f9681","783c117fc538ed24"]]},{"id":"d915d2a3baa50d61","type":"debug","z":"a95c4d40.a6cc6","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":740,"y":700,"wires":[]},{"id":"362f8bfd332a9ea1","type":"debug","z":"a95c4d40.a6cc6","name":"debug 2","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":540,"y":740,"wires":[]},{"id":"783c117fc538ed24","type":"debug","z":"a95c4d40.a6cc6","name":"debug 3","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":360,"y":740,"wires":[]}]

Do you have any suggestions?

2

Admin Edit, I have edited the flow above to add newline before backticks on the end of the flow, to allow it to be imported.

1 Like
3

Perhaps you could build up something with the ui-template-node. I found an interesting solution for a modal alert dialog which possibly could be converted to one with input fields:

[
    {
        "id": "06ce0c67de868d70",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "29554d9cf6288f39",
        "type": "ui_template",
        "z": "06ce0c67de868d70",
        "group": "52e13bbe911008c8",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<script>\n(function(scope){\nvar testShowAlert = function ($mdDialog) {\nvar alert = $mdDialog.alert({\ntitle: 'Attention',\ntextContent: 'This is an example of how simple dialogs can be!',\nok: 'Close'\n});\n\n  $mdDialog\n    .show( alert )\n    .finally(function() {\n      alert = undefined;\n    });\n}\n\nscope.showAlert = function() {\n       var injector = angular.element(\"#nr-dashboard\").injector();\n       injector.invoke(testShowAlert,null,null);\n};\n\n})(scope);\n</script>\n<button ng-click=\"showAlert()\">Test Alert</button>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1000,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "52e13bbe911008c8",
        "type": "ui_group",
        "name": "TestGroup",
        "tab": "322aeab29d79e631",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "322aeab29d79e631",
        "type": "ui_tab",
        "name": "Alert",
        "icon": "dashboard",
        "order": 4,
        "disabled": false,
        "hidden": false
    }
]

It's from this forum discussion:
https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611

And the used service is documented here:
https://material.angularjs.org/latest/api/service/$mdDialog#javascript-object-syntax

I didn't go any further!

2 Likes
4

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