Show Confirmation Popup when Deleting Records

You already know how to delete database records.
There are cases where you want to show users a confirmation dialog, asking them to confirm deletion. This can easily be done using Wappler static events and a simple method.

We have our dynamic table with a delete button for each of the records:

Select the delete record form:

Scroll down to STATIC EVENTS and click the add new static event button:

Select Form > Submit:

And then enter the following code: return confirm('Are you sure?');

Of course you can replace the text in the single quotes with any custom message you need to show.

The result is a native browser dialog, showing the custom message and OK and Cancel buttons. If the user clicks the OK button, the record will be deleted, otherwise the delete action won’t run:

4 Likes

How to apply this confirm to a button when it calls a server action ?

I usually display a confirmation modal with delete/cancel buttons. I expect you could display a button with a message, but then you would need to two other buttons - for the delete/cancel options. I would have thought a modal is the simplest solution.

Is there a solution for this other than using a confirmation modal? I’ve tried putting it wherever I can think of. For the most part the confirmation dialog still shows but the delete happens even on cancel.

I was having an issue using a form like the tutorial said as I was getting multiple form/fields of the same name errors so not sure how one would get around that.

Maybe I’m missing something?

You can place the delete form inside a modal, and run it there.
Use buttons in the form to call this modal and set the hidden field value to the ID of the selected record.

1 Like

I thought that was a more difficult solution but have implemented it today and it’s actually a more elegant look. It would be nice if Wappler had something like this built in but for now it works. Thanks.

I usually use modals for confirmation when deleting records, and also for inserts and updates. I put the three modals inside a single Data Detail component. I think this is a good solution. I wouldn’t have thought anything else could usefully be built in to automate this.

1 Like