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 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 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) {; }
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?


I guess he is. And I have the exact same question. Any updates on custom column of type modal? I want to be able to automatically close the modal on button click (button which is inside the modal).

Currently I can only close the modal by hitting esc or clicking on the X as @alex said.

Thanks for the help!

Ah, I was worried that was the case! At the moment, custom columns of type modal don't have the same functionality as a standalone modal. As a general workaround, you can have your column be a button that runs, where modal1 is a standalone modal who is hidden from the canvas (so it can only be opened from the table).

Let me know if something like this might work for you, or if you need any clarification getting this set up!

Any idea if it is scheduled to be implemented as a standalone modal?

Anyway, your workaround seems good for this use case :+1:

Hmm, let me see if this is on our horizons anytime soon! I do know we're working to improve table column types, but since this is a relatively heavy lift, I'm honestly not sure of the timeline. Will check :slightly_smiling_face:

And glad the workaround seems good enough for now! :raised_hands:

Hi again @Jerome! Just heard back from the team and it looks like this isn't scheduled for now. The currently advised workaround is to just use that standalone modal.

Hey, thanks for the feedback! In the meantime I have implemented the workaround and it works like a charm! :ok_hand:

1 Like

Sweet! Very happy to hear it :raised_hands:

modal1.opened ? modal1.close() :

I'm a bit confused by this answer, the only options a button column allows me to choose are:

Hey @gginter! What are you trying to achieve currently? :slight_smile: