Bubble

Bubble.io: Using Workflows

Intro to Workflows in Bubble.io: Simple examples, and how workflows are triggered.

Marina Trajkovska

One of the most important elements of the Bubble platform is the Workflow Tab, which enables us to express what an application does.

This article provides a simple overview of Bubble's Workflow Tab and how to use it to create workflows.

It explains events and actions, and provides an instant preview of the workflow as it is being built. This allows users to quickly build, test, and deploy workflows without having to wait until the end of the process.

What is the Workflow Tab?

The Workflow Tab is a graphical user interface (GUI) which allows us to visually construct logic flows for our application.

Workflows are triggered by an event – something that happens on the page, such as when a user clicks a button.

Upon triggering the event, the Workflow Tab tracks the steps taken in response and carries out the corresponding action.

What Types of Events and Actions Can Be Triggered?

Events can be triggered by a wide variety of user interactions.

The most common event is when an element is clicked, but other events like page loads and form submissions can also be bound.

Actions taken can be categorized into a few groups, including account interactions, navigation, data operations, email, payments, analytics, and custom events.

How Do We Use the Workflow Tab?

It's easy to create workflows in the Workflow Tab.

When adding an event, we can select the specific action that will be triggered upon its occurrence. For example, in the screenshot below, we have an event that triggers when a button is clicked on the index page, with the specified action to show an alert.

We can also add multiple actions to a single event.

For example, in this workflow, we have an event when the button is clicked and then trigger the steps of sending an email and showing an alert. It's important to take note of the order in which the actions are executed, since each step will affect the outcome of the workflow.

Previewing the Page

To see our newly created workflow in action, we can preview the page and watch it take place.

If we enter an email in the input box and click the button, we can observe an email sent to that address and the alert being displayed.

Conclusion

Creating workflows in Bubble is a fast and efficient way to build an application. With the Workflow Tab, users can quickly create an event and the corresponding action that is triggered.

With a few clicks, we can bring our applications to life and program our web applications with ease.

Next

Property editors ->

Intro to Workflows in Bubble.io: Simple examples, and how workflows are triggered.