Skip to main content

Web app tutorial: Configure events

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 to display its settings in the Inspect tab. Select Save actions to add an event handler that runs the patchUser query.

Now test this out by clicking a user's name and editing it. Click the Save 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. Add a success event 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. Create an event handler to run the block query. As a small design improvement, set Disabled to {{table1.selectedRow.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.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.