How to close a modal from a table using JS?

The button inside a table is a “modal” column type. Inside this modal I have a form, which I’d like to close the modal after the submit. How can I do that?

In a JS query, you can script modals using modalname.close() or modalname.open(). Link to Docs

You could trigger that JS query after the submission query is successful

Would be nice if you could make the modal close automatically if you click outside of the modal or press the ESC key… the little X can be hard to hit / notice sometimes

I couldn´t make it work modals triggered by a cell inside a table.
It is not a Modal component, but a cell type modal.

@coleca I believe there is an option in the settings panel for the modal component to have it close when you click outside. I normally turn this off when working on the components inside the modal, then back on for actual use.

@davidls Interesting, I’ll need to look into how the table cell modal works. It might just be a matter of referencing the right object. @alex Is there something different about how these modals work?

Jumping in here to provide some more context…
@coleca – you should be able to use the esc key to close the modal. I agree that the x is hard to see and also hard to click on. We’ll address this soon!
@davidls & @alex-westreich – The JS functions for modal1.close() and modal1.open() only work for the standalone modal component right now. We don’t have those functions available for table cells of type modal yet! In fact, all of the complex table cell types (e.g. dropdowns, datepicker, etc) are all brand new and we will be adding more robust functionality to them soon. Stay Tuned!
@davidls – if you are still looking for a workaround, I would suggest the following:

  • add a regular “Modal” component to your Retool canvas
  • (optionally) if you want to open this modal from the table, add an action button that triggers a JS query to open the modal, example query modalToggle below
  • move your components from the table modal to the standalone modal
  • hide the modal component’s default open button
  • then finally you can run the modalToggle query on success of your submit query so that the modal closes after it’s done.
    modalToggle query:
    if (modal1.opened == true) { modal1.close(); } else if (modal1.opened == false) { modal1.open(); }
1 Like

Any update to this? I'm unable to access the modal component settings when launched from a table column.

Hi @Dhof!

Do you mean a custom column of type modal? And what methods are you trying to access for these modals?