Retool Fundamentals: Lesson 4

Learn how to connect queries and components.

There are various ways for queries and components to interact with each other. Event handlers are a common method, but you can also configure components to update other components.

Event handlers allow you to perform actions based on user interactions. They can be found on many components, but they can also be set on queries. Here are a few examples of how to use event handlers.

  • Event handler set on a component: trigger a query when users click a button.
  • Event handler set on a query: update a Text component after a query runs successfully.

This lesson covers event handlers in some detail but you can read more about them in the Event handlers documentation.

1. Save changes and update user data

Select your table and in the right panel, click + Add under Event handlers. Make sure Save changes is selected as the event, and set the Query to patchUser.

Adding an event handler to save table changesAdding an event handler to save table changes

Now test this out by double clicking a user's email address and editing it. Click the Save changes button and patchUser will run automatically. This writes the change back to your API but it doesn't update the table.

As a usability improvement, open the patchUser query and scroll to the Event Handlers section. Add a success handler with Action set to Control query and Query set to getUsers. Make sure to save the query.

Adding an event handler that refreshes the tableAdding an event handler that refreshes the table

Now when you save a change in the table, patchUser runs and then triggers getUsers to refresh the table.

2. Configure options to block and unblock users

Click on your Split Button component and select the block action. At the bottom of the modal, create an event handler to run the block query. As a small design improvement, set Disabled to {{table1.selectedRow.data.blocked}}. This disables the button if the user is already blocked.

Adding an event handler to block a userAdding an event handler to block a user

Similar to the PATCH query that updates a user, add a success event handler to the block query to refresh the table after it runs.

Repeat this process for the unblock option, but set Disabled to {{ !table1.selectedRow.data.blocked }} so that the button is disabled for users that already have access.

You can test these actions out by selecting a row and clicking the button.

3. Configure option to export user data

On your Split button component, select the Download user data action and create an event handler with the Action type set to Export data. Set Data to {{table1.selectedRow.data}}and the File type to JSON.

Adding an event handler to download user dataAdding an event handler to download user data

Test this button out by selecting a user and clicking the Download user data button.

Wrap up

You've now finished your app and completed Retool Fundamentals.

You can test your knowledge below or see the wrap up page for additional resources.


What’s Next

You've now completed all the lessons for Retool Fundamentals. Continue reading to wrap up the course and recap your progress.