Beginners Guide to Bubble.io Workflows

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.