# Migrating to Dashboard 2.0 - Popup Windows with fields

**URL:** https://discourse.nodered.org/t/migrating-to-dashboard-2-0-popup-windows-with-fields/89553
**Category:** FlowFuse
**Tags:** dashboard-2
**Created:** [16 July 2024 21:37 UTC](https://discourse.nodered.org/t/migrating-to-dashboard-2-0-popup-windows-with-fields/89553 "2024-07-16T21:37:37Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)
#### Post date: [16 July 2024 21:37 UTC](https://discourse.nodered.org/t/migrating-to-dashboard-2-0-popup-windows-with-fields/89553/1 "2024-07-16T21:37:37Z")

</div>

Hi,  
On my dashboard 1.0, I am using ui\_template to display a popup windows by clicking on a ui\_button. The UI\_button send to the template several data to be displayed or corrected by the end user. I tried the same code ( HTML, Java) and this is not working, it's make Chrome crashing.

Then I wnt on Vuetify site and I find a very good exemple of what I need ([Dialog component — Vuetify](https://vuetifyjs.com/en/components/dialogs/#default))

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6c8d0d31a5fa9e23de8fd271a9dc52168d21eb95.png)

If I used the original code from Vuetify and leave the vButton embeded the popup working fine.

Because I need to send payload to the popup and trigger the popup windows display, I removed from the original Vuetify code :

```
    v-button ( <v-btn
      class="text-none font-weight-regular"
      prepend-icon="mdi-account"
      text="Edit Profile"
      variant="tonal"
      v-bind="activatorProps"
    ></v-btn> )  

```

I need to trigger the popup windows with the UI\_button because, as I said, I need to send data to the popup window as well as the trigger to get it popup.

I tried several things and I can't get it to popup.

The UI\_button send this msg.payload : "flowfuse-button-clicked"

Code in the UI\_template:

```auto
<template>
  <v-app>
    <v-container>
      <!-- Vuetify Dialog -->
      <v-dialog v-model="dialog" max-width="500px">
        <v-card>
          <v-card-title>
            Dialog Title
          </v-card-title>
          <v-card-text>
            This is the dialog content.
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary" text @click="dialog = false">
              Close
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-container>
  </v-app>
</template>

<script>

export default {
  data() {
    return {
      dialog: false, // State to control the dialog visibility
    };
  },
  mounted() {
    // Listen for the FlowFuse button click event
    EventBus.$on('flowfuse-button-clicked', this.openDialog);
  },
  methods: {
    openDialog() {
      this.dialog = true; // Open the dialog
    },
  },
  beforeDestroy() {
    // Clean up the event listener
    EventBus.$off('flowfuse-button-clicked', this.openDialog);
  },
  
};
</script>

<style>
/* Add any styles you need here */
</style>

```

If anyone have an idea what to do, it will be very appreciated

Best  
Yves

---

<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: [17 July 2024 09:03 UTC](https://discourse.nodered.org/t/migrating-to-dashboard-2-0-popup-windows-with-fields/89553/2 "2024-07-17T09:03:09Z")

</div>

To have "something happen when a message arrives" (in your case show a dialog), you can use 1 of 2 methods detailed in the section [Receiving Data](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#receiving-data). in this instance, option 2 seems like the right choice.

Here is a quick demo of that:

![chrome_LAZRm4mjxd](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5b8d7c828f572fe8541ea72531b44289399b345.gif)

```auto
[{"id":"f65d3a7f47e32c15","type":"ui-template","z":"3642c7ee286f9c17","group":"","page":"","ui":"910f5c9dea6a3de4","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-sheet class=\"mx-auto\" width=\"300\">\n <v-dialog v-model=\"dialog\" max-width=\"500px\">\n <v-form @submit.prevent>\n <v-card>\n <v-card-title>\n <v-text-field v-model=\"firstName\" label=\"First name\"></v-text-field>\n <v-text-field v-model=\"feedback\" label=\"Feedback\"></v-text-field>\n </v-card-text>\n <v-card-actions>\n <v-btn @click=\"onSubmit()\">Submit</v-btn>\n </v-card-actions>\n </v-card>\n </v-form>\n </v-dialog>\n </v-sheet>\n</template>\n\n<script>\n export default {\n data() {\n return {\n dialog: false,\n firstName: null,\n feedback: null\n }\n },\n mounted () {\n console.log('hello from mounted')\n this.$socket.on('msg-input:' + this.id, (msg) => { \n console.log('hello from template')\n if (msg && msg.topic === \"edit\") {\n this.dialog = true // open it\n this.firstName = msg.payload.firstName\n this.feedback = msg.payload.feedback\n }\n })\n },\n methods: {\n onSubmit: function () {\n const payload = {}\n this.dialog = false // close it\n payload.firstName = this.firstName\n payload.feedback = this.feedback\n this.send({ payload })\n }\n }\n }\n</script>\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":1590,"y":960,"wires":[["0fe46c457a3b3741"]]},{"id":"0fe46c457a3b3741","type":"debug","z":"3642c7ee286f9c17","name":"debug 51","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1640,"y":1040,"wires":[]},{"id":"f74371bcef1a490c","type":"inject","z":"3642c7ee286f9c17","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"edit","payload":"{}","payloadType":"json","x":1450,"y":920,"wires":[["f65d3a7f47e32c15"]]},{"id":"10d6a1c1c79fd895","type":"inject","z":"3642c7ee286f9c17","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"edit","payload":"{\"firstName\": \"harry\", \"feedback\": \"not good\"}","payloadType":"json","x":1450,"y":1000,"wires":[["f65d3a7f47e32c15"]]},{"id":"910f5c9dea6a3de4","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"}]

```

---

<div class="post-metadata">

### Author: ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)
#### Post date: [17 July 2024 09:17 UTC](https://discourse.nodered.org/t/migrating-to-dashboard-2-0-popup-windows-with-fields/89553/3 "2024-07-17T09:17:21Z")

</div>

Thanks a lot Steve, I was looking without seeing .. it is exactyle what I need...  
have a great day