Bubble Workflow: How does this system work?

If you’ve already used Bubble, you know it’s a powerful tool that uses a "workflow" system. But what exactly are workflows, and how do they work? We explain it all!

What is Bubble?

Bubble is often described as a no-code app builder, a tool for creating applications without writing code. Its primary goal is to enable users to develop web applications without any programming knowledge. Indeed, the essence of no-code tools is to make web development more accessible. With an optimized graphical interface and drag-and-drop design methods, Bubble allows users with no programming experience to build powerful applications.

Bubble is a well-known tool that generates a lot of buzz due to its many advantages: reduced design time, cost savings, flexibility, power, and more.Bubble is also ideal for launching your startup, to connect with other tools like Airtable or even to create PWAs.

Warning: no-code tools may seem very simple to use from an outsider’s perspective, but they still require a certain level of training. Bubble, for example, takes several hours to learn before it can be mastered. Sometimes, it’s more efficient to hire a Bubble developer than to learn the entire tool yourself. That said, no-code tools will always be easier to learn than a single programming language.

That warning deserves sharpening, because it points at something very concrete. What no-code removes is the writing of code, not the design work: modelling data, defining who is allowed to see what, anticipating what happens when two people edit the same record remain open questions. On Bubble, access control runs through privacy rules, enforced server-side: a data type created without a rule is readable by everyone, including through the app’s API. That is broken access control, first in the OWASP Top 10, and it is the most visible difference between a demo app and a shipped one.

Why use Bubble?

Want to promote your business interactively? Provide your employees with an internal app? Gain the visibility of a website through an application? Bubble is your go-to! With Bubble, you can develop powerful, dynamic, and fully customizable web applications tailored to your most specific needs.

Bubble workflows: definition

Bubble has its own way of working. Its design logic is based on workflows.

By definition, a workflow is an event that executes a series of actions when triggered. Let’s take a very simple workflow example: a user clicks a button (event), a document opens (action). It’s the combination of the event and the series of actions that defines a workflow. A more complex workflow example is: a user signs up for the newsletter (event), an email is sent to the user, a popup opens to confirm their subscription, and the page changes (actions). Each workflow is specific to only one page of the developed application.

Workflows have a direct effect on the invoice, and it is the part most tutorials leave out. Since 2023 Bubble measures consumption in workload units: every page load, every workflow action and every search consumes some, and exceeding the included allowance is billed at $0.30 per 1,000 units. Two apps on the same plan can therefore cost very differently. The big offenders are known: an unfiltered search that pulls a whole table, an action repeated inside a loop, a scheduled workflow running every minute for no reason. Filtering server-side rather than on screen is the first optimisation to make.

One distinction structures everything else, and it is worth making early: a workflow triggered from a page runs in the visitor’s browser, whereas a backend workflow runs server-side. The consequence is simple, anything that must not depend on the user belongs server-side: data validation, API calls using a secret key, sending emails, updating several records. Processing left on the page stops if the tab is closed, and a key placed in a page workflow is readable by any visitor.

How to use Bubble workflows?

To create your workflows, start by selecting an event that will trigger your actions. Most of the time, the event is a button click. In this case, you’ll need to precisely choose which element the event applies to. You can also add conditions so that the event only triggers under certain circumstances.

Once your event is created, in the workflow panel, you can select one by one the actions you want to implement. Depending on the actions you specify, you’ll need to provide different details, such as the data sources to use, etc.

If you want to add a large number of workflows to your application, you can copy and paste both entire workflows and individual actions. Note: if you paste an action onto an existing action, it will be inserted before the targeted action.

By clicking the arrow, you can add actions wherever you like using the actions menu. Note: the order of actions is very important!

Event types

To make things easier for you, events are categorized. There are 3 main categories:

“Element events” (element events)

‍These are the elements that most frequently occur when developing applications on Bubble. They group events such as clicking a button, an image, or a specific block. They are tied to an element.

The “General events”

‍Here, we’re talking about broader events, such as when an application property changes, for example, when a user logs in. These events can be more complex to develop than “Element events.”

“Custom events” (custom events)

‍Custom events are more specific and allow you to create reusable action sequences in other workflows.

Action types

Just like events, actions are categorized. Here are the different action categories you can find on Bubble:

Account management‍

All actions for managing authentication, login, logout, sign-up, etc.

Navigation

All actions to navigate the user from one page to another in your app.

Data

All actions to read and write various data.

Email

All actions to send emails, confirmation emails, sign-up emails, etc.

Payment & analytics

All actions related to payments, credit cards, banking data, subscription management, etc.

Plugins

‍All actions from plugins added to the app. Note: if a plugin’s actions are payment, email, navigation, or other types, they will still appear under the “plugins” category.

API workflows on Bubble

Thanks to Bubble's API, it is possible to create workflows that execute actions via or towards external services. API workflows are triggered on the server, either when launched from another part of the application or via a call to the application's workflow API.

API workflows further expand creation possibilities and enable the development of more complex applications.

Scroll, your Bubble application development agency

Are you facing an issue with workflows? Do you need support to develop your web application on Bubble? At Scroll, we’re here for you! To develop unique, powerful applications tailored to your needs, we created the'Bubble agency ! An agency made up of no-code and Bubble experts ready to design custom solutions. Feel free to contact us!