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.