Action button to open modal with container

Another stackoverflow orphan: https://stackoverflow.com/questions/60459814/retool-action-button-to-open-modal-with-container

I have a table in retool. I’ve added an “action” column with buttons and renamed them “edit”. What I would like to do on click of the action button is to open a modal with the data in the row populated. A user should be able to see the values of the row, edit them and when he clicks “submit” it will send an update API call for that row’s unique id.

2 Likes

Hey @anobody! We’re working on some new docs for modal components, but until then here’s what you can do:

  1. Drag a modal component onto your canvas. It’s going to appear as a button that opens a model, but don’t worry about that just yet
  2. Create a Javascript query in the query editor that opens the modal. If we’re working with the default names, your query would be modal1.open()
  3. Configure the action button in your table to run that JS query on click

That’s a quick way to open a modal through an action button. In terms of what’s in that modal, you can drag any components you want and reference table properties. So if you wanted to display a user’s email, you could drag a text component into the model and set its value to table1.selectedRow.data.email.

The last thing to deal with is the button, which you probably don’t want since you’re opening the modal via action buttons. You can hide it by clicking on it, heading to the inspector in the right sidebar, and scrolling down to the “display” settings. Just put true into the “Hide when true” field and the button won’t show.

3 Likes

Great, got this to work perfectly with the details of a selected row showing. I send the table1.selectedRow.data into the key value mapping component. However, what is the best way to allow a user to edit the values of the data so I can send the changed values to a POST API through a submit button? The key-value mapping doesn’t let me make the edits in the window and I could do “edit” from the main table for specific rows, but in the main table I don’t want to show all columns which is the reason for the modal.

Thank you quiet helpful

You are the real MVP! Thank you :slight_smile: Updated docs for modals would be much appreciated :black_heart: