Show ConfirmDialog programmatically

Hilla
1

hi all,
in my use case I’m processing the onClick action of something, which is forwarded to some util code outside of the component. If some condition is met I would like to show a confirm dialog to the user before proceeding, and I’m a bit lost on how to do it.

I would imagine something like:

function onClick() {
   if(some_condition)
      let confirmation: boolean = ConfirmDialog.show("Are you sure?");
      if(confirmation)
          proceed()
}

how can I implement this logic in vaadin?

cheers,
Fernando

2

There are samples for Java, React and Lit. In the upper right of the samples is also an expand button, that shows the complete sample code. For your case it shows how to open it on click and how to handle the result.

Please notice, that the dialog is not blocking like a browser confirm.

3

The common way is to create it in the template and open it with attributes and listeners.

But I was also thinking about lists with 100+ children, or if you have like 3 follow up dialog, you need like 3 open attributes and 3 confirm actions, because it may cause a larger overhead.
But the content is only rendered when the dialog is opened, if you use the DialogRenderer. And in your example the overhead wouldn’t be too much with only one question.

Anyways, in theory you create the element via JS api:

const dialog: ConfirmDialog = docuement.createElement('vaadin-confirm-dialog');
document.body.
dialog.opened = true;
dialog.addEventListener('confirm', () => {
   proceed()
   dialog.remove(); // remove dialog or reuse it
});

Events

If you need complex layouts, I did it with a dialog like this:

import { DialogOpenedChangedEvent } from "@vaadin/dialog";
import { dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { View } from "../view";

@customElement("preference-dialog")
export class PreferenceDialog extends View {

    @state()
    private accessor dialogOpened = true

    render() {
        return html`
                <vaadin-dialog
                class="w-full"
                .opened="${this.dialogOpened}"
                @opened-changed="${(event: DialogOpenedChangedEvent) => { this.openChanged(event) }}"
                .draggable=${false}
                .modeless=${false}
                .noCloseOnEsc=${false}
                .noCloseOnOutsideClick=${true}
                ${dialogRenderer(this.renderDialog, [])}
                ${dialogHeaderRenderer(this.renderHeader, [])}
            ></vaadin-dialog>
        `;
    }

    private renderDialog = () => html`
        <preference-layout .closeCallback=${ () => this.close()} ></preference-layout>
    `;
    private renderHeader = () => html`
        <vaadin-horizontal-layout
            class="w-full">
            <h2>Settings</h2> 
            <vaadin-button
                class="ml-auto"
                theme="tertiary contrast small"
                @click=${() => this.close()}
                >
                <vaadin-icon
                    icon="vaadin:close">
                </vaadin-icon>
            </vaadin-button>
        </vaadin-horizontal-layout>
    `;

    private openChanged(event: DialogOpenedChangedEvent) {
        this.dialogOpened = event.detail.value
        if (!this.dialogOpened) {
            setTimeout(() => {
                // wait for dialog close animation
                this.remove()
            }, 200)
        }
    }

    private close() {
        this.dialogOpened = false;
    }

}


const dialog: any = document.createElement('preference-dialog')
document.body.appendChild(dialog)