Using 1 popup for multi data type delete actions

georgecollier · 2024-07-23T03:58:29.690Z

I have a different approach. It does not require multiple data types or states and I think it’s much more maintainable and efficient.

I have a ‘confirm action’ popup.

CleanShot 2024-07-23 at 11.54.18@2x1414×914 69.7 KB

The properties show the content. isDanger changes the button to red when true. confirmText/confirmIcon are the text and icon on the confirmation button.

The reuseable element has two states - isConfirmed and isCancelled.

When I want to allow something to be deleted, stick the popup on the page as below. Reset and show the popup when the delete icon (or whatever) is pressed. Additionally, on the page, store a state/variable for the item you’re trying to delete if necessary. I prefer groups to states but I’ll call it a state for simplicity. So, we’ll Set state of Element X to ‘the Thing we want to delete’.

CleanShot 2024-07-23 at 11.55.13@2x1650×624 57.2 KB

When the popup’s confirmation button is pressed, we set the state of the popup isConfirmed = yes, and then hide the popup.

On the page, Do when condition is true isConfirmed = yes → Delete Element X’s Thing (or wherever you stored the Thing you’re confirming deletion of on the page).

For the user, that looks something like this:

CleanShot 2024-07-23 at 12.00.02

In the editor, it looks like this:

CleanShot 2024-07-23 at 12.00.51

TLDR;
1. Make a reuseable popup
2. Know when the deletion is confirmed using a state on the popup
3. Run the deletion actions outside of the popup in the relevant place (using a BE workflow if you want it to be modular and the same deletion logic to work in multiple places across the app)

Not loads of conditionals, can be used anywhere and not just for deletion, works great and fully reuseable and modular. Modularise your apps guys!

boston85719 · 2024-07-23T04:40:08.334Z

georgecollier:

Not loads of conditionals

Swapping out the conditionals on the action for conditional triggers, I like it. Interesting approach and use of the properties on reusables.

With this approach if I have a dashboard from which the user can delete 3 or 4 different data types, do I need to have 3-4 instances of the reusable popup on that single dashboard page, or can I have just one instance of the reusable popup?

georgecollier · 2024-07-23T04:51:49.478Z

boston85719:

With this approach if I have a dashboard from which the user can delete 3 or 4 different data types, do I need to have 3-4 instances of the reusable popup on that single dashboard page, or can I have just one instance of the reusable popup?

You could have 4 instances of the reuseable popup and listen to each one separately.

Alternatively, if you ensure that there’s only ever one saved ‘Thing you’re deleting’ (i.e when they try to delete something, you reset all of the other deletion states/groups), you can use a conditional like ‘when popup’s isConfirmed is yes and state X is not empty’.

I’d probably just go with the 4 popups though as it’s more straight forward. Performance difference negligible.

I use this confirm action popup for everything, not just deletion, it just makes it really handy to have something like that be reuseable as it reduces development time and ensures UI consistency.

progressdiary · 2024-07-23T06:07:46.183Z

These are all great responses, Thanks @georgecollier I like that this is modular and can be used anywhere and not just for deletion.

Forgive my ignorance with this next question, What are you referring to with a “BE Workflow”?

This is very new for me, So I may be asking very simple questions here (but please be patient and humor me haha)

I can set the properties on the RE Page popupConfirmationAction and I just followed exactly what you have (I left the field Optional as checked as that how it was but with no default value)
I also set the two states on this
isConfirmed - YES/NO default=No
isCancelled - YES/NO default=No

Screenshot 2024-07-23 0653421600×852 57.8 KB

Screenshot 2024-07-23 0701281600×852 66.7 KB

I added a Popup and the buttons and text elements

Screenshot 2024-07-23 0659171600×852 63.4 KB

I set the button label to be dynamic

Screenshot 2024-07-23 0744251600×852 61.1 KB

Then I add it to the page and I can set the properties the same as you have

Screenshot 2024-07-23 0716511600×852 62.6 KB

I click delete on the Thing I’m deleting and thisshows the popupConfirmationAction RE

Can you explain the workflow section a little more please? I set the isConfirmed state to be yes when button Delete is clicked. I see you are using an API workflow… Can I complete this action without an API workflow? Or is the API mandatory for this? (learning on the free account for the moment)

But I’m also not sure how to change this for deleting different data types on a single page.
e.g. I have a page called admin_create. This is a page that anyone with the admin user roll can create an entry for different data types (and edit also using that data types specific form, there are currently 9 different forms on the one page that create different entries

Screenshot 2024-07-23 080531829×355 19.1 KB

What I would like to do is use this one delete to be able to delete entries on each data type, Is that possible to achieve with the set up you have suggested?

NOTE: I’m also very well aware that I wont be able to complete this app on the existing free account I’m using. But I’m building this app to add to a portfolio of what I’ve created and also to learn how to build with bubble.

georgecollier · 2024-07-23T06:10:15.256Z

progressdiary:

BE Workflow

Backend workflow

progressdiary:

I added a Popup and the buttons and text elements

The reusable element itself should be of type popup. Currently you have a RE that is a group, with a popup inside.

progressdiary:

Can I complete this action without an API workflow

Yes - the action is just what you want to do when the popup is confirmed. For me that means running a backend API workflow. For you that might be Delete a thing.

progressdiary:

What I would like to do is use this one delete to be able to delete entries on each data type, Is that possible to achieve with the set up you have suggested?

Yes! All this popup does is provide a way for the user to confirm something. You set up the workflow on the page that contains the RE that dictates what happens when this popup is confirmed.

progressdiary · 2024-07-23T07:08:12.148Z

Thanks @georgecollier, Im going to play around with all three of these solutions and see which one “feels” smoother/ easiest for me.

I appreciate you all taking the time here.

gerbertdelangen · 2024-07-23T08:44:59.511Z

georgecollier:

Run the deletion actions outside of the popup in the relevant place (using a BE workflow if you want it to be modular and the same deletion logic to work in multiple places across the app)

I use a reusable popup + states + reusables for logic. Was looking to use backend workflows for logic, but to have backend workflows return the result of an action immidiately and run under current user you would have to (1) create the backend api workflow for the action (e.g. deletion) + backend api authentication workflow, (2) create the api’s in the api connector (for that immidiate return of the result) I would expect. Or does anyone know of another way (without over engineering and WU inefficiency)?

georgecollier · 2024-07-23T08:56:20.054Z

gerbertdelangen:

Or does anyone know of another way (without over engineering and WU inefficiency)?

How To Return Data From Backend API Workflows (no manual API connector) Tips

TLDR: calling backend workflow from API connector is unreasonably tedious app connector auto-sets up and syncs fields result/returned data from backend workflow can be used in following front-end steps Returning data from backend workflow in front-end without manually setting up API connector calls I have a lot of feelings today, as I’ve learned something that would’ve saved me hours of time had I known earlier, and it feels like something that only a handful of people know about (based on th…

*For the above, when using option sets, the BE workflow should take a text parameter and find the option by filter, as option sets are not reliably supported.

gerbertdelangen · 2024-07-23T09:15:50.810Z

Thanks G and thanks for that article, I tried that the second (maybe 5) after you posted it. But is uses an API key from tab API right instead of current user, but you use a login action (and maybe some logic to not have to use username and password)?

georgecollier · 2024-07-23T09:17:56.863Z

You can run backend workflows either as an admin using an admin API token, or a user using their login details by getting the token from a BE workflow. I’ve never done the second option as I just use admin access and haven’t had a need for the user access (though only authenticating as a user would arguably be preferable as it would obey privacy rules)

gerbertdelangen · 2024-07-23T09:26:51.357Z

Yeah I use that second option in a couple of situations, but don’t like to sending user credentials, but we can prevent that using some add. logic.

Exactly, once made the mistake to do a search with option ignore empty constraints in a backend API and ended up sending clients too much data. I always try to prevent using those API-keys since that day.

Thanks George.

progressdiary · 2024-07-23T11:12:37.973Z

Thanks @georgecollier and @gerbertdelangen. This is great knowledge to have, I must admit it’s over my head at the moment but I’m happy to have it explained here for when I can get to it and what I’m reading make sense to me. … Soon I’m sure.

progressdiary · 2024-07-23T11:13:08.455Z

Tha ks for sharing this Article @georgecollier

progressdiary · 2024-07-23T12:36:03.479Z

@boston85719

I am working on the solution you have suggested, can you give me some idea of how to make the delete button function properly on the popup called “PU DeleteConfirmation”

I added custom states to the Popup element (there are 10 in total) as Yes/No and default=no

Screenshot 2024-07-23 1425571600×852 83.8 KB

When the initial delete icon is clicked on the page that then sets the state to be YES, Show PU DeleteConfirmation, Go to page admin_create and I send the parameter del= parent groups things unique id

How can I change the function of the Delete button in the PU DeleteConfirmation to delete the thing who’s unique id is in the parameter “del” ? I was thinking of using an “Only when” but I’m not sure what expression to create

Or do I create 10 different “Delete thing…” actions and set them with only when conditions that mean that action will only be completed when whatever unique id is in del is contained in the data type to delete?

Maybe I’m overcomplicating this?

Thanks in advance

Jici · 2024-07-23T13:22:13.901Z

Not sure if this was really mentionned, but using one reusable element with 3 text states (ID, DB and if you want, Title to show something like Are you sure you want to delete “this thing title”?)

And using API Connector + Data API “DELETE” request with url like
https://myapp.bubbleapps.io/api/1.1/obj/[DB]/[ID]

So you set states > show reusable element (popup)
If user select yes > API connector DELETE action > hide popup

However, it must cost more WU using this option.

boston85719 · 2024-07-23T13:27:16.931Z

progressdiary:

Maybe I’m overcomplicating this?

I think you’ve gotten confused from the different suggested approaches.

You need a custom state for each type of data you want to be able to delete. So for example, if I have a data type called ‘Product’ and another called ‘Order’ and I want the user to be able to delete either a product or an order from the same reusable. You need a custom state of type Product and a custom state of type Order, not custom states that are yes/no values.

When you run an action to show the popup, you will also run the action to set the state of the data type you want to delete.

Then on button click of delete button you have an action to delete a thing, one for each of the data types you want to delete. Each action has a condition for only when the custom state of the related data type is not empty.

Then you also need to use the workflow trigger when a popup is closed to set the custom state values to empty, so that every time the popup closes the custom state is removed.

So, if you have 8 data types that can be deleted, there are 8 custom states, one trigger from button click, with 8 actions to delete a thing.

Super simple to add a new data type to be deleted, just add another custom state, add another delete action. Plus you will only be charged WUs for the delete thing action.

It is a very modular approach as well since on a page like a dashboard where there may be multiple data types that can be deleted from the single page, you only need one instance of the reusable popup, which makes things much easier to maintain and debug.

Then for your text that might display something like ‘are you sure you want to delete Product ABC’ you will have a condition for each data type with the appropriate message, and use the related custom state to display details of the data type like ‘title’.

progressdiary · 2024-07-24T05:09:57.269Z

Thanks for the clarification, I see now.

boston85719:

You need a custom state for each type of data you want to be able to delete. So for example, if I have a data type called ‘Product’ and another called ‘Order’ and I want the user to be able to delete either a product or an order from the same reusable. You need a custom state of type Product and a custom state of type Order, not custom states that are yes/no values.

I was thinking that each state to delete each data type would be a yes/no.
So I’ve set them to be the data type of the category to be deleted.

Screenshot 2024-07-23 2105361920×1128 250 KB

boston85719:

When you run an action to show the popup, you will also run the action to set the state of the data type you want to delete.

What I did here is because the thing the use is deleting sometimes comes from a RG (I think) I need to send the unique Id as a reference point.
So I set the state to Eg del_guide to be the “parent groups guide”

Screenshot 2024-07-24 0657221093×346 25.7 KB

, step 2 show PU deleteConfirmation, Step 3 got to page create_admin (which is always the same page) and I send parameter del= parent groups unique id

Then on click of the button delete in the popup I can delete the data type I want to delete

Screenshot 2024-07-24 0654361475×360 34 KB

I am sending the url parameters with the thought that I can reference those to dynamically and conditionally change the alert messages after a thing has been deleted… But that doesn’t seem to be functioning as I thought it would (The dynamic text to change the alert message doesn’t display at the moment… *This could have something to do with the thing being deleted… and the URL no longer holding the Unique id…

Screenshot 2024-07-24 0706301018×465 35.8 KB

, However it is SORT OF working for changing the text dynamically in the PU DeleteConfirmation… the only conditional that works is the last one in the list of conditionals… I’ll explore it more later today.

Screenshot 2024-07-24 0701351015×290 20.6 KB

Its a work in progress, some bugs to iron out and I think some expressions to finetune but I’m getting closer. The overall action works and I can delete multiple data types from one Pop Up group using a single delete button.

boston85719 · 2024-07-24T05:49:25.523Z

progressdiary:

Step 3 got to page create_admin (which is always the same page) and I send parameter del= parent groups unique id

Not necessary and I would remove this step

progressdiary:

I am sending the url parameters with the thought that I can reference those to dynamically and conditionally change the alert messages after a thing has been deleted… But that doesn’t seem to be functioning as I thought it would

Because the thing was deleted.

progressdiary:

However it is SORT OF working for changing the text dynamically in the PU DeleteConfirmation…

I would change the conditional to reference the custom state and no the URL parameter

Also, when using URL parameters and pushing a unique ID into the value, you can on the get data from URL select the type of data it is and no need to do any contains id as Bubble will already know what entry it is…but again, in this case, remove the condition you have and reference the custom state value, also in the text remove the dynamic expression for search and reference the custom state value.

progressdiary:

(The dynamic text to change the alert message doesn’t display at the moment…

I wouldn’t bother, and I’d just write successfully deleted and be done with it.

As a side note

If there is a desire to have just a single warning popup used throughout the entire app, to build in a modular approach, you can put the warning popup into a reusable header if the header is used everywhere in the app. In order to do so, you can create custom triggers to set the custom states on the warning popup to populate which data entry is to be deleted, but these custom triggers are on the reusable header with the popup already in place. When creating the custom triggers you can use the parameters on the custom trigger, to match the custom states on the reusable popup (ie: if 10 custom states on popup, then 10 parameters on the custom trigger).

When you set up like this, then on any page anywhere in the app where the reusable header is, you can trigger a custom event from a reusable, which would be to trigger the custom event on the reusable header, send the appropriate parameters, which then has the custom state set onto the warning popup.

Please note, this is an advanced use case.

Additionally, this can be done for an error alert. In a reusable header create a trigger for when an unhandled error occurs to show a popup that displays the message. This will allow you to have a single trigger in the entire app to display just one popup in the entire app to display an error message to a user for anything that happens in the app that gets caught by the unhandled error trigger event.

progressdiary · 2024-07-24T07:36:17.470Z

boston85719:

Not necessary and I would remove this step

No worries I’ll remove this

boston85719:

Because the thing was deleted.

I thought it was because the thing had been deleted and I was leaning to “this probably is the wrong set up”

boston85719:

I would change the conditional to reference the custom state and no the URL parameter

Also, when using URL parameters and pushing a unique ID into the value, you can on the get data from URL select the type of data it is and no need to do any contains id as Bubble will already know what entry it is…but again, in this case, remove the condition you have and reference the custom state value, also in the text remove the dynamic expression for search and reference the custom state value.

Ok so I have really “doubled up” and made more work by add URL parameters as well as more complicated, Everything should only reference the relevant custom state…

boston85719:

I wouldn’t bother, and I’d just write successfully deleted and be done with it.

Sounds like a much more straight forward and simple approach haha

boston85719:

If there is a desire to have just a single warning popup used throughout the entire app, to build in a modular approach, you can put the warning popup into a reusable header if the header is used everywhere in the app. In order to do so, you can create custom triggers to set the custom states on the warning popup to populate which data entry is to be deleted, but these custom triggers are on the reusable header with the popup already in place. When creating the custom triggers you can use the parameters on the custom trigger, to match the custom states on the reusable popup (ie: if 10 custom states on popup, then 10 parameters on the custom trigger).

When you set up like this, then on any page anywhere in the app where the reusable header is, you can trigger a custom event from a reusable, which would be to trigger the custom event on the reusable header, send the appropriate parameters, which then has the custom state set onto the warning popup.

Please note, this is an advanced use case.

Additionally, this can be done for an error alert. In a reusable header create a trigger for when an unhandled error occurs to show a popup that displays the message. This will allow you to have a single trigger in the entire app to display just one popup in the entire app to display an error message to a user for anything that happens in the app that gets caught by the unhandled error trigger event.

But ooooo this is getting juicy though… I like the idea of being able to do this all from one RE and this is what I was tryin to get to with the Alert message. Although everything I’m working on deleting at the moment is on a single page, there are more pages in the app that could also benefit from this kind of functionality… BUT I’ll come back to this once I have the time to “play” with it and work around it. Its fantastic to know this can be done and how.

progressdiary · 2024-07-24T10:05:14.946Z

SUCCESS!!!
@boston85719 I followed your suggested solution and It works well, Link for easy finding for others are in this post below. (there are other great responces that are also worth reading and knowing for anyone else that finds this post later)

LINKS
Using 1 popup for multi data type delete actions - #2 by boston85719
Using 1 popup for multi data type delete actions - #23 by boston85719

Took me some time to wrap my head completely around it all but in the end I think its running smoothly. I will delve into the RE option you suggested in the later posts at a later date… I have to iron my brain out now hahahah

boston85719:

As a side note

If there is a desire to have just a single warning popup used throughout the entire app, to build in a modular approach, you can put the warning popup into a reusable header if the header is used everywhere in the app. In order to do so, you can create custom triggers to set the custom states on the warning popup to populate which data entry is to be deleted, but these custom triggers are on the reusable header with the popup already in place. When creating the custom triggers you can use the parameters on the custom trigger, to match the custom states on the reusable popup (ie: if 10 custom states on popup, then 10 parameters on the custom trigger).

When you set up like this, then on any page anywhere in the app where the reusable header is, you can trigger a custom event from a reusable, which would be to trigger the custom event on the reusable header, send the appropriate parameters, which then has the custom state set onto the warning popup.

Please note, this is an advanced use case.

Additionally, this can be done for an error alert. In a reusable header create a trigger for when an unhandled error occurs to show a popup that displays the message. This will allow you to have a single trigger in the entire app to display just one popup in the entire app to display an error message to a user for anything that happens in the app that gets caught by the unhandled error trigger event.

Thanks again for all your help to all of you