# How to create dashboard node for toast popups?
**URL:** https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090
**Category:** Developing Nodes
**Created:** [16 February 2021 13:16 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090 "2021-02-16T13:16:02Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [16 February 2021 13:16 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/1 "2021-02-16T13:16:03Z")
Trying to build a simple node to show "[mdToast](https://material.angularjs.org/latest/api/service/%24mdToast)" popups on incoming messages. Looking at the existing "Notification" node I see [it uses `ui.add` to insert itself](https://github.com/node-red/node-red-dashboard/blob/master/nodes/ui_toast.js#L29), and not `ui.addWidget` (like "normal" widgets which belong to a `group` and have an `order` do):
```auto
module.exports = function(RED) {
var ui = require('../ui')(RED);
function ToastNode(config) {
RED.nodes.createNode(this, config);
...
var done = ui.add({
node: node,
control: {},
storeFrontEndInputAsState: false,
forwardInputMessages: false,
beforeSend: function (msg) {
var m = msg.payload.msg;
m.topic = node.topic || m.topic;
return m;
}
});
```
Since what I'm trying to do very closely matches the "Notification" node I'm basically trying to to build a clone of this node - but the `add` method is not available to me:
```auto
function MyNode(config) {
if(ui === undefined) {
ui = RED.require("node-red-dashboard")(RED);
}
...
var done = ui.add({
....
TypeError: ui.add is not a function
```
How do I add a hidden dashboard widget like `ui_toast` does?
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [16 February 2021 13:22 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/2 "2021-02-16T13:22:29Z")
> [@clickworkorange](#):
>
> add a hidden dashboard widget
Hi @clickworkorange,
If I'm not mistaken, the trick was to set the height to `-1`, like in the [node-red-contrib-ui-contextmenu](https://github.com/bartbutenaers/node-red-contrib-ui-contextmenu/blob/master/context_menu.html#L51) node.
Bart
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [16 February 2021 13:23 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/3 "2021-02-16T13:23:40Z")
Thanks! That sounds a bit "bodgy" though 🙂 I'd like to reuse as much as possible of the Angular mdToast functionality that's already in there...
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [16 February 2021 13:30 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/4 "2021-02-16T13:30:28Z")
It is not that we have abused some kind of backdoor to get it correct. At the time being @dceejay has been so kind to add this functionality for us in the dashboard, as you can read [here](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/14)
---
### Author:  [@clickworkorange](https://discourse.nodered.org/u/clickworkorange)
#### Post date: [16 February 2021 14:01 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/5 "2021-02-16T14:01:54Z")
No worries, I'm going with a fork of node-red-dashboard and will see if I can add a generic popup API based on [mdDialog](https://material.angularjs.org/latest/api/service/%24mdDialog) instead - this seems to be a better fit for my use case than mdToast, and I think the dashboard needs popup functionality anyway.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 April 2021 14:02 UTC](https://discourse.nodered.org/t/how-to-create-dashboard-node-for-toast-popups/41090/6 "2021-04-17T14:02:46Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.