Close a modal containing a custom module from the custom module submit button

💬 App Building
2

I've done this in a few different ways:

  1. Add a Control Component event handler to the submit button for that form that controls the modal you're trying to close and set the Method to Close.
  2. Add a Run Script event handler to the submit button for that form that looks something like this:
modal1.close()
  1. 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!

2 Likes