Send data & update records

Let's try sending data back to the data source.

Find a Form component, and drag-and-drop it to the right of the Table component. The Form is connected to the selected Action by default, and will already contain it in the Data settings.

Let’s make the Form display a value of the selected Table row so that we could modify its value and send it back. Change the Data value to tableName.selectedRow.data.

The Form now has the same structure as the Table. If you click on the Table row, the row value will appear in the Form.

Selected row in the Form

To send data, we need to bind a new Action to the “On Submit” trigger of the Form. Select the Form, open the Triggers tab, press "On Submit”, and click Add new action. This will create and open a new Action.

Now, choose the Update row step, select a Data source and resource, and specify the field you want to update, and the values for this field. You can also use the HTTP with POST request step to send data to the API.

If you are not using HTTP request, configure the identifier that will be used for record matching. You can refer to it as:

{{ui.formName.value.fieldName}}
Configuring Fields for in Update Action

We’ll update the selected Table row by `id` property and send the form value object as:

{{ui.formName.value}}
Updating a row

Since it updates the data in the Data source, we need to reload the Table values, to display the actual information. Add Execute Action step, and select your first action.

Now, the Action will update the currently selected Table row with the Form values. In case of success, it will reload the Table.

Click the Submit button of the Form. If everything is configured correctly, it will change the Form value, and the Table list will be updated.

Reloading the Table