Send data & update records

Let's send the 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 ui.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, click the "On Submit” green trigger button, and click Add new action. This will create and open a new action.

Now, select your data source, choose the appropriate step, e.g. Update row, specify the table if required, 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 an HTTP request, configure the identifier that will be used for record matching. You can refer to it as:

{{ui.formName.value.fieldName}}

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

{{ui.formName.value}}

Since it updates the data in the data source, we need to reload the table values to display the actual information. On the Triggers tab, find On Success trigger, and select the action that loads your data.

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.