Using 1 popup for multi data type delete actions

progressdiary · 2024-07-22T04:55:43.094Z

Hi Builders,

Can someone confirm if what I’m trying to do can or cant be done please?

In regards to deleting a thing, I have a pop up that is used as a confirmation deletion box (Are you sure you want to delete Parent groups title/name?). With Buttons Yes/ No.
All good so far the content is set to company history with the source being do a search for company history.

Now comes the issue.
I want to use the same pop up to delete other data type things…
so I send a URL parameter called (“del” = parent groups unique id). then in the popup conditionals I have when get del from url is do a search for "category"s:first items unique Id
Constraint: unique Id= get del from url

Change data source: do a search for "category"s: first item
Constraint: unique id= get del from url

HOWEVER! I cant do this as I get an error saying the content is set to “company history” and the data source is trying to be set to “Category”.

So what can I do to make this work?
I have to have a data source set in the popup so that it knows what thing to delete.
I have to have a content type set so I can have a data source.
I cant conditionally change the content type
If I remove all content type and data source set the delete button to do a search for “Company history” with constraint unique id= get del from url then I cant conditionally change this either to suit other data type as well as I can dynamically have an alert message show afterwards as there is no data source.

So any ideas from anyone?
Thanks in advance

boston85719 · 2024-07-22T05:53:40.259Z

progressdiary:

Can someone confirm if what I’m trying to do can or cant be done please?

It can and I have.

the popup should have no content type.
the popup should have a set of custom states for each type of data you would allow the user to delete. If Bubble ever gets around to fully realizing new feature releases, then we could use the properties feature for this but it is not possible to run a workflow action to set the value of the property. But if you are using the popup in a place where you can set the property value (think in an RG, the property could be set to ‘current cells’ thing’), you can use properties but custom states work best as we can run an action to set the state.
Set conditionals on the visual elements so your messaging is appropriate for each type of data to be deleted. These conditions would be something like ‘popup custom state for data A is not empty’…this is done for each custom state/data type the popup is used for.
Set the workflow action using the button that triggers the delete actions. Have multiple actions, one for each data type with the condition to only delete it when the ‘popup custom state for data A is not empty’…similar to conditions on the visual elements, you do this for each data type to be deleted.
When you are using the popup on the page, you will need to run the action to set state for the data type to be deleted. The custom state would be the actual ‘thing’ to be deleted.
When the popup is closed run the action to clear the custom state values.

progressdiary · 2024-07-22T11:28:51.818Z

Thanks @boston85719, I’ll delv into this and post back with how I get on ASAP.

codefree · 2024-07-22T14:26:27.498Z

@progressdiary Definitely, You can do that.

I did the same by creating a Delete Icon as a Reusable Element with two mandatory Inputs. Include the Popup as the part of this RE itself and you should be able to manage custom messaging for all datatypes as well.

Unique ID
Datatype Name (Using Option Set)

Reusable Element Inputs

Screenshot 2024-07-22 at 7.52.47 PM834×754 39.8 KB

Reusable Element Tree:

Screenshot 2024-07-22 at 7.53.12 PM668×586 24.6 KB

Rest you can conditionally manage all your delete workflows based on the Datatype values in this RE.

progressdiary · 2024-07-22T19:43:28.986Z

Thanks @codefree,

This is also an interesting solution and one I’m happy to also explore. Thanks for the info.

So you just set up OS’s to match all the data types you had then you could choose which one to apply to tue RE when dealing with that particular data type?

codefree · 2024-07-22T19:59:56.188Z

@progressdiary
OS values be anything. You just need to manage the respective mapping in your “Only When” conditions for a series of Delete Actions

For eg:
Datatype: User, Product, Order, Task, Project
OS: 1,2,3,4,5 or User, Product, Order, Task, Project (Preferred, its easier to manage when list grows)

Action 1: Delete User (Only when OS is 1 or user)
Action 1: Delete Product (Only when OS is 2 or Product)
…
…
So on.

progressdiary · 2024-07-23T03:50:01.895Z

I like it, I will try this. Thanks @codefree

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