Show confirmation modal when pressing a button

How would I go about displaying a confirmation modal screen when a button is pressed. My goal is to have the user confirm the action that will happen based on the button they pressed. If they select to continue the action would happen (i.e. API call to update a record in my database). If they select to cancel the action then the modal would go away and they would be back on the originating screen with no action having happened.

My specific example has an action button on each row of a list of people in a list. When that row’s button is pressed, the confirmation modal should be shown to confirm the action they are taking.

A direction on how to approach this would be greatly appreciated. Thanks!

Hey @sstava,

In your case I would suggest going with the standard browser confirm() function. It returns true or false based on a button user click:

image

Here are quick steps to do this:

  1. Say you have an array of users with an id property

  2. And you set a sequence to a space with text/button inside:

  3. Then, put a Delete action to your button like this:
    image
    Don’t forget to pass a particular sequence item id {{item.id}} so that the action knows which item it needs to delete

  4. In the first action step, use confirm and return both {{param.id}} and the result of the confirm call:

  5. Next, condition step where we separate the flow based on the result of the confirm call returned from a previous step:

  6. Lastly, delete the item (in my case - simply filter it out from the array - in your can this could be an HTTP call)


    and save the variable

And here is the result https://app.uibakery.io/share/7c4qd45jK0. Hope it helps

3 Likes

That worked perfectly! Thanks for the detailed and prompt response :smile:

1 Like