Beginners Guide to Bubble.io Workflows
In this Bubble tutorial we provide a beginners guide to Workflows in Bubble.io including how to use a form to create new entries in the Bubble database and how to link these entries together in database relationships. We also explain at the end how to control the order of operations in Bubble.
Master Bubble workflows: Unlock the power of workflows to create dynamic, data-driven apps!
Create, edit, and manage data: Learn essential database operations for building robust Bubble applications.
Optimize your app with custom states: Discover how to use custom states for smoother user experiences and enhanced functionality.
Introduction to Bubble.io Workflows
In this Bubble tutorial, you will learn everything you need to know to get started with working with workflows in Bubble. This is my workflow beginners guide for Bubble.io but before we get started if you found this on YouTube please give us a like and subscribe and you can find even more Bubble tutorial videos at our website planetnoko.com exclusive to our members.
Creating a Simple Workflow
So workflows they're a key part of your Bubble app and let's get something simple and then also I'm going to just hint at the next step after that. So I've added two elements to my page and I'm in a brand new app and this is going to be as if I'm adding a contact so I'm going to be creating new data a new entry in my Bubble database and first thing I need to do is go into data and create a new data type.
Understanding Data Types in Bubble
This is like a different, each data type is like a separate sheet in Excel it's a separate database but you can establish relationships between them can be one way to think about if that helps. So I'll create a data type called contact and then I'm going to add in a field called name and I'm going to make this text and that's all I need to work with the form that I've got on the page.
Adding a Workflow to a Button
So now I can click on my button and I can say add workflow and this automatically adds in a workflow for when button create new is clicked which is just what I need it to do and so I can click on here and I'm going to go to data create a new thing and that is adding in an action into my workflow to create something new in the database and so I can create a new contact.
Linking Input Fields to Workflows
So no code it's quite easy really I then add in a field and there's the field that I created and because the field is of text it's expecting a text input and so by clicking on here I've got a load of options but I'm just going to go straight down to contact first name because that's an input and then I'll say we'll save its value.
Troubleshooting Input Field Names
Now what do you do if you can't find what you're trying to link to from the design tab? There can be a number of reasons for that one can be if you've done a lot of copy and pasting because the reason that the elements name is input contact first name is because I've updated the placeholder here. If I change this to name Bubble's going to update the placeholder which means it also gets updated here.
Manually Renaming Elements in Bubble
However if I manually rename it like say like version 2 and then I change this back to enter your name because I've manually renamed the place the elements within Bubble by updating the placeholder it doesn't overwrite it's now stuck with this name and then that's the name that I'd have to find when I'm trying to match up data in a workflow and then I'm going to add in another one I'll say reset inputs and let's preview that.
Testing the Workflow
So I'll say Nick create a new thing I only have two actions in there so I didn't even notice the loading bar I'm going to assume that that has worked because if I close it and now I go into data my contact Nick has been created.
Advanced Workflow Techniques
Now I'm going to show you one other thing that we can do with workflows which is going to be that we can refer to previous steps and this is particularly useful if you create something and then you need to establish it as a relationship to other things.
Creating Relationships Between Data Types
So for example let's do this by going back into data and I'm going to create a new data type and I'll call it company and I'm going to say that a contact has got a company and so I'm going to add in a field I'll say company and then this will be of type not text but type company and I'll add in another input.
Using Fixed Layout for Quick Setup
I'm using fixed layout here so it's quick but if you're doing anything that you're going to share with anyone please please please use rows and columns and check out our tutorials basically our design beginner series to understand how to do that if you're unsure but this will be enter company name.
Creating a More Complex Workflow
So my workflow now needs to be a little bit more complicated because I want to create both a contact and a company and then save the company back into the contact. So I think I'll illustrate a couple of different ways to do this first of all just working with with what I've got here I would say we need to do the same thing which is create a new thing company now company doesn't have any fields that I've created so I will put in a name field for company and then find my enter company input and select its value and then this is what I'm trying to highlight is that I can say make changes to a thing and I can say make changes to the contact the result of step one this is just so helpful to get head around this that you can refer to what is being worked with in previous steps.
Working with API Calls in Workflows
This would also be the same if you made an API call and we got loads of videos and API calls for example we work with OpenAI getting AI text generation into your app you make the API call that's like our step one and then we would refer back to that step one to get data out of the reply that we get sent from that API call but for now I just want to work with the same contact that's created in step one and then I can say company equals result of step two let's try that out.
Testing the Complex Workflow
So this time I'll say Ellie and company is say Google create new and if I go into data app data we now have got Ellie added in and the company is showing the unique ID and I'm going to show you a real quick tip just because it's staring me right in the face I'm gonna go primary fields and say contact is name and company is also name and that just means that when I'm viewing data in this database view as the app editor instead of showing the unique ID it's actually going to show that field our sector so company name Google being shown there and then of course company contains Google.
Optimizing Workflows for Workload Units
Okay so one last thing I'll show you which is that since workload units came into effect we want to especially I mean we always have we want to especially build our apps in a lean development style and so we can actually reduce the number of steps in this workflow and we can do that by creating the company first then we don't need to make changes to a thing and we can say contacts company equals result of step one now that works in this particular situation but it's going to be down to you to work out what order you need to put things in your workflow in order to have the data when you need it.
Understanding Workflow Execution Order
You also should be aware that that I'm going to undo that because this will perfectly illustrate it go back back back and you should be aware that Bubble doesn't necessarily run workflows in a linear left to right fashion Bubble will self optimize and one way an issue that can cause is that you could try to be working with data at a later step in the workflow that hasn't actually arrived or is ready to work within a previous step the way around that is that if you use this result of step one Bubble knows that it can't run step three before step one that's particularly sort of you're working with API's where you have to wait for the third-party service to send the data back and but it's one way that you can control the order of operation in workplace.
Conclusion and Next Steps
So if you found this video useful please like and subscribe that helps out on YouTube and if you are at the beginning of your Bubble journey there is nothing better than you can do then head to our website planet no code dot com and join our no code that builder developer community and become a member and get access to hundreds of our Bubble tutorial videos just like this one.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.