How to populate a form when clicking the edit button in a table?

đź’¬ App Building
1

Hi everyone!

I’m working with a Retool app where I have a table and a form.
I want to populate the form with the data from the row when I click the edit button (the pencil icon) in the table.

Currently, I’ve tried using a script like this:

form1.setData(currentRow);

But the form doesn’t get updated with the row’s data.
I also tried mapping the fields individually, but still nothing happens.

What’s the proper way to do this in Retool?
Do I need to set the form fields to match the keys of currentRow? Or is there a recommended way to handle this?

Thanks for your help!

2

Hey there @mayaas,

I created a video tutorial on this here

Your exact use case (row button) is not exactly described, but when you click on the button your row will be selectee and you can use selectedRow as your form's data source.

Let me knlw if the video doesn't cover your use case and I can share more ideas

3

Thank you so much for your help!
I understand how to automatically populate the form with values when a row is selected.

However, I want to prevent easy editing, so I’d like to add a step:
Only when the “Edit” button is clicked should the form be populated with the values of the selected row, allowing editing to begin.

Right now, I’ve set up an event handler in the table’s row actions:
I’m using a click action*to control a component’s method (setData) like this:

form.setData({
  name: currentRow.name,
  registor_date: currentRow.registor_date
});

But the form isn’t being populated with the data.
Could it be a syntax issue, or are there other settings I need to adjust?
I’d really appreciate any advice!

4

It seems my syntax was wrong. The following worked—thank you!
Data field:

{{ { firstName: currentRow.name, age: currentRow.age } }}