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.
1 Answers
We’re working on some new docs for modal components, but until then here’s what you can do:
- 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
- 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() - 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.
Related