Workflows

This is the short-form technical core reference entry for workflows. If you are unfamiliar with how workflows work we recommend exploring the article series below to learn more:

User manual article series: Workflows

Bubble operates on a workflow-centric programming model. Workflows dictate the app's response to user interactions.

Each workflow consists of a triggering event and a subsequent sequence of actions. For instance, a workflow might be set up such that when the Signup button is clicked, it registers the user, dispatches an email, and then navigates to a different page.

Workflows are tied to individual pages within the app and can be managed under the Workflow Tab. If an action produces output, it can be referenced as 'Result of previous step.'

The following section details all the events and actions available within Bubble.

Condition

There may be times when a workflow or action should only execute under certain . This might be when a user is logged in, a checkbox is selected, or if the user's email belongs to a specific domain.

To cater to these scenarios, you can attach a condition to the event. Conditions consist of that return a . For actions, if the condition is not satisfied, that specific action will be bypassed, but subsequent actions will continue, albeit without data from the skipped action.

Note: When creating a workflow involving Rich Text, be careful when also using the "Text/Button ... is pressed" conditional statement on the same Rich Text - the two can interfere. As a workaround, consider adding a transparent shape on top and making that the source of the on click workflows.

Element

Choose the element that the event/action applies to.

Workflow folder

Assign a workflow/event to a folder for clarity in the app. Create a new folder by selecting the 'Create a new folder…' entry at the bottom of this dropdown menu or from the Workflow folders section in the Palette.

Tip: To display the workflow folders, from the Workflow Tab, click the arrow in the long vertical area to the right of the Tab section in the Palette.

Event color

Select a color for the event. This organizes workflows when the app becomes more complex. This color only appears in Development mode.

Add a breakpoint in debug mode

When using the debugger, instead of using the step-by-step mode for all workflows, specify specific events or actions that should pause. Checking this box allows this. This option has no effect on the app when the debugger isn't present. Similarly, when users are using the app, this will not be applied.

Disable workflow

Occasionally, when debugging, you may want to disable a workflow without getting rid of it. This could allow you to test specific pieces of functionality without consequent workflows getting in the way, or to modify an existing workflow while keeping a copy of the version that is already working for future reference.

Other ways to learn

User manual articles

Workflows

For a more in-depth look at how workflows work, check out the article series below. This covers how to combine events and actions to make your app respond to user interaction

Article series: Workflows

Conditions

Conditions are used to determine whether a workflow or action should run or not, by checking whether something is true. The article below covers how they work.

Article: Conditions

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. If you are unfamiliar with this subject, we recommend reading through the guide below:

Article: Dynamic expressions

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.

Article series: Debugging your application

Video lessons

Last updated