How to create a generic confirmation popup?

Need help
1

What I am trying to achieve is this: On page X a button is clicked which triggers something, but only when the confirm button is clicked in the popup. The popup is of a generic type and does not know anything about where it is called from, nor what it is that it confirms.

The reason for this is, so I don’t have to create a confirmation popup for every single thing that needs confirmation.

The workflow on the page that needs confirmation for something would look like this:

User clicks something → Popup opens → An action is triggered, but only when the confirmation button in the popup is clicked

The issue I am facing with this is, the last action does not wait for the popup to confirm and is therefore never triggered.

2

I don’t understand what you mean by ‘it doesn’t wait and therefore is never triggered’? Surely if it doesn’t wait that would mean it’s triggered straight away? Or do you mean it does wait (forever) and therefore is never triggered?

Anyway, this should be simple - you’ll need to use custom states and conditional actions on the Confirm button to manage what ‘thing’ the action is being applied to (or even what action is being applied).

Then just set the appropriate custom state value when the User clicks the initial trigger to open the popup, and run the appropriate action on that Thing when the Confirm button is clicked.

3

Thank you for your response.

I am assuming that your suggestion is to trigger the action on the confirm button of the popup?

I have done this, and it truly works just fine. The issue with this is, that I have to create a confirm popup and button for every thing/page I need a confirmation for. I am looking for a generic attempt.

I’ve created a sample app to illustrate what I am looking for:

Generic Confirmation Popup

The goal in this app is, to have one single popup, that can confirm any action. But the way it is built right now is not working.

See the description in the app itself.

4

Hey @emailtester32 :wave:

We have a paid video on our eLearning Hub about this if you want to check it out.

Using One Popup

I do this in my apps for when I want to delete any ‘thing’. I send the states along to tell it what to do and then trigger one action on the save button that deletes any item that is sent to it. I also have dynamic text that I set on the popup too.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

2 Likes
5

Yes. How else could you do it?

The issue with this is, that I have to create a confirm popup and button for every thing/page I need a confirmation for.

No you don’t, that’s the whole point of what I said.

One popup. One button. And use custom states and conditionals to control everything.

I’ve created a sample app to illustrate what I am looking for:
The goal in this app is, to have one single popup, that can confirm any action. But the way it is built right now is not working.

Yes, that’s exactly what I’ve described above.

Looking at you app workflows I think you’re misunderstanding how to use conditional actions.

Workflow actions don’t ‘wait’ for their conditions to be true. They check them at the moment they’re triggered, and will either run, or not, based on the evaluation at that time.

Edit: You probably could set up some elaborate process of triggering workflows (not actions) based on a when number of custom state values are met (i.e. use a ‘when condition is true’ workflow to detect when the confirm button is clicked, via a custom state, and then run another workflow with conditional actions on that depending on custom state values that would need to be set in the first workflow etc.)…

But that’s basically a far more complicated way of doing what I outlined in my first reply.

6

Thank you again for your reply. I just don’t understand how I would apply your suggestion to the demo app I built. Maybe you can clarify a little bit more? Thank you.

7

Well, it’s difficult to give any specific answers without knowing exactly what you’re trying to do in your app…

But, put simply, all you need to do is somehow define (presumably in a custom state) the action that you want to take upon confirmation (along with any database objects that you want those actions to run on, if there are any), and then use conditional actions to run that defined action when the confirmation button is clicked.

For example, lets say you have 3 possible actions:

  1. Delete a file
  2. Delete a user
  3. Remove an Image from a User’s list of images.

When whatever initial actions are taken to open the confirmation popup occur, you’ll need to set a custom state value somewhere which you’ll use (via conditional workflow actions) to define which follow up action should take place when the Confirm button is clicked.

For example, if the ‘Delete a User’ button is clicked, then set a text custom state value somewhere to ‘Delete User’, and another custom state value to the ‘User’ to be deleted (to be honest you might not even need the first custom state - it really depends on your use case).

In your ‘When Confirmation Button is Clicked’ workflow you’ll have 3 actions, with conditionals to control which one happens.

One of those will be ‘Delete User’ with the condition to run only when the ‘Action’ custom state value is ‘Delete User’, and the User to delete would be the ‘User’ custom state value you set when the Delete User button was clicked.

You can also use the same conditions to display dynamic text in the popup: e.g. ‘Are you sure you want to delete this User’, or ‘Are you sure you want to delete {User’s Full Name}’. etc.

Whereas when the action is ‘delete a file’, you could display relevant text in the popup for that (i.e. ‘Are you sure you want to delete this file’).

Once the action is finished be sure to reset the custom state values to empty.

That’s the basic idea - obviously you can apply it in many different ways, and it can be simpler than that, or much more complex depending on your needs.

That way you only need to have a single popup that can handle ALL you confirmations and follow up actions.

Here’s a very simple demo example of using a single popup to confirm 4 different actions (none of these actions are touching the database in anyway, but they do refer to their own dynamic values. Obviously if you want to use the same idea to make changes to the database it’s simply a case of referring to the database items in question and assigning them in custom state values so your conditional workflow actions know which ‘Things’ to make changes to on upon confirmation).

Preview - Confirm Popup (bubbleapps.io)

Also note, in this specific example I could have just used a single action upon confirmation (due to the way I’ve set the page and content up), but I split it up into 5 actions just to demonstrate the concept. If I was deleting or changing things in the database I’d have to use separate conditional actions.

3 Likes
8

Thank you so much! Perfect example, crystal clear. I was able to fully rebuild my own version, based on your suggestions. Awesome!

Generic Popup Confirmation

1 Like
9

Now I ran into another issue. Since the communication from the page to the popup works fine, how do I communicate from the popup to the calling page, if the popup is a reusable element and thus has no knowledge of the calling page’s elements?

For example, if I have a reusable element (popup) that selects an image and I want to show that on the calling page?

10

Ok, I found a solution / workaround for that, but it’s quite something.

I am using the database (dedicated table for that) as a communication between the popup and the page. So the page creates a UUID in the database, to identify clearly, even when there are multiple users simultaneously doing the same thing. And the image on the page is bound to the image of that database entry. Then the page sends that UUID to the popup and once the image is selected it is stored by the popup into that record, thus updating the image on the calling page.

Hope this makes sense. And I don’t know if it’s supposed to be that way… :upside_down_face:

11

Oh, thank you very much! The thread was very helpful.

1 Like
12

This topic was automatically closed after 70 days. New replies are no longer allowed.