# Pop-up dialog window with group of ui-dashboard nodes

**URL:** <https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [18 December 2022 09:29 UTC](https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377 "2022-12-18T09:29:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![probitie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/probitie/32/71100_2.png) [@probitie](https://discourse.nodered.org/u/probitie)\
**Post date:** [18 December 2022 09:29 UTC](https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377/1 "2022-12-18T09:29:39Z")

</div>

Hi. I'm using node-red v3.0.2 and node-red-dashboard module.

I want to show a group of text input dashboard nodes (a list of options) in a pop-up window.  
I found a solution (but haven't tested it yet) - use dashboard notification node and iframe with custom window dialog size but is there a more proper way to do this?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [18 December 2022 10:00 UTC](https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377/2 "2022-12-18T10:00:09Z")

</div>

Modern browsers have dialog(+modal) element which would be best.

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/263975d92ab98bf0bcf68f23244cd7e396a7195e.jpeg "dialog = the easiest way to make a popup modal") ](https://www.youtube.com/watch?v=TAB_v6yBXIE)

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [18 December 2022 10:39 UTC](https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377/3 "2022-12-18T10:39:35Z")

</div>

In a ui-template node you could use the Angular.js service $mdDialog. This could be a start:  
 ![flowexample](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d0742f9e9b938a4c283f87a7df2dc03701b2977.jpeg)

```auto
<script>
    (function(scope){
        var testShowAlert = function ($mdDialog) {
            var alert = $mdDialog.alert({
                title: 'Attention',
                textContent: 'This is an example of how simple dialogs can be!',
                ok: 'Close'
            });
        
            $mdDialog
                .show( alert )
                .finally(function() {
                  alert = undefined;
                });
        }
        
        var testShowDialog = function ($mdDialog) {
            const ctrl = DialogController;
            const parentEl = angular.element(document.body);
            $mdDialog.show({
                parent: parentEl,
                template:
                    '<md-dialog aria-label="List dialog">' +
                    ' <md-dialog-content>'+
                    ' <md-list>'+
                    ' <md-list-item ng-repeat="item in ctrl.items">'+
                    ' <p>Number {{item}}</p>' +
                    ' </md-list-item></md-list>'+
                    ' </md-dialog-content>' +
                    ' <md-dialog-actions>' +
                    ' <md-button ng-click="ctrl.closeDialog()" class="md-primary">' +
                    ' Close Dialog' +
                    ' </md-button>' +
                    ' <md-button ng-click="ctrl.sendMsg()" class="md-primary">' +
                    ' Send Message' +
                    ' </md-button>' +
                    ' </md-dialog-actions>' +
                    '</md-dialog>',
                locals: {
                    items: ctrl.items
                },
                controller: DialogController,
                controllerAs: 'ctrl'
            });
            function DialogController($mdDialog) {
                this.items = [124, 2345, 5678];
                this.closeDialog = function() {
                    $mdDialog.hide();
                }
                this.sendMsg = function() {
                    scope.send({payload:'my message'});
                }
            }
        } 
        
        scope.showAlert = function() {
           var injector = angular.element("#nr-dashboard").injector();
           injector.invoke(testShowAlert,null,null);
        };
        
        scope.showDialog = function($event) {
           var injector = angular.element("#nr-dashboard").injector();
           console.log(injector);
           injector.invoke(testShowDialog,null,null);
        };
    
    })(scope);
</script>
<button ng-click="showAlert()">Test Alert</button>
<button ng-click="showDialog($event)">Test Dialog</button> 

```

---

<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:** [1 January 2023 10:39 UTC](https://discourse.nodered.org/t/pop-up-dialog-window-with-group-of-ui-dashboard-nodes/72377/4 "2023-01-01T10:39:51Z")

</div>

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