Category: How do I do X?
Resource links
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How Do I Select the Row While Also Opening a Modal?

Issue

I am trying to create an "edit row" button that opens a modal and pre-populates with information from the row it was clicked in. However, the usual functionality of selecting the corresponding row when clicking on an interact-able cell has changed. I need to know how to reference the row where the button was clicked.

Resolution

To reference the row where a button was clicked in a table widget in Appsmith, use "triggeredRow" instead of "selectedRow". This will allow you to pre-populate a modal with information from the row where the button was clicked. Here is an example of the code you can use:

  1. Create a button in a table widget.
  2. Add an onClick event to the button.
  3. Set the action showModal(Modal_Name) on the click event to show the modal
  4. In the Show Modal action configuration, add a text field that corresponds to the data you want to populate in the modal. For example, Name.
  5. In the Text property of the Input widget, enable JS, and enter this code {{Table1.triggeredRow.Name}}. Here Table1 is the table name and Name is the column name.
  6. Save the configuration and test it by running the app.

This code will ensure that when the button is clicked, the modal will open with the data from the row where the button was clicked.