Welcome back! In our previous lesson, you mastered the art of laying out a static user interface using Bubble's Design tab. You learned to add and configure text, inputs, buttons, and groups, which are the visual foundations of your multi-tool platform. Now, it's time to breathe life into that static design.
This lesson is all about the Workflow tab, the logical brain of your application. You'll learn how to create a basic workflow triggered by a button click to manipulate elements on the page. By the end of this session, you'll be able to make your app react to user input, moving beyond a simple visual mockup to a truly interactive experience. This is the fundamental skill you'll need to make every "Calculate," "Convert," or "Format" button on your platform actually do something.
The Anatomy of a Workflow: Events and Actions
At its core, a Bubble workflow is a simple but powerful "if-then" statement: If a specific Event happens, then Bubble will perform one or more Actions.
- Event: This is the trigger. The most common event is a user-initiated action, like "when a button is clicked" or "when an input's value is changed."
- Actions: These are the steps Bubble executes in sequence once the event is triggered. Actions can range from navigating to a new page, saving data, or, as we'll focus on today, manipulating elements on the current page.
This short video from Coaching No Code Apps provides an excellent conceptual overview of what workflows are.
Bubble Workflows: The Complete Guide for Beginners
This clip clearly explains the relationship between events and actions using a practical sign-up form example.
Watch from the beginning until the explanation ends. Pay close attention to how the button click is the "trigger" (the event) that initiates a sequence of actions.
Your First Workflow: Hide and Show
Let's build your first workflow. We'll start with a classic "Hello, World!" equivalent in visual programming: making an element disappear and reappear.
First, on a blank page in your Bubble editor, add a Group element and place a Text element inside it with some sample text. Below the group, add a Button and label it "Hide".
Now, select the "Hide" button. In its Property Editor, you'll see a prominent button that says "Start/Edit workflow".
Clicking this button will switch you to the Workflow tab and create a new workflow box that starts with "When Button Hide is clicked". This box is your event. Now, you just need to tell Bubble what action to perform.
The following video from Airdev will walk you through the process of creating a workflow to hide the group and a second workflow to show it again.
Bubble.io for Beginners: Workflow logic [2/12]
This tutorial provides a clear, step-by-step guide to creating your first simple show and hide workflows.
First, watch the segment from the beginning to build the 'Hide' workflow. Notice how the instructor clicks to add an action, navigates to 'Element Actions', and selects 'Hide'. Next, watch from adding a show button. Here, you'll create a second button and a new workflow using the 'Show' action to make the group visible again.
After following the video, you should have a group that you can hide and show using two separate buttons. You have successfully created your first interactive logic!
Manipulating Element Content
Workflows can do more than just change visibility. A crucial function for your tool platform will be taking user input and displaying a result. Let's build a mini-tool that does just that.
- Set up the UI: On your page, place an Input element (leave the
Content formatas 'Text'), a Button labeled "Say Hello", and a Text element with the initial text "..." - Create the Workflow: Click the "Say Hello" button and select "Start/Edit workflow".
- Add the Action: In the workflow, click to add an action. Navigate to
Element Actions > Display data.- Element: Choose the Text element you created in step 1.
- Data to display: This is where the magic happens. We want to combine static text with the dynamic value from the input. Type
Hello,(with a space after the comma). Then, click the blue 'Insert Dynamic Data' button, find your Input element in the list, and select its's value. Your expression should look something like:Hello, Input A's value.
Now, go to your preview page. Type your name into the input box and click the "Say Hello" button. The text element should update instantly. You've just created a workflow that manipulates the content of an element based on user input—a core mechanic for your future tools.
A More Elegant Solution: Toggling with a Single Button
Using two buttons for 'show' and 'hide' works, but it's not very efficient. What if a single button could toggle the element's visibility? To do this, the button's workflow needs to know the element's current state (is it visible or not?).
This is where custom states come in. A custom state is a way to temporarily store a piece of information on a page without having to save it to the database. It's like a small variable or a bit of temporary memory for the page. We will cover them in detail in our next lesson, but you'll get a practical introduction right now.
The following article from Nocode Assistant provides a superb guide on using a custom state to show and hide an element with a single button.
How to Show and Hide elements in Bubble.io
This article will guide you through a more advanced and practical way to control element visibility, providing a great introduction to custom states.
Follow the steps in the article to implement a toggle button. Start by reading the overview to understand the high-level process. Next, follow the instructions in the section on creating a custom state. The key is to create a state of type 'Yes/No'. Read Setting up the collapsible elements. This part explains two critical settings: unchecking 'This element is visible on page load' and checking 'Collapse when hidden'. This prevents the element from flashing on the screen and ensures the layout reflows correctly. Finally, follow the two steps in the main section to connect everything: Step 1: Build the workflow that changes the custom state's value. Step 2: Add a 'Conditional' rule on the element itself that makes it visible only when the custom state's value is 'yes'. The "Final result" GIF at the end shows exactly what you'll have built.
By completing this exercise, you've not only achieved a more professional UI interaction but also gotten a head start on understanding one of Bubble's most powerful features.
Conclusion
In this lesson, you made the critical leap from static design to dynamic logic. You've learned how to harness the power of the Workflow tab to make your application respond to user actions.
Here are the key takeaways:
- A workflow is composed of an Event (the trigger) and a sequence of Actions (the results).
- You can start a workflow directly from an element's Property Editor using the 'Start/Edit workflow' button.
- Workflows can manipulate elements in various ways, including changing their visibility (
Show/Hide) or updating their content (Display data). - Using a simple custom state allows you to create more elegant logic, such as toggling an element's visibility with a single button.
You now have the foundational skills to build the core logic for any simple tool on your platform. In our next lesson, we will dive deeper into custom states. You've just seen how they can be used for a simple toggle, but their potential is vast. You'll learn how to use them to manage more complex user interactions and display temporary data, all without needing to reload the page.