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

App Building
1

Does anyone know how to close a modal containing a custom module (a form) from the custom modules submit button?

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!

1 Like
3

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

4

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:

image
image770×851 55.7 KB

image
image1719×600 63.8 KB

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.

1 Like