I’m looking for how to auto close the popup when the save button is clicked. Simple popup that has a reusable element in it that is the form. The save button is in the reusable element. The reusable element is the body of the popup.
Here’s a video showing my problem:
When I click SAVE, I want to close the popup, but all I see that I can hide are the reusable element objects. Hiding the group leaves the popup visible but now a blank white square in the middle of the screen. I could refresh the page, but I was hoping not to.
Can anyone tell me what obvious step I’m missing?
Gracias!
Buck
It looks like add_user_group_for_popup is a reusable element that contains only the form elements, and that reusable element is placed in the popup (which is why you can’t access the popup from the Save button’s workflow) as opposed to the popup itself being the reusable element.
I don’t use a lot of reusable elements, but I did some quick testing before posting my first reply, and I couldn’t find a way to do it. Maybe we’re both just missing something simple, but I don’t think so, and that’s why I did a search that produced the other thread.
Thanks a bunch…at least it’s inobvious…that at least makes me feel better about it thank you for giving a stab at it. I didn’t want to recreate the popup if I didn’t have to, but without any kind of parent inheritance, I suppose I’ll need to. Thanks for that article as well…If I can’t find a way to do it with a custom state…I’ll probably try that route. Thanks again!
No problem at all… and funny you mention the custom state because I had the same thought, and now my curiosity is piqued, so I might give it a try, too.
One way I think about reusables is that they do not know what page they are on. That is why to connect them with page elements gets tricky. Also, for a reusable to talk to a separate reusable gets tricky as well.
When popups are involved one way to go is to build the popup within the reusable element. You can even nest reusables … just like a vanilla Bubble app handles its header reusable with its signup/login reusable:
If you want to use a Reusable Element as the form body in a popup, you set a custom state on your reusable element and then you set up a trigger on that element at the form level. Here is what I did step by step:
I went to my Reusable Element and when the save button was closed, I added a custom state called “shouldClose” and set it to type “YES/NO” and a default of “YES” every time the save button is clicked
step 1 of that custom event is to look for “shouldClose = YES” and if so to close the popup
step 2 of that custom event is to set the value to “NO” so it doesn’t run until called again
then, in my button that launches the popup, I set the state to “NO” there as well.
So, when the button is clicked, the state is NO and the popup stays open. When I click Save, it sets it to YES and it triggers the form-level event that happens to be the parent of the popup and that event closes it.
Thanks @cmarchan and @mikeloc. I appreciate you both jumping in on this. Sometimes it just helps to be able to externalize these thoughts and frustrations in a lack of knowledge. I appreciate you both jumping in. Thanks again.
Buck
Sweet beans, indeed! That’s awesome, man… great work. Hmm, maybe one of us should circle back on the thread that I linked to and link to your solution here. I’m happy to do it (giving you all the credit, of course), but I’ll give you the right of first refusal.
thank you for giving a stab at it. I didn’t want to recreate the popup if I didn’t have to, but without any kind of parent inheritance, I suppose I’ll need to. Thanks for that article as well…If I can’t find a way to do it with a custom state…I’ll probably try that route. Thanks again!
