8

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@2x
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@2x
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!

3 Likes