Skip to main content

Retool apps tutorial: Save changes to data

Learn how to connect write queries and configure event handlers to save changes.

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the Retool apps tutorial in sequence.

Now that the table displays customer data, you can configure the form to make changes. Submitting the form then triggers a query that writes the changes back to the API.

1. Generate input fields​

Click Generate from table and select the Table component in the Source dropdown.

The form generator modal displays a list of table columns to review. All columns are selected and set as required fields by default. For the purposes of this tutorial, uncheck all columns except First and Last, then click Generate form.

The generated form and its input fields are configured as follows:

  • The form's Data source setting is set to {{ table1.selectedRow }}. This references the selected row in the table.
  • The Form data key setting for each input component references the column name. For instance, the key for textInput1 is set to first. This enables the form to automatically populate its value from the selected row.

The form and its input fields update whenever you select a different table row.

2. Create a query to save changes​

Navigate to the Code tab and add another resource query to the Page tab. Update the query to reference the form's input values and save the changes back to the API.

  1. Select the Sample Customers resource.
  2. Change the query action to PATCH. This API method is commonly used to make changes to existing data.
  3. Reference the currently selected customer in the query's URL. You interact with specific customers using the mock API by referencing the customer ID. To obtain this, set the URL path to {{ table1.selectedRow.id }}. This dynamically references the ID of the selected customer in the table.

Next, reference the form's input values in the request body. Add the following key-value information to the Body section of the query:

KeyValue
first{{ textInput1.value }}
last{{ textInput2.value }}

When run, the resource query performs a PATCH request with the specified customer and updates the first and last values.

To ensure that the table continually displays the most current customer data, this query should refresh the table when it successfully runs. Refreshing the table triggers the first query that retrieves customers, which will now include any saved changes.

Add an event handler to the query that refreshes the table when it successfully runs.

  1. In the Event handlers settings of the query, add a Success event handler.
  2. Select the Control component event action.
  3. Select the table1 component.
  4. Select the Refresh method.

Click Save to save the query.

3. Update the form to trigger the query​

Select the form and use the Inspector to add an event handler. The event handler needs to run on the Submit event, control the newly created query, and trigger it.

Now that the form and query are complete, you can now select a customer and edit their details. When you click Submit, the query runs automatically and updates the selected customer, then refreshes the table.

Next steps​

You've now completed a fully working Retool app that reads and writes API data. Part two of this tutorial explains how to extend the functionality of your app.