Skip to main content

Mobile 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 uses several types of event handlers. You can test them out as you complete each step to get a better understanding of how they work.

1. Configure the Fab button​

When the Fab button is pressed, it needs to open the peopleDetailsScreen so the user can be added. To do this:

  1. Select the fab1 component.
  2. In the right panel, click + Add in the Event handlers section.
  3. Set the Action to Navigation, Method to Navigate to screen, and Screen to peopleDetailsScreen.

2. Configure the save button​

In a previous lesson, you added a Save user details button to the peopleDetailsScreen screen. This button needs to save changes to existing users, and save new users. This means it needs to conditionally trigger either the updateUser or createUser query depending on the scenario. Start by configuring the button to save changes to an existing user.

  1. Navigate to the peopleDetailsScreen.
  2. Select the Save user details button.
  3. In the right panel, click + Add in the Event handlers section.
  4. Set the Action to Control query and the Query to updateUser.
  5. Set Only run when to {{ collectionView1.selectedItem != null }}. This makes it so the event handler is only triggered when a user is selected.

Create a second event handler using the same process, but set the query to createUser and Only run when to {{ collectionView1.selectedItem === null }}.

3. Add pull-to-refresh functionality​

Mobile apps often implement pull-to-refresh functionality to update the data on the screen. To add this functionality to the peopleListScreen:

  1. Select the peopleListScreen screen.
  2. In the right panel, click + Add in the Event handlers section.
  3. Set the Event to Refresh and the Query to getUsers.

Swiping down on the screen triggers the pull-to-refresh action and reloads the list of users.

4. Add event handlers to queries​

So far, the event handlers you've added control components, trigger queries, and navigate through the UI. The last step is to add event handlers to queries, so that the UI is updated after you make changes.

At the moment, you must navigate back to the peopleListScreen screen after creating a new user and then use the pull-to-refresh functionality to update the list. You can instead add event handlers to queries to perform these actions for the user automatically.

Start by selecting the createUser query. Scroll down to the Event handlers section and click + Add next to Success. Set the query to getUsers so that when the createUser runs successfully, it triggers getUsers which automatically updates the UI.

Click + Add next to Success again to add a second event handler that navigates back to the root screen. Set:

  1. Action to Navigation.
  2. Method to Back to root.

Then, configure a third event handler to display a success notification by setting:

  1. Action to Show notification.
  2. Title to User created
  3. Type to Success.

Make sure to save the query, then add the same three event handlers to the updateUser query. For the success notification, change the Title to User updated since the query updates an existing user.

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.

Demo