Does anyone know how to close a modal containing a custom module (a form) from the custom modules submit button?
I've done this in a few different ways:
- Add a
Control Componentevent handler to the submit button for that form that controls the modal you're trying to close and set the Method to
- Add a
Run Scriptevent handler to the submit button for that form that looks something like this:
- Wrap whatever other event handlers you have attached to that form's submit button and include the code to close the modal. This would end up looking a bit like this:
// Close the modal modal1.close(); // Trigger the first query query1.trigger(); // Trigger the second query query2.trigger();
When you have a JS query referencing several other queries, it may mean that JS query could run for several seconds. If you have the modal.close() method at the end of the query it might take a few seconds before it happens (especially if you're using async/await) and it makes the app feel slow. If you put the modal.close() code at the beginning, the modal will close while the rest of your query is running which makes your app feel more snappy and responsive.
Hope this helps!
Thanks so much for sharing @bonnyag!
I'm adding some screenshots for attaching an app query with (
modal1.close()) to a module submit event:
In the module, you can add a query input that triggers on Submit. Then, in the app, you configure the module to assign your modal close query as the module's query input
This is the pattern I have also used with several apps. I recently experimented with another way to do it.
The primary difference is your Modal button is in the Module:
The reason I tried this is I needed a way to check if the data was saved before the modal was closed and give the user the option to save those changes. So the module checks the
modal.onClose event and handles accordingly.
If the modal is in the parent app, the module has to have visibility into the
modal.opened state to check this, which is also possible by linking an input to it.
It did not work as well as I hoped as the modal still closes and then the "Do you want to save your changes?" dialog opens. Without a
modal.beforeClose event There is no way to prevent the modal from closing if the user wants to say "Nevermind, let's keep editing" or "Oops! Let's keep editing"
So failed experiment really, but there may be other reasons to do it this way so I wanted to share it.