An Introduction to Data, Workflows, and Reusable Elements in Bubble
Data Series (Lesson 1): Bubble is an incredible technology that lets anyone design and program custom software without writing a line of code! In this tutorial, we’ll take a closer look at how data, workflows, and reusable elements work in Bubble by answering these questions:
- What’s the difference between a website and web application?
- How is data stored in Bubble?
- What is the User data type?
- What are fields?
- What are workflows?
- What are input values?
- How do I signup for my application?
Estimated Time to Read/Complete Tutorial: 20 minutes
Completed lesson app pages for reference:
Editor: https://bubble.is/page?type=page&name=lesson-1-dev&id=littlebay-series&tab=tabs-1
Preview: https://littlebay-series.bubbleapps.io/version-test/lesson-1-dev
Websites vs. Web Applications
Static websites are mainly used to display information to a User (e.g., Restaurant websites, personal biography websites). In contrast, Web Applications rely on users to interact with them (e.g., Facebook, Twitter, LinkedIn). These web applications allow Users to sign up and create an account. They can store users’ profile information, friends, followers, following, tweets, posts, likes, favorites, blocked users and more — all in their web application’s database. That data is then displayed to you in the application, and is modified by you and the other Users of the app interacting with the application (i.e., adding new friends, liking new posts, unliking posts, etc.).
As you create your app in Bubble, you will construct its data structure and workflows. For example, if you are building a food delivery application, you will need a data structure that stores information about customers, restaurants, and orders. Alternatively, if you are a building a chat application, you will need a data structure that stores information about users, conversations between users, and the messages within those conversations.
This lesson will explain the “Data” section of Bubble’s editor, and walk-through what happens when someone signs up for your Bubble app.
Getting Acquainted with the Data Section of Bubble
To get started, we’ll first take a look at how data is structured. Then we’ll look at how it is stored in our development and live databases.
In your app’s editor, navigate to the Data Tab (shown below). On this page, you’ll see the built-in data type called “User”:
Why does it say User there?
User is referring to all of the people that will sign up for your application. Since most web applications need the ability to have people sign up/login to the application, the User data type is built-in to all Bubble applications by default and can’t be removed.
On the right-hand side of the screen, you’ll see three built-in fields within the User data type: email, Modified Date, and Created Date:
Imagine that you have a social network application, with thousands of people who’ve signed up. We need a data structure to store information about these people’s accounts, or “Users”, so that they can successfully use the app.
The User data type tells Bubble, “Each person who signs up for my app is called a “User”, and for every person who signs up for my app, store this specific information about them in the following fields”:
- email (the email this person used to sign up for an account)
- Modified Date (the date this person last made changes to their account)
- Creation Date (the date this person signed up for your app)
These are just three built-in fields. As you build your app, you can add more fields to store other information about the User (i.e., “first name”, “last name”, “profile picture”, “address” and more), and create other data types to store other information.
(Note: Passwords are also built-in for every Bubble app and stored/salted+encrypted securely behind the scenes by Bubble. They are never shown anywhere in the application editor.)
Storing and Viewing Information about your App’s Users in the Bubble Editor
Storing information in our Bubble database looks similar to storing information in Excel.
Let’s say we have an Excel spreadsheet titled “Users” to keep track of people who have signed up for our application. Within that spreadsheet, each person is their own unique entry (i.e., a new row in the spreadsheet). Each time a new User signs up, a new row is added to the spreadsheet with that User’s information.
At the moment, each row only stores specific information about that person because the app only has three fields right now: email address, the date they signed up for your app (Creation Date), and the date they last made a change to their account (Modified Date).
It could look something like this in Excel:
Back in Bubble, our app’s signups are stored in a similar way.
Every time someone signs up for your app, that person’s account is added as a new row in your Bubble app’s “All Users” table, and each field is its own column in the table.
To see this in more detail in Bubble, at the top of your screen, click on the App Data Tab, and click on All Users on the left hand side to view your Users table. You should see the image below:
Since you don’t have any signups yet, the Users table is empty.
I manually added four signups here and this is what it looks like in comparison to the Excel spreadsheet:
Let’s take a closer look at how Bubble’s built-in signup functionality works, and then we’ll sign up for your application in order to see how data is stored.
Step-by-Step Tutorial
View the Signup/Login Functionality in Your App
To speed up the app development process, each Bubble app contains three reusable elements:
- Footer
- Header
- Signup / Login Popup
These reusable elements provide pre-built signup functionality that you can customize.
Reusable elements can be viewed and edited by clicking on them in the Page/Reusable Elements dropdown in the top-left corner of the editor:
For example, after clicking on the reusable “Header” element, you will be able to edit it (shown below). By-default, it features a logo element on the left-side (which you can change to your app’s logo), Signup/Login buttons, and a copy of the Signup / Login Popup reusable element:
These buttons are programmed using workflows.
For example, after double-clicking on the Sign Up button in the reusable header to open its property editor (shown below), we can click Start/Edit Workflow button to view or modify this button’s workflows in the Workflows Tab of the editor.
Bubble workflows are used to program Bubble applications so that your application has completely custom functionality.
Workflows are used to define what happens when users interact with your application (e.g., workflows can save information that the User just typed, save User’s preferences, save information about a User, show a popup, show an alert, send an email, charge a User’s credit card, record an analytics event, connect with thousands of external APIs, and more).
A workflow consists of two parts: an event, and 1 or more actions.
Events are the part of workflows which tell Bubble when certain workflow actions should be run. When an event is true, Bubble will run that event’s actions. In contrast, when an event does not evaluate to be true, Bubble will not run that event’s actions.
In other words, workflows are similar to If then statements (i.e., “If this User clicks the Complete Purchase button… Then, charge their credit card the order total”, or “If the User clicks the Sign Up button…Then, create an account for them using the information they entered”. The actions are what the app does.
For example, in the Sign Up button within the reusable element header, the Event is:
“When the Button SIGN UP is clicked” (i.e., when any User clicks this Sign Up button) →
“Run” the following two actions:
Step 1: Set state mode of Signup / Login Popup A to “signup”.
This action uses a more complicated action called “custom states”, but the main purpose of this action is to show the Current User the signup form (not the login form), once the Signup / Login Popup is shown in the second action:
Step 2: Show Signup / Login Popup A
This action opens the Signup / Login Popup element (shown below), so the User can create an account. The form looks like this:
This particular Sign Up button’s workflows only show the User the reusable Signup / Login Popup reusable element. The Sign Up button within the Signup / Login Popup is the button whose workflows actually sign the User up.
Note: Even though the actions look like they happen in steps (and are labeled as “Steps”), Bubble mainly runs an event’s actions at the same time. There are exceptions, but in this Sign Up Button example “Step 1” and “Step 2” are happening at the same time.
Next, double-click on the Signup / Login Popup A, and click the “Edit Element” button to view/edit it:
The Signup / Login Popup reusable element contains an email input, password input, confirm password input and Sign Up Button; they allow the User to enter their information and create an account:
To see how new accounts are created using workflows, view the “Button Sign up”’s element’s workflows:
For example, let’s say someone with the email of bob@email.com signed up for our app after filling out his information:
After Bob entered his email, password, re-typed password, and clicked the Sign Up button, Bubble saved his typed information to this app’s database because of the Sign Up button workflow:
“When the Button Sign up is clicked” →
Run the following actions:
Step 1: Sign the user up (shown below)
This action creates a new account for Bob, and saves his information (email, password, sign up date) to the app’s database:
In our signup form there are three input elements:
- Input Email (sign up)
- Input Password (sign up)
- Input Confirmation (sign up)
Any time a User types something (e.g., their email, password, favorite color, any text) into an input element in Bubble, they are changing the Input element’s value to what they just typed into it. For example:
When Bob entered his email address, the value of the Input Email (sign up) became: bob@email.com.
When Bob entered his password, the value of the Input Password (sign up) became: 123456 (I entered this as Bob’s password, but it is shown as the dots because the input type is “password”)
When Bob re-typed his password, the value of the Input Confirmation (sign up) became: 123456 (I re-typed this as Bob’s password, but it is shown as the dots because the input type is “password”)
In the “Sign the user up” action, Bubble created a new User, and saved the Input email (signup) and Input password (signup)’s values to the Email and Password fields (shown below).
In this action, it also made sure that Bob’s password in the Input Confirmation (sign up) element, exactly matched the password that Bob originally typed into the Input Password (sign up) element. (If the passwords didn’t match, an error message would have been shown to Bob, and the “Sign the user up” action would not have created an account for Bob until he fixed the errors).
Step 2: Hide the Signup / Login Popup (shown below)
This action hides the Signup / Login element since Bob no longer needs to see this popup.
Sign Up For Your App (How to Create Your First Dev-Mode User Account)
On a blank page in your app, add a reusable Header element by scrolling down in the elements panel, and placing it on the page (shown below):
To preview this page, click the Preview button in the top right corner (shown below), or use the keyboard shortcut CTRL+P.
This opens up the development preview of your page, with Bubble’s debugger at the bottom (ignore the debugger for now):
Click the Sign Up button and create a test account with your email address:
After signing up the popups should close, and you should see your email in the top right corner of the application.
An Overview of Conditional Statements
After signing up successfully, you’ll see that the Login and Signup buttons are no longer shown in the top right corner.
Instead, you should see your email and a Log Out button:
By creating an account, Bubble “logged you in”. As a result, Bubble doesn’t show the “Sign Up” and “Log In” buttons to you, and instead displays your email and the logout button. This happened because of the result of two conditional statements within the header reusable element.
In the editor, navigate to the reusable header element and expand the Elements Tree (shown below), so that you can see all of the hidden, nested elements within the Group B element:
Click the Group Logged In element so it becomes visible in the editor:
Then, click the tab in the property editor labeled “Conditional”. The Conditional (shown below) on the Group Logged In element tells Bubble, “When the Current User is logged in” → This element is visible: checked (i.e., show this Group Logged In element to the Current User, because they are logged in).
The Group Logged In element is set to not visible on page load (shown below), so it only becomes visible based on when the Current User is logged in.
Next, hide the Group Logged In element in the editor by clicking the eyeball icon next to it again in the Elements tree panel. Then, click the Group Logged Out element so it becomes visible, and view the Conditional Tab. The elements panel should look like this:
This Conditional (shown below) on the Group Logged Out element tells Bubble, “When the Current User isn’t logged in” → This element is visible: checked (i.e., show the Group Logged Out element to the Current User, because they are logged out).
The Group Logged Out element is also set to not visible on page load (shown below), so it only becomes visible based on when the Current User isn’t logged in.
View Your New Account in the Database
To view your new account in your app’s database, go back to the editor to the App Data Tab (Data → App Data in the editor) and click on “All Users”.
You should see your account information in the All Users table, similar to the above screenshot.
Yay! 🤗 Your app now has it first signup in your app’s development database. In the next lesson, we’ll learn the difference between your app’s development and live databases and development and live environments, and expand on how to structure your app’s data.
Thank You for Reading!
I hope this tutorial was helpful! If you have any questions, or if I can clarify anything at all, please let me know in the comments! 😃
For more information on our products and services, visit littlebaytech.com!
