Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • Events
  • Actions
  • The workflow canvas
  • Organizing workflows
  • Colors
  • Folders
  • Searching for workflows
  • Sharing workflows
  • Compact mode
  • Enabling compact mode
  • Show conditions
  • Grid view
  • Errors in workflows
  • Handling errors
  • Workflow timeouts

Was this helpful?

  1. User manual
  2. Logic

Workflows

This section explores workflows — the driving force that powers your app and brings its functionality to life.

Last updated 1 month ago

Was this helpful?

Workflows are the engine of your application – they are how you instruct Bubble to respond to what the user does, such as clicking a button, with a set of actions that can do anything from hiding/showing or animating things on the page to making changes in the database and make external API calls.

Best practice: Bubble automatically assigns names to workflows when they are created. However, it's recommended to give your workflows custom, descriptive names. This practice makes it easier to identify, organize, and search for them later.

A workflow is the combination of an event that triggers one or more actions.

Events

An event is anything that tells a workflow to run, such as:

  • A button being clicked

  • An input's value being changed

  • A condition being true

  • A user logging in or out

  • Changes in the database

Events can run on a page, or they can be triggered (which doesn't require that a user has a page open).

Actions

Actions are the operations that take place when a workflow is triggered by an event. You can place as many actions as you need inside one workflow. Actions can do things like:

  • Creating, updating and deleting things in your database

  • Hiding, showing and animating elements on the page

  • Creating user accounts and logging users in/out

  • Sending emails

  • Navigating to a different page

  • Loading data

  • Using plugins, such as making a payment

This is not an exhaustive list, but as you can see, the actions in a workflow is how you make your app respond to a user's actions or changes in conditions.

The workflow canvas

The workflow canvas is structured to help you stay focused by letting you work on one workflow at a time. Workflows are arranged vertically, starting with the event at the top, followed by a sequential list of actions beneath it.

Each action category is marked with a unique icon on the left, making it easy to quickly identify specific actions in your workflow. In the example above, the user icon reflects that the action belongs to the Account action category.

Next to the icon is the action label, which is customizable in the property editor of that action. Underneath you will see any condition placed on the action.

Organizing workflows

Workflows in the workflow editor can be categorized in two ways for easier navigation: by creating folders and adding colors to workflows. There are no rules or best practices on how to best organize your workflows, but we recommend giving some thought as to how you can combine colors with folders to efficiently navigate pages with a lot of workflows.

Colors

Each workflow you add can be given one of the following colors:

  • Gray (default)

  • Blue

  • Red

  • Green

  • Orange

  • Purple

  • Cyan

  • Brown

Folders

You can also organize workflows into folders, available in the left-hand menu of the workflow canvas. Each folder can be given a custom name. To add a new workflow to a specific folder, you can hover the folder and click the + symbol that appears. Workflows can also be dragged/dropped between folders.

By default, all workflows are placed in the Uncategorized folder. In the example below, we have created a custom folder and named it Buttons.

Each folder name is followed by the number of workflows within that specific folder.

Searching for workflows

The toolbar allows you to quickly search for workflows. You can search for events, actions and conditions by typing their name/description:

Sharing workflows

You can share a specific workflow’s unique URL by copying it directly from the browser’s address bar while the workflow is open. This feature is helpful for keeping detailed (by including the URL to a specific workflow in the notes) or sharing a direct link to the workflow with team members for .

Compact mode

Compact mode displays workflows in smaller rectangles, enabling more steps to fit on the screen at once. Events and actions are left-aligned and utilize a larger portion of the screen width to present information clearly.

Enabling compact mode

To switch between compact and normal view, click the icons in the upper-right corner of the workflow canvas:

Show conditions

In the list/grid of workflows, you can select to see Conditions on the workflow level:

To enable this, click the settings icon and select Show Conditions.

Grid view

In the left-hand menu bar, you can select to see workflows arranged in a grid instead of a list. To enable grid mode, click the settings icon and select Grid view.

Errors in workflows

Workflows can hit errors in different scenarios. For example:

  • A user tries to log in using the wrong credentials

  • A user tries to sign up using an email that already exists in the database

  • A credit card payment fails because the card is declined

If a workflow runs into an error, it will stop running on the action where the error happened. Any previous actions will not be reverted.

Note that the errors we are discussing in this section are related to system errors, and not to errors that are flagged by Bubble's issue tracker.

Handling errors

Bubble's default way to communicate most errors is to show the error in the browser's standard message popup. You can instruct Bubble to handle errors on specific elements or more broadly on a page by using two different events. The links below point to guides for each type:

An element has an error running a workflow

This event will catch errors that happen related to a specific element. For example, if a Log in button connected to a workflow containing the Log the user in action generates an error, the error will be connect to that button.

An unhandled error occurs

This event will catch errors more broadly: any error on the page will trigger it unless it's caught by another error event.

Workflow timeouts

In rare instances, workflows can , generally indicating that the server has been overwhelmed with tasks that it cannot complete within a five-minute window. Bubble may also halt processing to preserve system stability, or timeouts may occur due to technical issues like lost server connections.

Timeouts are more likely with or those processing large volumes of data. For instance, operations like Make changes to a list of things are efficient for up to 1,000 records but may slow down or time out beyond that number. For handling lists approaching or exceeding 10,000 records, it's highly recommended to use backend operations better suited for large data volumes.

If you want to learn more about bulk operations, you can have a look at the article below:

We also explore optimizing your app for performance and in the article below. This can be helpful if you plan to work with large amounts of data or particularly demanding server processes:

Article series:

Article:

Article section:

Video tutorial:

Article:

Article series:

Events
Actions
How to use the Unhandled Error Occurs event
Bulk operations
Optimizing for workload
Using the An element has an error running a workflow event
Grid view lets you view your workflows in a grid instead of a list.