Skip to main content
Element Events

Events that are triggered when the user interacts with an element on the page.

Bhavika Kaneria avatar
Written by Bhavika Kaneria
Updated over a week ago

Experience Level

This core reference entry is suited for beginner-level builders.

In-depth articles (10):

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Workflows


Elements

Elements are the objects that you place on the page, such as text, inputs, buttons, images and icons.


Logic

Workflows is a part of the Logic series in the user manual.

  • Article series: Logic

    • Article: Dynamic expressions Dynamic expressions are used both to set up conditions, and are highly useful in different actions that you may want to add to your workflows.

    • Article: Conditions Conditions are used to determine whether a workflow or action should run or not, by checking whether something is true.

    • Article series: Navigation Using workflows to let the user navigate between pages and page sections.


Debugging

All apps have the occasional bug, and our debugging tools help you squish them efficiently. The debugger helps you go through workflows step by step to see how they perform and the values they return.

Videos (3):

There are also relevant videos listed below the header in some entries below.

An element is clicked

Watch this video to learn how to use An Element is Clicked Event

This event is triggered when the user clicks on the element. Most visual elements can trigger this event, including texts, buttons, images, and icons.

An input's value is changed

Our Academy quick tip on how to trigger workflows from inputs

This event is triggered when the value of an input changes. For text inputs, the event is triggered when the user removes focus from the input.

A map's marker is clicked

Watch this video to learn more about the Map Marker is Clicked Event

This event is triggered when the user clicks a map's marker. 'This map's current marker' refers to the marker the user clicked.

A popup is opened

Watch our Academy quick tip on how to start workflows based on a popup

This event is triggered when a popup opens through a Show an element/Toggle an element action or if an Animate an element action ends with showing the element.

A popup is closed

This event is triggered when a popup is closed through a Hide an element/Toggle an element action, if an Animate an element action ends with hiding the element, or when the user presses Esc.

Note on timing: An popup is considered closed as soon as the Hide this element action is executed, or the user presses the Esc button. However, popups fade out by default, and as a result the actions may run before the popup is actually hidden for the user.

In cases where you want to avoid this (such as when the result of the workflow may be visible on-screen while the popup is fading out), you can schedule a custom event to run in about 0.5 seconds. This gives the popup time to be completely hidden before the actions run.

An element has an error running a workflow

Watch this video to learn more about this event

This event is triggered whenever Bubble reports an error in a workflow that was initiated by a specified element, such as a failed login attempt, as well as unexpected errors, such as the user being offline and Bubble being unable to communicate with the server.

This workflow takes priority over An unhandled error occurs.

In other words, if both events are potentially triggered, only the The An element has an error running a workflow event will run.

The default handling of errors in a Bubble app is to automatically display the error to the user using the browser's default alert system.

For workflows handling unexpected errors, it's advised not to fetch data from the database or external APIs. This is because network or connectivity issues, which might cause the initial error, could also make the error workflow itself fail. This happens if the workflow depends on data that cannot be accessed due to these issues. In such cases, users might end up seeing an error alert if the error workflow doesn't execute successfully.

Element

The Element setting specifies which element Bubble should watch for errors. For example, if you place it on a button, any errors happening in workflows initiated by that button will be caught.

Identifying the error code

Each error in Bubble has a unique code. If you want to set up the workflow to react to a specific error, you can define this using a condition on the event or action that includes the error code:

To identify the error code:

  • Use the data source Current workflow error's code

  • You can find the list of all error codes in Settings - Language and scrolling to the bottom of the language text strings.

  • Error codes are static.

Returning the error message

In the same way as above, you can also return the error message Bubble would normally display. You can combine the code and the message to manage all errors in the same way, or identify specific errors by using conditions.

To identify the error message:

  • You can find the list of all error messages in Settings - Language and scrolling to the bottom of the language text strings. They can be customized as you see fit.

  • Error codes are not static.

Did this answer your question?