# Dialog not appering in DB2, only the page is faded

**URL:** https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [19 February 2024 22:38 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685 "2024-02-19T22:38:05Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [19 February 2024 22:38 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/1 "2024-02-19T22:38:05Z")

</div>

I am trying to implement a `v-dialog` in DB2. I took one of the example and added to a template node:

```auto
<template>
        <v-btn color="primary" @click="dialog = true">
            Open Dialog
        </v-btn>

            <v-dialog width="auto" v-model="dialog">
                <template>
                    <v-card color="white">
                        <v-toolbar color="primary" title="Opening from the bottom"></v-toolbar>
                        <v-card-text>
                            <div class="text-h2 pa-12">Hello world!</div>
                        </v-card-text>
                        <v-card-actions class="justify-end">
                            <v-btn variant="text" @click="dialog = false">Close</v-btn>
                        </v-card-actions>
                    </v-card>
                </template>
            </v-dialog>

</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                dialog: false,
            }
        },
        watch: {
            msg: function(){
                if(this.msg.payload != undefined){
                    this.dialog = true;
                }
            }
        }
    }
</script>

```

I set up this template as "Widget (Group-Scoped)". The "Open Dialog" button appears as expected, but when the page load the colors are faded as if the dialog is being displayed. When I click the fade is removed, hence I suspect the dialog was on. Although in the data section `dialog: false,` is set as default.  
Also when I press on the "Open Dialog" button, the dialog itself is not shown, just the page gets faded.

I changed the template to be Page scoped, removed the `v-btn` from the code but the behaviour is the same. I can correctly trigger dialog by sending a `msg.payload = true`, but again, colors are faded but the dialog is not appearing on the screen.

Any ideas? Is this a style issue?

---

<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: [20 February 2024 06:11 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/2 "2024-02-20T06:11:33Z")

</div>

Remove this template tag.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d2dd6b603ef5881b3215f55bc089c58101a3ffc4.png)

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [20 February 2024 06:56 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/3 "2024-02-20T06:56:03Z")

</div>

Thanks, I am not sure why there was a second `template` node in the `v-dialog`. Probably my copy and paste mistake.  
But the dialog still opens when I open the page the group is on. I also added a `mounted` method, I though that one was missing but still did not help:

```auto
        mounted() {
        // code here when the component is first loaded
            this.dialog = false
        },

```

Triggering from an external message works just fine.

---

<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: [20 February 2024 07:19 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/4 "2024-02-20T07:19:39Z")

</div>

Probably because of last msg replayed to the node and that triggers the dialog.

---

<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: [20 February 2024 08:45 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/5 "2024-02-20T08:45:23Z")

</div>

There is of course many ways how and why to show modal dialog. As the content can be surely almost everything it can go crazy ...

But for common and simple usage something like this should fit into DB2 world. It has no button involved for opening. It does take title and content from incoming msg.payload and then immediately sends out msg with `payload = undefined` to clear replay message. The data cannot be cleared during closing because of little animations on closing, they will jitter otherwise.

It is reasonable to have it ui scoped so no matter the page it can be used.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/785984a498c50ca06f5a4451ada4304ba429e0a2.png)

```auto
<template>
    <v-dialog width="auto" v-model="dialog">    
      <v-card color="white" v-click-outside="{handler: onClickOutside}">
        <v-toolbar color="primary">
          <v-card-title>
            <span>{{dialogData.title}}</span>
          </v-card-title>
        </v-toolbar>        
        <v-card-text>
          <div class="text-h2 pa-12">{{dialogData.content}}</div>
        </v-card-text>
        <v-card-actions class="justify-end">
          <v-btn variant="text" @click="closeDialog">Close</v-btn>
        </v-card-actions>
      </v-card>    
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
        dialogData:null
    }
  },
  watch: {
      msg: function(){
          if(this.msg.payload != undefined){                  
              this.dialogData = this.msg.payload;
              this.dialogData.shown = false
              this.send({payload:undefined})
          }
      }
  },
  methods:{
    closeDialog:function(){
      this.dialogData.shown = true;
    },
    onClickOutside () {
      this.dialogData.shown = true;
    },
  },
  computed : {
    title: function () {
      return this.dialogData?.title ?? ""
    },
    content:function(){
      return this.dialogData?.content ?? ""
    },
    dialog: function (){
      return this.dialogData?.shown == false
    }        
  },
  unmounted () {
    this.dialogData = null
  }
}
</script>

```

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [20 February 2024 17:28 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/6 "2024-02-20T17:28:28Z")

</div>

@hotNipi sorry to ask, but did you try this? It is not working for me.

---

<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: [20 February 2024 17:34 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/7 "2024-02-20T17:34:42Z")

</div>

Not working doesn't ring any bell. Can you be more specific

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [20 February 2024 18:00 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/8 "2024-02-20T18:00:06Z")

</div>

You have to give it a correctly structured payload, which you can determine from the code.

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [20 February 2024 18:24 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/9 "2024-02-20T18:24:08Z")

</div>

Sorry, I did not read the instruction properly. It works now.

Can I ask some questions about this? Just to make sure I understand this correctly?

1. The `v-dialog` has `v-model="dialog"` and here the `dialog` is the `dialog` function in the `computed` section? It it is a variable called `dialog` and when Vue is trying to use this value the corresponding `computed` function is called to evaluate it's value?
2. Why did you add the `title` and `content` functions? I understand that it sets the values to "", but these values would be set from `msg.payload` before the the dialog is shown, correct? Or is this just for good housekeeping? Or set the value in case the payload does not contain either the title or the content?
3. When I was passing a simple string in the payload instead of the object the dialog did not appear. Was this because JS code in the `watch` function failed at line `this.dialogData.shown = false;` when trying to set an attribute to a String?
4. What was the reason for defining `this.dialogData.shown = false`, instead of `this.dialogData.show = true` or `this.dialogData.visible = true`. Is this a convension I am missing here?
5. To be honest I still don't understand why `this.send({payload:undefined});` was necessary? If I set the template node not to pass through the input message, it does not appear on the output anyway, right?

---

<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: [20 February 2024 18:42 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/10 "2024-02-20T18:42:57Z")

</div>

> [@nygma2004](#):
>
> The `v-dialog` has `v-model="dialog"`

Computed is so to say "clever property". For this case they are simple but as for base of creating more complex thing it can be much more complicated - but still it returns a boolean or whatever it needs to be. You just can't fit really complex porterites into the template - that's why computed exist. For property `dialog` it is still same - "show or to not show".

> [@nygma2004](#):
>
> Why did you add the `title` and `content` functions?

As I stated - the dialog can be absolutely crazy thing. For title and content it is overkill maybe but if you create a form where input via msg provides only indication how to build that form, you'll need to manage that info to the real properties. So just follow the strategy to not fall into troubles when it grows.

> [@nygma2004](#):
>
> When I was passing a simple string

That falls into category "misconfiguration" cos for this solution the payload must be structured properly. Validation over the incoming msg is always key thing to create good product.

> [@nygma2004](#):
>
> What was the reason for defining `this.dialogData.shown = false`,

It is just my choice of logic. But overall this solution needs a boolean which is in one state before showing and turns over when dialog forced to close (no mater the closing trigger)

> [@nygma2004](#):
>
> this.send({payload:undefined});

As for DB1 there was replayMessage - it is same or similar for DB2. So if there is connection change - the server side does reply with last known msg. So if you opened dialog at some point of time - the last msg in reply conditions opens the dialog. That is unwanted, but unavoidable by any tools. The trick is to ruin that last msg to have no payload. And then if it comes - it is filtered out by `if(this.msg.payload != undefined){` So no more unwanted messages to trigger the dialog. This trick can be used anywhere if you want to avoid replayMessages.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [20 February 2024 20:32 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/11 "2024-02-20T20:32:48Z")

</div>

Why does the dialog not appear if `this.send({payload:undefined});` is removed?  
I am massaging the template to make an OK/Cancel dialog, so I have to send the appropriate message when one of the buttons is clicked. That works, but if I remove the send in the watch block then the dialog does not appear at all.

---

<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: [20 February 2024 20:37 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/12 "2024-02-20T20:37:28Z")

</div>

The replay is not and should not connected to the outcome of the user choice. Avoiding the replay is just for to not get same message popped up when it is not intentional.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [20 February 2024 20:40 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/13 "2024-02-20T20:40:25Z")

</div>

I have just realised that I messed up removing the send line. Getting rid of that does not stop the dialog appearing.

> [@hotNipi](#):
>
> The replay is not and should not connected to the outcome of the user choice.

Do you mean I should not use send() to send a message out of the template? If not then how should I do it? It does appear to work as I have written it.

---

<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: [20 February 2024 20:41 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/14 "2024-02-20T20:41:56Z")

</div>

Msg in and msg out should not use same msg object to not confuse the logic.

I have no choice to test it now but I think that after any operation with such modal the dialog data should be disconnected from msg so whatever next msg will bring the dialog it is pure.

The property this.msg is bound to the widget. It can be ruined or overwritten so think both ways and you figure that out.

I'm still sitting with my dog. No big screens and node red physically.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [20 February 2024 20:59 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/16 "2024-02-20T20:59:11Z")

</div>

Oh, I think I see now what you mean. I can send a message but I should use a different object. Unfortunately one of the requirements of an ok/cancel dialog is that it does not mess with other properties of the message so that the details of whatever it is that is being ok/cancelled is passed on with the message. I am not sure how to deal with that. This is what I have so far and it appears to work correctly, though I need to refine some aspects of it.

```auto
<template>
    <v-dialog width="auto" v-model="dialog">
        <v-card color="white" v-click-outside="{handler: onClickOutside}">
            <v-toolbar color="primary">
                <v-card-title>
                    <span>{{dialogData.title}}</span>
                </v-card-title>
            </v-toolbar>
            <v-card-text>
                <div class="text-h2 pa-12">{{dialogData.content}}</div>
            </v-card-text>
            <v-card-actions class="justify-end">
                <v-btn variant="text" @click="cancelDialog">Cancel</v-btn>
                <v-btn @click="okDialog">OK</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
  data() {
    return {
        dialogData:null
    }
  },
  watch: {
      msg: function(){
          if(this.msg.payload != undefined){                  
              this.dialogData = this.msg.payload;
              this.dialogData.shown = false
              this.msg.payload = undefined
              this.msg = msg
              /*this.send({payload:undefined})*/
          }
      }
  },
  methods:{
    okDialog:function(){
      this.dialogData.shown = true;
      this.msg.action = "ok"
      this.send(this.msg);
    },
    cancelDialog:function(){
      this.dialogData.shown = true;
      this.msg.action = "cancel"
      this.send(this.msg);
    },
    onClickOutside () {
      this.dialogData.shown = true;
      this.msg.action = "cancel"
      this.send(this.msg);
    },
  },
  computed : {
    title: function () {
      return this.dialogData?.title ?? ""
    },
    content:function(){
      return this.dialogData?.content ?? ""
    },
    dialog: function (){
      return this.dialogData?.shown == false
    }        
  },
  unmounted () {
    this.dialogData = null
  }
}
</script>

```

I am still ensuring that payload is undefined in order to stop it showing the dialog on refresh.

---

<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: [20 February 2024 21:03 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/17 "2024-02-20T21:03:26Z")

</div>

Clearing the payload after each send maybe another choice...

---

<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: [20 February 2024 21:29 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/18 "2024-02-20T21:29:16Z")

</div>

I do remember slight that there was discussion about the discarding replay message node or widget basis with DB1. Don't remember where it ended but should be possible cos it's just a coding. If such checkbox for widget would exist, there's no such fighting. @joepavitt to think about...

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [20 February 2024 21:59 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/19 "2024-02-20T21:59:56Z")

</div>

I've never liked message reply. Was kinda sad we ended up with this again in db2 (tho I don't know what the alternative is)

However, at minimum, the replay messages should identify this (perhaps a special `._msgReplay` flag) something we can use to discard (or keep) the data. Do we have this in db2?

Obviously a checkbox would be superior.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [21 February 2024 21:08 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/20 "2024-02-21T21:08:53Z")

</div>

I am popping up my dialog when the user clicks a button. How can I make it so that the dialog only appears on the session where the button was clicked? As it is at the moment it appears on all connected sessions and must be cleared separately on each. I am already making sure that `msg._client` is present in the msg sent to the template.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 February 2024 21:14 UTC](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685/21 "2024-02-21T21:14:27Z")

</div>

I don't know if this is a behaviour carried over from DB1 Colin. Will have to ask @joepavitt

Is there anything in the msg that looks to identify the session where you can compare it to a local variable?

[Next page](https://discourse.nodered.org/t/dialog-not-appering-in-db2-only-the-page-is-faded/85685.md?page=2)