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)
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:
<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
