App => Module => Modal

[jeffblankenburg]

I've built a module that only contains a modal. My app contains that module.

When I click a button in my app, I want to display the modal (that is inside the module.)

This is proving to be tougher to figure out that I'd expected. Any advice?

(Not sure if sharing a simple example helps illustrate.)

https://gist.github.com/jeffblankenburg/1e33d2084533426bb128586c940cb87c

[Tess]

Hi @jeffblankenburg,

Thanks for reaching out & for bumping this in office hours

I have a few suggestions:

1. Go to the module & set the hidden property of the modal frame in the module to {{modal_visibility.value}} instead of {{modal_visibility}}

2. Create a variable in your app and set it's initial value to true. We'll use this app variable to dynamically control the visibility of the modal
   

   

3. In the app, configure modal_visibility to be equal to the variable:
   

4. On app button click, change the event handler to an event that updates the variable:
   

   

The reason I'm suggesting a variable is that add_player_module.modal_visibility is more of a read only reference that cannot be updated with =true. Instead, we want to pass a dynamic value to add_player_module.modal_visibility and then we can update that dynamic value

More info on modules here!

[jeffblankenburg]

I got this working, but I've hit the next snag.

After I submit the form, I commit the data to the database, and hide the modal again.

In a perfect world, I'd also want to run a query in the app during part of that event.

How do I know, back in the app, that the modal has been dismissed? I don't seem to be able to set that same variable for two-way communication.

[pyrrho]

Hey!

So this one is a little wonky, but doable. There's likely a few ways to approach this but what I suggest to start with event handlers that will set a variable/state for you in the app. When the module opens and loads the modal you need to set the state to true with an Show event handler, set the state to false with a Hide event handler, and then trigger a javascript query or use the state in an resource query that is set to update when inputs change.

Here's the open and closed responses from my triggered query for POC:

[pyrrho]

To follow up slightly, since your modals are in your module, you should be able to use the module outputs to get the modal state from module to do the same type of concept.