Retool Fundamentals: Lesson 4

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 to display its settings in the Inspect tab of the right panel. In the Interaction section, click + Add to add an event handler. Select the Save changes event and set the Query to patchUser.

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.

To automatically update the table, open the patchUser query and scroll to the Event Handlers section. Click + Add to add a new success handler, set the Action to Control query, and select the getUsers query. Once complete, save the query.

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.

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

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.

Wrap up

With these queries and components connected, your app is nearly complete. The next lesson covers using custom JavaScript to further enhance your app, and to add functionality for blocking and unblocking all users.

You can test your knowledge below or move on to the next lesson.