# Notification Class Name

**URL:** <https://discourse.nodered.org/t/notification-class-name/61648>\
**Category:** Dashboard\
**Created:** [22 April 2022 15:54 UTC](https://discourse.nodered.org/t/notification-class-name/61648 "2022-04-22T15:54:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mightyMinkus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mightyminkus/32/59891_2.png) [@mightyMinkus](https://discourse.nodered.org/u/mightyMinkus)\
**Post date:** [22 April 2022 15:54 UTC](https://discourse.nodered.org/t/notification-class-name/61648/1 "2022-04-22T15:54:31Z")

</div>

Hi guys, I am trying to customize the dashboard notification a bit with css. I'm trying to pass a custom class with msg.className. This works great when using the notifications that don't have OK/Cancel options, I can see the class name in the browser developer tools. However once I try passing the msg.className to an OK/Cancel notification I can't see the classname in the dev tools and so my custom css for that class does not work.

Has anyone been able to set the class for the OK/Cancel notifications?

BTW I am using node-red version 2.0.5 currently.

Here is a simple flow that passes the className to the notification node.

```auto
[{"id":"9133062da144d593","type":"ui_toast","z":"ccfccf27b2401ad0","position":"dialog","displayTime":"200","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":750,"y":320,"wires":[[]]},{"id":"4a8ff3aceed24b4a","type":"inject","z":"ccfccf27b2401ad0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":360,"y":320,"wires":[["139bf308cf4a273d"]]},{"id":"139bf308cf4a273d","type":"change","z":"ccfccf27b2401ad0","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"my-custom-nofication","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":320,"wires":[["9133062da144d593"]]}]

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 April 2022 23:22 UTC](https://discourse.nodered.org/t/notification-class-name/61648/2 "2022-04-22T23:22:32Z")

</div>

Not sure why but I agree it doesn't seem to work.

---

<div class="post-metadata">

**Author:** ![mightyMinkus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mightyminkus/32/59891_2.png) [@mightyMinkus](https://discourse.nodered.org/u/mightyMinkus)\
**Post date:** [24 April 2022 16:02 UTC](https://discourse.nodered.org/t/notification-class-name/61648/3 "2022-04-24T16:02:09Z")

</div>

I looked into the node-red dashboard code and it looks like the node.className || msg.className is not being used when a dialog toast notification is generated, but it is used when a non-dialog notification is.

I'm looking at the section of code starting at line 595 in main.js

```auto
        events.on('show-toast', function (msg) {
            if (msg.raw !== true) {
                var temp = document.createElement('div');
                temp.textContent = msg.message;
                msg.message = temp.innerHTML;
            }
            if (msg.dialog === true) {
                var confirm;
                if (msg.message == "") { $mdDialog.cancel(); return; }
                if (msg.cancel && msg.prompt) {
                    confirm = $mdDialog.prompt()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .initialValue("")
                        .ariaLabel(msg.ok + " or " + msg.cancel)
                        .ok(msg.ok)
                        .cancel(msg.cancel);
                    confirm._options.focusOnOpen = false;
                }
                else if (msg.cancel) {
                    confirm = $mdDialog.confirm()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .ariaLabel(msg.ok + " or " + msg.cancel)
                        .ok(msg.ok)
                        .cancel(msg.cancel);
                    confirm._options.focusOnOpen = false;
                }
                else {
                    confirm = $mdDialog.alert()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .ariaLabel(msg.ok)
                        .ok(msg.ok)
                }
                confirm._options.template = '<md-dialog md-theme="{{ dialog.theme || dialog.defaultTheme }}" aria-label="{{ dialog.ariaLabel }}" >' +
                    '<md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">' +
                        '<h2 class="md-title">{{ dialog.title }}</h2>' +
                        '<div ng-if="::dialog.mdHtmlContent" class="md-dialog-content-body"ng-bind-html="::dialog.mdHtmlContent | trusted"></div>' +
                        '<div ng-if="::!dialog.mdHtmlContent" class="md-dialog-content-body"><p>{{::dialog.mdTextContent}}</p></div>' +
                        '<md-input-container md-no-float ng-if="::dialog.$type == \'prompt\'" class="md-prompt-input-container"><input ng-keypress="dialog.keypress($event)" md-autofocus ng-model="dialog.result"placeholder="{{::dialog.placeholder}}" ng-required="dialog.required">' +
                        '</md-input-container>' +
                    '</md-dialog-content>' +
                    '<md-dialog-actions>' +
                        '<md-button ng-if="dialog.$type === \'confirm\' || dialog.$type === \'prompt\'"ng-click="dialog.abort()" class="md-primary md-cancel-button">{{ dialog.cancel }}</md-button>' +
                        '<md-button ng-click="dialog.hide()" class="md-primary md-confirm-button" md-autofocus="dialog.$type===\'alert\'" ng-disabled="dialog.required && !dialog.result">{{ dialog.ok }}</md-button>' +
                    '</md-dialog-actions>' +
                '</md-dialog>';
                $mdDialog.show(confirm, { panelClass:'nr-dashboard-dialog' }).then(
                    function(res) {
                        msg.msg.payload = msg.ok;
                        if (res !== true) { msg.msg.payload = res; }
                        if (res == undefined) { msg.msg.payload = ""; }
                        events.emit({ id:msg.id, value:msg });
                    },
                    function() {
                        msg.msg.payload = msg.cancel;
                        events.emit({ id:msg.id, value:msg });
                    }
                );
            }
            else {
                if (msg.hasOwnProperty("message") || msg.hasOwnProperty("title")) {
                    var toastScope = $rootScope.$new();
                    toastScope.toast = msg;
                    if (msg.hasOwnProperty("message") && msg.message == "") { msg.displayTime = 1; }
                    var opts = {
                        scope: toastScope,
                        templateUrl: 'partials/toast.html',
                        hideDelay: msg.displayTime,
                        position: msg.position,
                        toastClass: msg.toastClass
                    };
                    $mdToast.show(opts);
                }
            }
        });

```

You can see the toastClass is defined as msg.toastClass in the last else (for non-dialog $mdToast notifications) but its not for $mdDialog.

This is my first time looking at this code base so I'll have to familiarize myself more with it before suggesting any changes. Is anyone out there already familiar with this?

---

<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:** [24 April 2022 16:12 UTC](https://discourse.nodered.org/t/notification-class-name/61648/4 "2022-04-24T16:12:51Z")

</div>

So yes the dialog is adding panelClass - `$mdDialog.show(confirm, { panelClass:'nr-dashboard-dialog' })` instead - so I guess that needs to be optionally variable in some way.

---

<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:** [24 May 2022 16:13 UTC](https://discourse.nodered.org/t/notification-class-name/61648/5 "2022-05-24T16:13:41Z")

</div>

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