Popup, confirm and alert best practices

Hilla
1

hi,
forgive my ignorance but my formation on UI design is quite old, so I’m trying to update my skills to do things “properly” :slight_smile:

So here is my use case. When an user submit a form, or perform any kind of action, in the callback I might want to stop the flow and maybe ask the user for confirmation or some extra input. In the past I used a lot things like window.confirm and window.alert for these things, but my understanding is that those things are not considered hygienic anymore :D

So what should I do with hilla?

My initial idea was to create a function like this:

function confirm() {
    const status = useSignal(false);
    let content = <ConfirmDialog opened={true} onConfirm={() => {
        status.value = true;
    }}>Are you sure?</ConfirmDialog>

    return status.value;
}

which of course doesn’t work. I suppose I need to append the element somewhere in the document for it to work, but is this the right way to do it? This function would be invoked somewhere else in the code by some callback suspending its execution.

Thank you
Fernando

2

Have you checked the component docs? There are several sample on how to use the different components with Java, React, etc.

So on how to add and open the confirm dialog, you find an example here: Confirm Dialog component | Vaadin components

When have opened the source code part, in the upper right, there is also a smaller “expand” button, that shows the whole sample file.

Hope that helps :slight_smile: