In-Depth Bubble.io Tutorial: How to Build ANY Type of App Without Code on Bubble

hi everyone today I'm going to show you how to build any type of application you want using a platform called bubble IES bubble is amazing it's very powerful it lets you build practically any app without having to code you don't have to know how to code how to program anything I'm going to show you how it works show you some examples and you can see what it's possible on this platform so let's get started bubble lets you connect three parts of an application there's the front end so everything that your users your app visitors will see the design of everything how it looks things like that with the backend which is usually your database so anytime you need to save information to your application it will be going into a database that is specifically for your app and I'll talk more about that in a moment and you can connect those to the front end the front end with the back end using something called workflows this is basically how you tell bubble to make things happen in your application so I'm going to show you a quick example here I am currently in an app editor this is I've actually built my own website using bubble and you can see here this is the home page and I have some text here I have an image I've got some more logos and stuff more text and all of this I built using drag-and-drop functionality I didn't have to code anything about where it was going to be positioned or anything like that I literally just selected an element from the left over here there's a whole list of things you can add to your pages dropped it on this canvas here and it's complete you know put it wherever you want what you see is what you get and if you go over to my actual site so this would be the URL my visitors would come to and what they see is exactly how I've designed it so here are some testimonials there if I scroll down a little bit more in the editor you can see there are the testimonials so everything appears just as I've designed it in the editor so this is that front-end piece now the a back-end piece would be that database that I was talking about so you can see on the left here these are the different parts of your application that you can work with these first three are those really the main three the front-end design the backend database and then you connect them using workflows so the database is where you can custom build how you want to save any information you want so one really easy example is I have a blog that I built on my site using bubble again without any code so I've created a you know data category to custom save my blog posts exactly how I want so I can determine alright I want to be able to save obviously the body of the blog post you know an featured image some eye comments that people make on the blog post here a lot of other things the title subtitle tags I have the scheduled date that I want it to be published so this is all stuff that I wanted for my blog post so that they could work they could be displayed and show exactly how I want so I created all of these fields specifically for my needs if I go over into this other tab here I can actually view all of the records it works very much like a spreadsheet actually where I can view all of my blog posts that have been added to my application here so I can see some of the fields but I can open this up further and see everything a little bit more detail here these are all the fields that I created custom for my blog post and this you can do with any type of application whether you're building a job board you know you can create data categories for the applications for the companies that are hiring for in the posts themselves if you're building say you're building an e-commerce store here are actually I've got some examples here to show you what kinds of application you can actually build using this custom structure where you can really build out your own database you can design whatever you want and I'll talk about workflows in a moment but here are some examples so asana is a really popular product project management application and they present you know lists of - dues tasks in this board style format so you can absolutely design an application exactly like this where it has these little cards you have a picture of you know individual team members you've got due dates and you section them off by you know the stages that these things are in you can actually completely replicate what you see here here's another view of asana viewing the list not in that kind of card format but more of a traditionalist you've got the check marks to mark them as complete you also have they have a calendar feature you can custom build calendars like this where things are color-coded you've got the titles of everything they span multiple days so this is something that you can absolutely build on bubble another example is a popular social social media tool Pinterest so viewing things like this where you've got these different images kind of like a collage here and then clicking into something let's choose one of these here you get extra details about that one image you can have a commenting system you can have a share system where you generate share links you can have the ability to save specific items to you know the the person who's viewing it like as their favorites or bookmarks things like that you can show you know related items when you're viewing the detail page of something this is all functionality you can create Pinterest has a powerful search as well and obviously social media features like friending people connecting to other people sending them messages things like that getting notifications all of this stuff you and you on bubble one final example here quick is Etsy which is a popular e-commerce type of site where individuals can create their own stores and so whatever it is they want usually it's like crafts and things like that that they're these makers are creating so Etsy has a very powerful search feature too because they've they've got a lot of different types of stores and people categorize their things and there's lots of different categories that you can search through but you know we're here looking at this one product you can do things like this with photo slideshows and viewing you know pictures a lot bigger and scrolling through them you can integrate with payment gateways and create shopping carts and actually process transactions that's definitely possible on bubble as well and building out pages like this you know the description you can have a review system all of this is 100% possible on bubble so and let's let me show you real quick about the workflows because this is where you tell bubble how to function how to do things I'm going to go over to my contact page so this is a page where I you know give my visitors a few different ways to reach out to me and just kind of help them find stuff that they need and there is a contact form at the very bottom here to send me an email so for example all the visitor needs to do is fill out their name their email their their message to me and these are little inputs here where they can type into it and then I give them a button so when they click the button by going to workflows here then I have bubble performing specific tasks the way that bubble works is with a logic of if this then that so if something happens then something else happens or then multiple things happen as you can see here so if this button send message is clicked then I want to send an email I want to reset the inputs which means it just kind of clears it out and then I want to show a little confirmation message everything you can see here there was no coding required all visual programming in plain English I told bubble exactly what to do and this is a very simple example but you can get really complex and do much more elaborate and really sophisticated things with these workflows this is this section is called the work flow section each one of these are different workflows so you can see I actually have a few other buttons on the page so depending on what they click other workflows will trigger okay so again bubble is visual programming it lets you drag and drop all of your design elements you don't have to code or program anything about the way your pages look in your application as far as the workflows go in other words what happens in your app everything is in plain English it's in an if this than that type of logic you do not need to know how to code to to do to build an app you can do everything completely without coding of course you can add in extra functionality more advanced features that might have a coding involved that certainly possible bubble is in limiting you to you know doing non coded things if you want to integrate with other advanced features you certainly can do that too but in general whoops yeah and go back here in general you can build entire databases full front-end designs and connect to outside services as well without having to code so the outside service here's an example where I have my visitors they can subscribe to the my email list and I use a specific emailing software called convertkit and that's where I manage all of my emails and you know that's where if anybody's subscribing that's where it all gets organized so people who click on this button this will trigger a different workflow and we'll see here so when this is clicked then I actually have actions specific to that service the convertkit service so this is actually communicating with something that is outside of my application it's as if I'm communicating with Facebook or Google or just some external thing you can do that in bubble you can have bubble communicate with other services and really create powerful tools within your application and not only that but custom tools specifically for what you need alright so how is building any type of application on on bubble-like with from scratch with custom logic stuff that you build from a blank canvas how is that any different from using a template if you're not familiar with bubble there is a template marketplace where you can purchase and I think some of them are free too but you can get templates to use too as a kind of a jumping point to start with your applications so you don't have to build everything completely from scratch uh there there's there's a trade-off when you're using templates versus building from scratch so with the template you are automatically kind of boxed in to the features that the template has now of course you can adjust them you can change them you can add to them you can remove stuff but that could be extra work more work than you need there might be features that you really just don't need at all that the template provides that you have to spend time removing or just changing also the template might not have everything you need you know if you're building an app for yourself that is custom to your idea and in theory you know this your idea is brand-new and you know you're doing something that's your offer something new right templates not gonna have exactly what you want to build otherwise you know you could just use the template for everything but it's most likely that you're gonna want to customize it so you might need to add other stuff and there could be a point where you you may have to hire someone to help you change it customize it or you'll just have to learn how to customize it on your own whereas building an application from scratch number one you're building only what you need right from the beginning no wasted time having to remove stuff or adjust things so that it works for you you can from the very start build exactly what you need having said that and and I usually prefer to build from scratch but having said that templates can be awesome tools for learning you know everything is already built there and you can study how things were designed how things were programmed in the workflows area and see how things work to just kind of get comfortable with what's possible and the different things you can do if you just need a little bit of help and need some kind of examples but and so it's a great learning tool but I really do think that building from scratch is going to be better in the end so when you're building an application on bubble there are some core features and functionality that you need to know and what I'm going to go over today is show you the features and functionality that nearly every single type of app doesn't matter what kind of app you're building will have so knowing how to do these things will get you really really far because these are like the core concepts that will be the base of practically any type of feature that you want to build into your applications so that you can from there customize so this is these are these are features that most apps will have some examples that we're going to go through our user registration you know signing people up working with your database so knowing how to save things to your application how to edit them and how to search your database so for example like the example with Etsy if I wanted to go on there and find a very specific type of product I can use a search bar to type in a keyword and then have the page show me relevant results for my database want to always see just everything from the database I want to show a filtered list so that's something that that applies to just practically anything anytime you're working with lists of anything and then in general just how do you display information that is saved in your database how do you actually show something on the page you know when a user has typed in a search term you know in a little search bar there and a few other things we'll also touch on so these are these are the core types of features that are really going to be the foundation for building an application I'm just going to show you just general structures that are required to build an application so you can start to get comfortable with it alright so let's start with the first one we're going to talk about user registration if you are building an application where your users need to sign up so that they have a user account that way you can have you can save things specifically for those people like their first name their last name their email address maybe a profile picture or something like that then you want to you're going to need to build some kind of a user registration system and bubble has bubble actually makes it very easy to sign users up at like a minimal level so we're gonna go through how to sign up a user we're going to create a simple email form or it's a it's a simple like registration form with an email address password a place to confirm your password and I'll show you that you can you know add in whatever custom things you want and then a button to kick it all off and trigger that workflow so I'm going to switch over to my other app here so this is a blank app here so you can see on my page total blank canvas nothing going on I haven't designed anything yet and also if I switch over to my database you can see here I don't have any other custom types the only data type and again this is like the category of your data I don't have anything other than the user type this is actually a built-in type that bubble gives you because bubble assumes that most apps will be signing up users to the application so for my user type here bubble also has a built-in email feel so I know that I can already automatically save email addresses if I want to create a new field like first name so that I can save names to each user and I will say I will tell bubble hey I'm creating a new field it's going to be called first name and this is going to be a text okay so again you're telling bubble exactly what you want to happen so everything is being custom defined by me here the app builder and I'll do another one for last name and we'll do one for let's see date of birth you can also do so for date of birth I'll set this to a date value but you could do like profile picture which would be an image value if you wanted to do an address then you have an address type there are lots of different options all right so this is a simple info that I want to collect whenever my users sign up so I'll go back to my design page and here's what we'll do I'm going to design a very simple form so that users can sign up let's see let's first I'm going to add a text element so I'm going to select text over here I'm just clicking on it and dragging it on the page and I immediately have a text element here when I double-click on it it pulls up this really great little tool here which is the property editor this is where I can customize the way any of my elements look so for example with the text element I can change what the text actually is so I can say sign up to my app okay now this is pretty small so I want to change maybe make it a little bit bigger Center it a little bit so I'm going to remove this preset style that bubble has applied to it and give it my own styling just gonna scroll down to see these options so you can see here all the formatting options I'm going to Center it and click over here make it a little bit bigger and let's fold cool so now I'm going to right click and I'm going to Center this text horizontally on the page you can see there are so many options available to me to help me design and align everything that I'm placing on on this page here so there's my text just kind of as a title for the user to see so now I want to build my form I'm going to use some inputs so this type of element will actually allow the user to type into it and then in the workflows I can use whatever they type in there as something to save to my database so again I'm going to click on this input I'm just going to drag it on the page about that big that wide if I want to change the sizing I can always modify that like that ok so again if I double click on this input here I get the property editor and I get different types of options so depending on what the element is I'm going to have different types of properties that I can edit so this I'm just going to change the placeholder so that the user knows what they need to be typing in here I'm going to change it to email address and the content format this is basically telling bubble hey what is being typed in here is it a decimal so that bubble knows this is a number that we can do math with is it an address so that bubble knows to you know find a matching like zip code and and we can you know if it's an address we can later do other address things with it like extracting the city or the state whatever it might be anyway so there are multiple types of formats here email and password have their own specific type because registering a user is part of a built in credential system that bubble has so we're going to very specifically say email even though dress is also a text and then I'm going to copy this it's gonna right-click this input copy right click paste there are also tons of keyboard shortcuts to do that I can also like hold shift down or what is it control Yap control and clicking away also gives me another duplicate of that so bubble really makes things very very flexible for you to work through your designs and your builds very quickly and efficiently so the second input is going to be my password okay so I'll change the content format to password and then this third one is going to be the confirm password so that we know that the user isn't making a mistake so we'll give them two fields there and then I'm going to do a first name and a last name because I have those extra fields first name this will be a text and this will be the last name as you can see how quickly this form is getting built here we're gonna do the date of birth birth let's say you know you're building an application that should only be accessible to people over the age of 13 then using the date of birth will allow you to check that so I'm gonna change this type to date so that bubble can see that this is a date and I'm gonna add finally a button element here it's at the very top of my list and do that at the very bottom okay so this will say sign up oh and if I wanted this button to look a little bit differently I can either choose from a couple of bubbles preset styles here so you know there's like danger it's all red like that or I can remove the style and change it myself make it green something a little bit more pleasant and I can actually create other styles of my own which is really really because then it allows you to build a consistent looking application once you've created styles you can start applying them to everything else going forward but also just you know gives you more control over your palette in your application okay so I have my little form here so now and in the backend I have these fields that are ready to accept those type of values in my app data tab over here so this is where I construct it under app data I can see the actual user records that have been created so you can see here I have six already with their email addresses now they were created before I added these other fields so we're not going to see those there right now but I'm about to create some with these new fields and we'll see them get added to my actual database here so the thing to do is to connect them with a workflow so I'm actually let me go back to the design open up the property editor of this button and I can very quickly begin a workflow from this button when the button is clicked by clicking here start edit workflow okay so when this button is clicked then I will sign up the user now here is a huge section I'm only going to show you you know a couple actions just throughout this tutorial here but you can see that bubble lets you do a lot of things in your application and the more elements that are on your page the more plugins you might have installed into your application bubble does have a whole plugin marketplace more actions will become available depending on what it is it'll only show you what you can do with what you have on your page but you can see that there's a whole bunch of stuff so under the account list there's a lot of things I can do with user accounts I can assign temporary passwords I can send a password reset email I can update their email or password I can log the user out I can sign them up with a social network so I can have people actually signing up to my using their Facebook credentials or some other social network we're gonna use right now of the very basic sign the user up option here so I'll click on that and here's my first step right again no programming I just selected from this list of plain English actions here now bubble will tell me exactly what it needs if any if anything to run this action so for this particular action it's requiring an email address and a password and I can see actually up here so you can see that this is highlighted in red but up here too we have two issues that showed up this is the issue checker I'll talk about this in a little bit but basically this lets you see any problems that might be going on in your app at that moment if there's stuff that hasn't been filled out properly it'll help you so email address so how do I say hey bubble take whatever was typed into this input and store it in here so that we can save the user with that email well I'll click on this and I immediately have a list of options basically bubble is saying all right where can we find that email address we need an email here where can we find it I can say hey there is an input on my page and I've labeled it so I can find it very easily and I'm going to click on that and I'm gonna take the value of this input okay so now I've created what's called a dynamic expression because I can't anticipate me as the app builder what people's email addresses are going to be so I'm gonna allow the input to be the value here for this field anything that's typed in there is gonna be what I want to go in to this set up here same thing for the password I will put the input passwords value into this this setting and then I do want to require password confirmation so I'm going to check that box and then here bubbles says okay where's the confirmation input or where's the confirmation value and I'll go to that input and insert that there all right I have other options too like I can have bubble remember the email address so that when the user comes back it's going to be prefilled in there or I can send or and or I can send an email to confirm that email address so bubble will send an email to this email address with a link that the user will have to click on and when they click on the link bubble will mark them as confirmed and you can use that status in other in other ways so for example they could be they might not be able to access a page if they haven't yet confirmed their email address that you just might you know you can limit features if they haven't confirmed I'm going to leave that unchecked for now but just a simple workflow to sign up a user with this information so now what about our other fields so we also have first name last name and date of birth okay so I'm going to go to the same sign up action and I have an option here to change other fields so let's click on that so now bubbles saying all right which field do you want to update here I'm going to do all three so we'll do date of birth I'm going to change another field first name and then last name okay and again I have to provide it with the actual value to save these to these fields so date of birth will be that input right there first name you can see here by the way you can see that there are these blue flags that basically allow you to choose between typing in something like a static value so I could type in Maria like that and that just means that anytime someone signs up their first name is always gonna be Maria because I'm typing in a static value here but I don't want that to happen you might want this for other scenarios this is definitely something that you'll use another place is the static value but in this case everything is going to be dynamic so dynamic data here will be the first name and then last name will be the last names field and an example of when you would use a static value is maybe you've got a feel called let's see user type and either someone is an administrator or someone is a customer and let's say that in your workflow anyone who signs up is always going to be a customer so I'm gonna add another field here if I go to like this is a shortcut to create a new field and we'll do type and this will be just a regular text type here so I because I'm billing in a specific way and I know that only my customers will be signing up and anybody else like an admin person maybe I create them manually in the backend here because in the database I can create manual records if I wanted to here's my user form for that so knowing that only customers will be using the front-end form I can type in a static value of customer and I don't have to do anything dynamic they don't have to select anything they don't have to you know choose whether they are a customer or an admin I just know that anyone using this form will be customers so this is where a static value will go because it'll always be the same that's just a quick example but to show you the difference that you can type in here and for insert dynamic values so let's preview this so that you can see this working here and once you get really comfortable with building stuff and connecting it to your database this will move so much faster I mean normally when you when you become comfortable this can happen in like two minutes you know you create your fields in your database you you know slap the elements onto the page and you program the workflow and you're done of course everything from there might be might take more time to get the design just right if you ever need to modify it later because now you're adding features certainly this thing will evolve but we can build this signup form very very quickly so my form I'm on the preview of the page so this is actually what my users would see and let's fill it out so let's do Gabi test comm we'll do a password of test and firm test Gabi Romane and we'll do a date of birth not my actual one but let's just do something there all right so I'm gonna sign up and see how when I'm hovering over this button it's changing color I'm gonna talk about how you make that happen if you see that happening and you don't want it to happen how you can adjust that so I will click we can see it working a little bit there's a password it's not valid let's see test and test setting up password is not valid let's check our work flow I probably did something wrong so password is password format confirm is also that one let's go back to here oh I might have a password policy yes x2 so this is a test application where I've previously set up a password policy this is actually important to cover so bubble does give you a lot of really great security features one of them is you have to defeat you can define a password policy and say hey you are requiring certain criteria so my password policy was set to 6 characters I have to have a number a capital letter so that's why I'm getting that error so I'm gonna actually turn this off so that there is no policy and we will refresh and try it again and there there are other security features that let you prevent access or or have to follow a specific flow I mean you really can't customize a lot here so we'll do this one more time Gabi a test test test Amy okay now we sign up okay that that's just a browser extension okay so it went through and if I go into my database and I will refresh my user table here so I can see there is Gabi let me click that yeah there we go so now we've refresh with our actual fields so I can see all of the values that I typed in were saved properly customer type first and last name my date of birth and my email address right so this is something this concept of designing uniform with inputs and then creating the fields in the backend here so that you can anticipate different values and also organizing them in the way that you want and then connecting the two with a workflow so that it pulls in and maps them to the specific areas in your database this is the bread and butter of bubble this is how your app gets built and how it runs from here it's just a matter of knowing you know what inputs to offer how to make the experience clear for your users and the design what actions are most appropriate for you what you want to do not all of your actions are going to be all about creating things in your database it might be modifying things it might be showing an alert message on the page it might be sending an email might be performing some calculation there's a lot of different things to do but at its core it's if this then that in every single way so this was a look at user registration obviously a lot more that you can do here but this is something that most apps are going to need so you know how to get started there all right great now let's talk about dynamic pages so a dynamic page is something that will display different information from your application but it's always going to be in the same design the same layout let me show you some examples here on Airbnb which is a marketplace for booking apartments and homes you know if you're visiting somewhere you can a place to stay so here is the search result list for homes in New York now if I go over to this location here this room I can see that I am looking at the info for one specific apartment ok so I have all these like amenities the checkout form here with the specific dates I can see reviews for this particular place and then all of the photos but take a look at the URL up here it's airbnb.com forward slash rooms forward slash some ID number now this is the ID for this particular apartment now if I go back to Airbnb and click on another one here so this is another one and you can see that it's again reppin be calm for its life rooms and then some other ID number now both of these pages are actually the same page it's the same page on the the page is called rooms but when you append an ID to this Airbnb knows to go retrieve the specific information for this one apartment and loaded in bubble art bubble Airbnb does not have a separate page for every single one of their listings there'd be thousands and thousands of pages right so let's look at another example here indeed is a job board I'm just on some category here architecture and engineering so if I go over to this job posting I can see indeed calm and I have you know the the the structure of their URL and if I go to another one let's do this one here okay so you can see how there's CMP and CMP that's this that's the page that these postings are are being displayed on but obviously the content is very different because they're different posts indeed does not have separate page for every single one of its job posts again there are thousands of them these are dynamic pages we are being led to the same page but by clicking on for example this one versus this one indeed knows to send this record this job post data over to that dynamic page the same thing for like product on I mean this is everywhere on on the internet anytime you have like a detail page this is the system that's going to be used so here producthunt is a site that lets you find up-and-coming products on the internet people can vote them what they like best they can comment on them usually can get like early access to things very cool stuff that you can find on here so I have already clicked into the detail page of this one product here and I can see that the main the actual dynamic page is a page called pose but then here is the unique ID for this particular product if I go back and click on some other one I can see again posts and maize so another common example that you'll find is user profiles if you are on a type of application and say a social network like Facebook and you go into to see your friends profile you're viewing a dynamic profile page and loading in that specific person's information so bubble actually has a system to create dynamic pages where you can do these dynamic detail pages and not have to actually create multiple pages for the exact same thing so I'm going to go over to my editor here let me close all of this to show you how this works so if I click on the upper left here you can see that I have this is my page list I have a few pages this is just kind of like a temporary application so they're kind of random but what I would do to create a dynamic user profile page is create a specific page just for profile but it's just that one I do not have to create a page for user a and then a separate page for user B and then a separate for users C I create one page here I'm going to show you how to do this so let me go over to let's say I'm going to create first a certain page okay now I will get into how I'm building this a little bit more specifically in in a few moments but for for the for this example I'm just going to real quick build a list here so that I can see all of my available users because from there I want to select one and then go to their profile page right so right here I'm using an element that lets me display a list it's called the repeating group so I want to display a list of users and my source is I'm going to use another dynamic expression here to have bubble find all of my users in my database so the expression is to do a search for users it's the only data type I have so if I had other things like search for job posts or search for invoices you know these would be categories that I would create separately in my database database if I had those in here than it would offer that as an option but I don't have them right now so search for users and then let's have a text element inside of this repeating group you can see how it repeats there it's going to show up for every user in this list and then this text I'll want it to display some dynamic info because I wanted to show different items for every user for example the current cells users email address all right so then I can add a button here and this button will say you profile 8.now when I click on this button well actually let me just show you what this looks like at this stage before I even move forward okay so here is my list of users you can see how it dynamically changed every email because every cell represents a different every M every row here represents a different user and because I set the the text here to be a dynamic expression to show the current cells users email it's gonna be different for every cell okay so now I have this button and I want it to take me to the profile page let's go look at my profile page and see if I'm gonna redo this or yeah this is this was used in a previous tutorial so I'm gonna remove it and I'm gonna create a new one so that you can watch me do this from scratch so I'm gonna create a new page again called profile you can also clone pages from other ones that already exist I'm going to create a blank one so here's my blank profile page so from my search page there with my list I want to click that button and be taken to that user's profile they're all going to be taken to profile but we're gonna send data to this page for that specific user so the first thing I need to do before I can do that is this page profile needs to be defined as a user page it's basically telling bubble what kind of data are we sending here is it a company is it an invoice is it a notification is it any other type of data it's got to be one if you're going to pass data to it so I'm going to select user again if you had other data types they would all show there as an option I'm gonna select user here so now on this page I can pull information about that user that was sent to it as an example I'm gonna add a text here we're gonna make it real big so I'm going to change the style so that it's a big title here okay then we're going to Center that all right so this tag the dynamic expression is going to be the current page users email okay now if you noticed there was another option for current user that is different and I'm actually happy that I'm using user as an example here because it'll be more obvious if you're creating a dynamic page for anything other than a user like a job post or a company or something like a company detail page but the difference here is the current user refers to the logged in person the person who's actually engaging with the page so if I'm clicking around and I want to view other people's profiles I am considered the current user right the visitor of the page the current page user is referring to the person whose page this is about and the content that we're reading is about that specific person okay so hopefully that makes sense the difference between the two if if you're working with any other type like if this was a job post detail page then you would still see current user because that's just referring to the logged in person but then you would see current page job post ok because that's the type of dynamic data that is being passed to this page so I'm going to leave it on current pages users email alright so now we have our profile page setup ready to receive and display that information and on our search page we have our list to choose from ready to take an action so how do we connect it to with the workflow that's usually going to be your connecting piece so from my view profile button I'm going to click on the start edit workflow here so that bubble can get me started when this button is clicked then I want something to happen what do I want to happen first I want the current user the login user actually the current user doesn't have to be the logged in user by the way it can also be a know logged out user current user really just refers to the the visitor of the page whether they are logged in or logged out they or it's it's their session their user session okay so anyways when that button is clicked we want to navigate this user to another page so I'll go to the navigation actions select go to page and the destination will be my profile page okay we're going from search to profile now bubble says hey you have set up the profile page to receive user data whose user data do you want to send to this page this is where I select the current cells user okay so if I click in cell 1 it's going to pass the user cell 1 over to that page if I click in cell 3 it'll select or it'll send cell threes user over so I will show you what happens let me fresh the page so if I click in here few profile for Phoebe the user Phoebe and you'll see we're going to be taken over to the profile page and look at that Phoebe's email is up here ok you can also see that her unique ID this is a an ID that bubble actually generates for every single record in your data pace forgot your database regardless of what type they are whether it's a company an invoice a job post you know shopping cart order line item whatever it might be everything gets a unique ID which is very helpful because you can use that in other areas to like help filter things so if I go back to my previous page and click on Monica's button I am taken again to the same page but here is Monica's email so I didn't have to create two separate pages for each so the purpose of the dynamic page is so that you can actually design this whole profile page or detail page however you want to see it to have it kind of like a template sort of for yourself so you design it so that the pictures always over here in the corner the name the title is always up at the top stuff below is always centered and they're displayed in a certain way but the data itself will fill in all of those elements dynamic based on the information that you send to the page so hopefully that makes sense it's a very very popular feature and concept that you'll want to understand early on when you're building an app on bubble-butt it allows you to build any kind of thing where you have a large database of items that all need to be displayed in the same way all right so that's our dynamic pages now let's talk a little bit more about the database okay so the database is where you save stuff so up until now you have we've been working with users so anytime your users signup to the application you are creating user records if you're building a let's say you're building a project management application then you could create other data types such as projects tasks activity like if you wanted to do like an activity feed anytime something happens or changes you could create a data type to log all of those changes notifications you could create a data type for clients if you're building a project management app where you manage multiple clients so everything gets its own table and the best way really is to compare it to a spreadsheet if you're not totally comfortable or you don't really have much experience building databases or working with databases in general hopefully you're familiar somewhat with spreadsheets because they work very very similarly and I'm gonna show you kind of how to translate a spreadsheet / - how bubble organizes everything now the database why do you even need it this is where you save everything so if you have anything that's dynamic and usually if you're building an application you are going to have dynamic information then that needs to be stored to your applications database so that when your users are then engaging and using the app bubble can know to go retrieve that data and then display it on the page and the database is really really powerful very flexible feature that lets you custom structure your database however you want it's so it's so blank canvas and it can be a little overwhelming because you don't really know where to start but the the trade-off is really that you can do whatever you want with it and I would suggest to start small start with what you know you need as you start to build your application more you might go back to it and adjust things bubble is super flexible in that way so let me show you here if we were to do an example job board application I'll show you what kinds of data types I would create for the job board so the first one would be company this is the hiring company and actually let's call it that hiring company is my type okay and within the hiring company I want to be able to store the company's name which is a text maybe their headquarters which could be a an address will do headquarters location okay we can do a logo for the company logo this would be an image okay I can maybe filter my companies by whether they're active or not perhaps my companies are paying a subscription to use the application so I can keep my active subscriptions apart from my non active my inactive subscriptions with this field here called active which would be a yes/no so either they are or they aren't so that would be another field there and maybe I can do the CEO of the company or just the manager of the company within my application now this field I don't want it to be a text I don't want it to just be the name of the CEO I want it to actually be linked to a user in my database so I'm actually connecting one record of one type with another record of another type this is the very very beginnings of creating a relation ship are a relational database if you're at all familiar with databases but it's just creating links between records and there's lots of ways to do this this here if I do you can see if I have a field that is a link to one other user thing in my database then I've created a one to one relationship between one company and one user you can do one-to-many relationships as well I can have maybe a field for employees right which is also going to be linked to user records but multiple user records so I can check this box so that bubble knows that this will be a link to a list of users like that ok so every hiring company could have relationships with multiple user records it can also have a relationship with one user record that is different or maybe one of the same here but it split out into its own field to identify the CEO so ok so that's that's one data type now let's say we have another data type for job post so these are the actual wristing for the jobs that are available that the companies are posting so we'll do this real quick here so this will be the title of the position which will be a text we can view another field for start date when the position begins this would be a date let's see if we had a category which would be a text you know a way to fill so that you jobseekers can filter posts by whatever category is like here's an example that indeed has let's see if we go back one I think they had over here you can see like this viewing jobs by specific categories now technically what I would do I'm kind of showing you a very stripped down database structure here but what I would do with categories is I actually create a separate category type so that I can store all of my possible categories in its own table and then each job post could be linked to one of those category records but it's fine if this is text to so many different ways to do the same thing some are more efficient than others but just to show you an example there so that's just kind of the beginnings of one you would maybe have a description field location field four where the position is you could have a minimum requirements what the salary is all that stuff basically everything that you see here and more I mean this is obviously one job boards a way of doing things but they have you know all of this information dynamically for the position you have the job type whether it's full-time or part-time minimum requirements for education and experience all of that so you could build that in here another type I would create is the application type so anytime a seeker job seeker wants to apply to a post we would create an application because the application will store data and information that is unique to that job seeker which would be a user and a job posting right it's a unique relationship that combine that references both things but then has its own details related to the application for example the status of the application is it so pending is it are they in interviews were they accepted were they rejected we can have the you know the interview interview date we wanted that they pair of so this application we would definitely want to have links to their company or sorry the post post one is messaging and LinkedIn job post here would be linked to job post and then the applicant would be linked to a user now you might be inclined to also create a field for the company which you could you can absolutely do that but because the job post already has it would job post needs to have a field for the company let me add okay so so that we can keep job posts organized by companies we know which one they belong to obviously so if we're at the application level here and because we already have a link to the job post we will kind of by default already know that what company this is for because the job post has a link to the company when I talk about in a moment displaying this data I'll show you that we can actually display an applications company the related company through the job post but that doesn't mean that you can't also create a field for the company as well some people might say that is a little bit redundant in some cases it actually might be helpful to have that redundant field to help bubble with searches and filtering through your records again it completely depends on what you're building I'm just kind of showing you the different options to show you how flexible it is so that you can really build any type of data structure you need for any type of app so these are just some examples of data types that I would start out with when I'm building a job board app on bubble you might come back as your building and create other ones that might be necessary and or adjust the ones that you started out building but this could certainly grow or it could stay small now I'm going to just show you real quick I'm going to compare this to a spreadsheet and how this kind of translates over them you can kind of see here that the fields I created are the columns of my spreadsheet right and every single row is a different record right now I'm gonna switch over to a Google sheet real quick just to show you too in case you're you're still not totally seeing it all right so I'm loading up this spreadsheet here so here let's say we move this over well it kind of copied me I'm not really sure how that happened let's move it okay so I'm going to just try to update the yeah well let me move this let's do this my little recorder is kind of having trouble here well I'm gonna just copy over some fields so that you can see first name last name email okay so this entire sheet here is for the user table only what I wanted to do is create another sheet within this overall spreadsheet so I have a completely separate table let's see if I can do that from here probably not that's okay and it would have its own columns with its own record so there's separate tables but they're in my same overall spreadsheet which in bubble would just be your same overall database and you can kind of see like here when I switch between all of them the different fields are changing because these are for the different data types and I have my user records under here but I don't have anything under these yet because I haven't created them but I could go ahead and manually create a company let's make it active we'll do your your and bubble should auto when it when the field is a geographic address it'll kind of auto find addresses for you the name could be sample company and the CEO let's see if it is doing it by email yes it is so I could search and find the CEO so if I create a company record there so here's my first company I didn't update a logo or upload a logo or add any employees but I could let's do Monica will add her Chandler right so there's two employees there okay and so I have this company record getting started there okay but this is the company table and this is the user table they're separate hopefully this is starting to translate over when you start building your data structure it's totally custom okay so that's that's how that works my comparison to the spreadsheet didn't really work out too well but that's okay and this is basically one of the core core features of your application you certainly want to get comfortable with that but it really allows you to manipulate your data in lots of different ways now displaying data so now that you've saved your information to the database how do you spit it back out so that users of your application can actually see stuff so I've actually started showing you that already a little bit with the dynamic expressions when we created the dynamic profile page but just to give you a couple more examples in the real world of what this means Google here this is sorry about that this is a detail page for a company that again it's this it's the same structure regardless of what company it is you can see in the URL up here the actual page it's company but I have a logo I have the name all of this stuff is displaying dynamically also up in the top here in my menu because I'm logged in as a specific user LinkedIn is going to display my picture and my name in my title here if somebody else was logged in it would show their information you can you see this in any time you need a login somewhere to some account you're gonna see dynamic expressions everywhere and in bubble you can do the same thing so I've already shown you a little bit here with this profile now if I wanted to display I'm going to move this down a little bit the same type of thing to show like my picture and my name or just my email address in the corner let's say I wanted to build I'm gonna create a group up here in the top like a little header to my page so this will be we'll just make it some color like that and then I'm going to add another texts to inside of the group the group element is also very powerful it lets you move things around as a group of things but it also has a lot of really powerful data properties too so a dynamic expression let me make this white here there we go dynamic expression I could use here would be for example current users email address like this is my email address the person who's logged in I can have it in the corner there so that they could always see what they are logged in under you know maybe this is something if you're you know if you've ever visited applications on public computers sometimes people will stay logged in to their accounts accidentally and so this is a nice way to make sure that the user can confirm they are viewing their own account or family members you know things like that so here I'm displaying the current users email address and just for fun I'm going to display some other pieces of dynamic info such as the current date and time you have a lot of different options that are not necessarily related to your database but just kind of in general about your browser about the current page that they're on things like the width and the page URL so let me go to current date and time and we'll preview this page so that you can see what this looks like okay so here's the current date time when I'm recording this right now that's the timestamp and there's my email address I'm currently logged in as this user remember a little while ago I signed up as this user and bubble will automatically log you in after you've signed up so that's why we're seeing that email address there now here's where I can also show you the difference between current user and current page user I'm going to copy this actually this entire group and I'm going to go back over to my profile page and paste that in there I'm going to leave that here alright so I have this same group on this page now so I'm going to refresh this then now remember I am logged in gabi at test comm if I click on Ross's profile and take us over to his profile page you can see here this is his dynamic page with his info but I am still Gavea test comm up here this is the current user this is the difference between the logged in person and whatever dynamic information is on this page so you can see that they're different like that okay so the dynamic expressions is is there's so much to do there's so many options that are available for you and whenever you see this blue flag here you'll have a list of available options to you and it really depends on what's available on the page and what's available in the database and also what's compatible with the element so for example I am in a text element here I'm only going to be able to insert expressions that are a text value whereas if I use like an image element here let me turn on these borders so that you can see my elements I don't have any text here right now let's do hello this is a static value there so my image element I can insert a dynamic image I can also insert a static image so that it's always the same but a dynamic maybe it is the current users profile picture which I do not have one so it's not going to offer me that option but if I had if I typed in you know or if I entered first name well actually the dynamic image is actually looking for a URL to an image so this is probably not the great example I'm trying to show you a incompatible type let's do another example with the map that'll probably be a good one here because the math is going to look for an address so if we did current users date of birth there we go bubble is saying hey a date is not an address it's gonna continue allowing me to modify this expression until it finds some address value because the date of birth will let you manipulate the date to become a number and you could sort of maybe get like a zip code out of that so it's sort of an option bubbles allowing you to start there but it's certainly not going to let you end that date of birth that's why we have this all in red right now so the dynamic expression is just in general it really depends on what's available around that element or in the workflows because then expressions go in there too so the most powerful let me remove this one of the more powerful expressions that you can use is searching your database so I showed you a little bit on the search page where we display a list of users I did a search of all my users that expression here to do a search for something and you can see now I can choose from any one of my dignity is probably the most powerful expression here because you can filter your search to show different results and modify it to show to show them like in an aggregated way for building reports I'll touch on that in a moment but creating expressions really takes a little bit of practice but it's so flexible it really allows you to build and display your data in an almost an infinite number of ways right so just wanted to touch on that let's go back to our program here okay so I can take you through some examples now for actually working with lists and how to filter so let's do we already talked about some of this stuff so let's do the job posts and filtering your list of job posts right so indeed com I kind of displayed some of those in pages there where you can see a list of jobs and click into them to view their dynamic page their sites that have this same structure any kind of like listing site so Airbnb will list homes that you search for by different filters like price location things like that Amazon is huge has so many different like categories and departments you can see here's an example where in the home and kitchen Department and I've clicked through to the Amazon home section I can go into one of these and it will continue to funnel me through all of the different categories because there's this I mean this is a massive site and all of this is being pulled from the massive database that Amazon is running off of but not only that it's you know showing me very customized filtered results because I as the user and requesting to view the data in a specific within specific lists to help me find what I'm looking for so we can do that in bubble as well let me go back to search page and I'll just move my users over here we're going to work with a different data type so I'm going to create some manual job post records so that we can filter very simply by category so let's do engineer and we'll do post a I'm gonna leave everything else blank but just so that we can see some of these come up we'll do post B I'll do another engineer Bob and we'll do two more post C marketing marketing that's a nice bother right and one more design okay so here are four post two of them have the same category this is a super simple example but and I mean you can really customize this and make this way more complex but just to show you how quickly you can put together a search feature is I have an input here to allow my users to type into it and I'm going to have a another repeating group where did it go up here again this element lets you view display back lists of things and this will be a list of job posts okay and the data source will be a search for job post where we'll add a constraint here now I was actually going to do category as my constraint but I'm going to show you that you can do any field also as a constraint so it searches everything okay so any field contains this is my constraint operator here and I have to say hey bubble only show me job posts where any field contains whatever they typed into this field so again this is going to be in a dynamic value because I cannot anticipate what the users are typing in so I want it to contain anything that was typed into this inputs value this is input a usually you want to label everything so you know exactly what it's for usually when you're building your application things will grow and grow and grow and you'll have lots of elements lots of inputs and text very important to stay organized by labeling things properly so let's look at this expression this list here is going to display any job posts where any field contains the value that was typed in there that's how we created our filter now I'm going to add a text to my cell so I can actually see information about the job post so here is going to be a dynamic value to display the current cells job posts title and I believe and their category like that okay so um let's do let's just mix this up a bit do another one called a really great job a putz I have a really let's do a really great design cuz I have one other post where the category is designed so I'm going to search the word design and I want to see both of these posts come up so we'll do so I'll do a different category let's go I don't know housing okay so I want to see this this one and this one come up when I search the word design because they're different categories and they're different titles now I might run into a case sensitivity issue in which case I will show you or I will tell you what to do in that scenario let's do go back to my search page okay so by default I see all of my posts there this is the title that and then this is the category by the way repeating groups don't always have to be the scroll you can do an O scroll you can do an infinite scroll where as you keep scrolling your actual page right now my page is not tall enough it'll just continue to load more and more items you also don't you're not restricted to one row you can actually create like a card system like this you can definitely this I would use a repeating group to create this exact feature here because you can have multiple columns so that each cell I mean it's still a separate item but your layout of your repeating group can be customized so if I type in design there we go we both got on there so it's not okay sensitive in this case the any field constraint I believe is not case-sensitive the other ones might be like if I did category equals this inputs value so this is a really quick search feature that we put together if I do engineer that there are my two posts that come up with engineer in the category if I do just the word post then I should have all of those except for that last one that I created where it was a really great job or something like that so very easy to like get something together super super quickly but again this is this the tip of the iceberg with how you can create powerful searches and search has not only happen in front-end elements like this you can also run searches in your workflows for example if you wanted to send an email to a list of people but a filtered list of people you would do that within your workflows you to to identify that specific list a lot of other things too so that's quick look at you know searching your database so many different features but a quick look at how that works now let's look at some of the actions a little bit more closely so your work flows again they work off of an if this then that logic and what you'll be doing the majority of the time is working with your database creating records in your database reading or just retrieving B so that you can display things out like current users email that's reading something from your database updating them so if say if the user wants to change their password or if the company wants to change their logo you would be updating records and of course deleting these are basic data functions and modifications this is something you absolutely will be doing at some point in your app no matter what type of application you're building so I've already shown you how to sign up a new user using that action sign up a new user which creates a user record but anything other than a user will actually use some other actions and I'm gonna demonstrate a couple different ways to create modify delete and read records so let's go to the profile page and I'm gonna do actually let's go back to the search page here this will be fun so I'm going to have another input up at the top here to create oh no those are users let's do a detail page for my job posts so I'm going to create a new page called post okay and again this page is going to be dynamic and the type of content will be job post right and I'm gonna have up at the top the job posts title and we'll make it really big here so that we can see the title okay and below this I'm gonna have some inputs so that let's say that this is a place to edit the post you know so I'll let me actually rename my page so that it is edit post again this structure what I'm building right now where I'm creating a separate page to edit is one way of doing things you could you can actually use the same page where you're displaying it to everybody as the Edit Page also you can actually disable in or you know create like an edit mode where when you're in edit mode maybe because you're the admin or the creator of the post inputs will become available but if you're not an edit mode or you're someone who does not have access to editing it they go away and you can't actually change it so you can have a page function as both I'm trying to keep it simple here so I'm actually creating a whole separate page just for editing so I'm gonna add an input to the page here and another input for this will be the post title and then below it will be the category just to keep things simple and we'll have a button to save save posts or we'll do update post to make it clear to you guys pretty close that this is to modify I'm just going to Center it because it will bother me if it's not a send period and then I will create another button to delete the post okay and then this button will be danger because we want to be careful with that all right so did you go back to my search page and I'm change the functionality of this input I'm gonna get rid of my constraint here okay so this input is now going to be used to create a new post very simple creation it's really just to quickly add something to the database so you can see how workflow is used to add things to the database that are not users because users are their own action so here is an input that is not being used anywhere now and I will rename it input new post title okay and this button create post okay so I'm gonna click on this button to start a workflow when this is clicked we're going to go to the data actions now to create a new thing okay the new thing is going to be new job post and I only have an input there for the title so I'm just going to save the title of course you would want to build out a full form with all the inputs for all of the other information and you know if you are in this context of building creating a new job post a lot of this stuff will already be known and not necessarily need fields for inputs for it so for example the company it'll be assumed that the person creating the post is creating for their company so the company could equal something like current users company if you have a field under the user to tie them to a company you don't necessarily have to have an input on the page for them to enter in their own company every single time and just a quick note there are built-in fields too for every single record bubble will always give you a creation date a modified date which is the last time the record was changed and the creator of the record those will be always tied to the record you don't have to create separate fields for that so the title is going to be the value of this input input new post titles value okay and then what I'm going to do right from here is well let's yeah I'll just leave that there I'm gonna this I will reset the inputs this is just a clear the input so it goes blank after I've created the post once I do that I'm going to see it appear in my list here okay and then I'm going to use the title as my trigger to go to the detail page that I've created the Edit post page okay so here I'm going to click on to start a workflow from clicking on that text notice how before I've been using buttons the whole time but here I text is clickable a lot of the visual elements are clickable and can trigger workflows not just buttons so when this is clicked I'm going to go to the Edit post page and the data to send will be the current cells job post so it works very much like the user profile system it's a dynamic page this is how it works under the edit post page well let's let me preview this so that I can kind of do this in stages here so you can see what I just did I'll close that all right so here are my posts so here is we'll do a sample post one two three create post and the bottom of my list there it is okay now you can see my cursor is changing because these texts are now clickable the categories are not we can actually change this so that when this is hovered the text will be underlined I'm actually gonna touch on that in a second so I'm gonna click on sample post and I am now being taken over to the Edit post page and I've loaded in this data great so that's creating that's the first thing now let us update the post so I have these two inputs here now what I want to see here is I want to be able to edit the post title and edit the post category so we'll do the title and category ideally you would want to fill in what's currently safe right now you can see these are blank but ideally I would want to see what's already saved for those so that's what this is here for initial content this is like the default if there's something saved will display it so for the title I'm going to insert as the initial content the current page job posts title and then the same thing for the category the current page job posts category cool now I will refresh the page so that you can see what that does now I've when I created the post I only had an input for the title so I don't actually have a category here you can see that it filled it in for me and I can't the since this is an input I can click to edit it now but simply you know doing that or typing in something else isn't actually going to change it I need to use a workflow to update it and I guess I'll say right now - there is an option to autosave so that when you type it it does change it a that is called Auto binding here there is a feature that lets you do that but I'm going to show you in a workflow because that is the more fundamental process so here's my button to update the post so when I start edit at workflow we're going to use another data action make change to thing it's called thing because bobble doesn't know what your custom data types are so make change to thing what thing are we changing I want to change the current page job post is the overall record for this page now I'm going to define my changes so if there's stuff that's saved that I do not want to modify I do not need to define them here all over again I only need to define what I'm changing so I want to change the title as well as the category because those are the two inputs that I have available on the page right now so the title will be the value of the title and the category will be updated to the value of the category okay now since right here let's add a little alert message to let me know that the workflow went through because if you click on this button that workflow happens in the background it updates your database you can't see that happening well actually we're going to see the title change up here but it's really a good idea to give your user really clear feedback that something has happened and that what they did you know went through so there's an element here called the alert and I'm just going to place it next to the button and I'll type in success right okay and then after my workflow this action the next action is going to be an element action to show that alert message and if I click on this you can see that it's there if I had other alerts then I would be able to choose from that list the way the alert message works is that it kind of fades in it holds for a little bit and then it fades out so by default it's not going to be visible when you first load the page so let's refresh and we will see this working so here is my title title and input I don't have a category yet so let's give it a category of design and we'll do another different title called updated post four five six it's all update and now you can see the title changed and my message showed if I go back to the database and refresh my data then I can see here is my updated post I'm going to change the title one more time changed again seven eight nine now notice before I hit update post this is the post at the very top we can see that was created by category design and created 1244 sorry modified 1248 because I just updated it now if I update we changed it again and I'm going to refresh here so that it gives me the latest you can see now my modify date is one minute later the title s change I've not created as another record I've modified the existing one okay so that's a quick look at making a change to something you really have to have a reference to what it is you're changing you can do this by doing current page whatever it is if this would if this button was in a repeating group it would give you the option to do to change current cells whatever it is you can also do a search for something in your database to go change something random and not you know connected to the page that you're on and it can be anything here you just have to go identify it specifically with your constraints so you know do a search for the user where the email address equals you know Phoebe test comm or whatever or entering some kind of a dynamic value there so it just depends on who gets updated and this this searching and constrained system will let you specifically identify which record in your database you want to update so very very powerful action there and again not searching lets you find whatever you need the delete function very simple there's a specific action for deleting a thing it's in the data list here delete thing you can also delete a list of things if you need notice that there's a separate action here for making a change to a list of things so this one would be you know make a change to one job post versus making a change to multiple job posts at the same so delete thing we can do pull this up come on bubble you can do it it looks like it got stuck there delete thing there we go okay well no it went away again my property editor went away probably need to refresh the editor so that it looks like it glitched a little bit so when I click on this button the thing that I want to delete is the current page job post now if I delete it you know I'm on this detail page for something that no longer exists I want to make sure that the user doesn't get stuck on a page that Kant doesn't have any data there it would just kind of be like a blank page so I want to make sure I navigate the user back to some other so I can add an action to go to back to that search page after they've deleted the job pose and we get rid of this okay so let's see that happen I'll refresh the page and we'll delete this post so it's gone and it's taking me back to search and you can see that is no longer in this list here okay so that's a quick look at the create read update delete functionality we've kind of done a little bit of everything over this whole tutorial so far but just kind of showing you that um you know manipulating your data can happen so many different ways and you can give your users the power to run these actions to make the changes to your application really make it interactive great so now let's talk about conditions conditions allow you to create kind of alternate behaviors so for example if the user is logged in and they are on a page then they can stay on the page if the user is logged out then maybe they're on a page that they're not supposed to be and if they're logged out they get redirected somewhere I'm going to show you quick that alone as an example of a conditional workflow so over here let's say when the page is loaded well bubble actually has specific ones for this one that I just talked about but I'm going to show you how to do it in a condition - there are specific ones for login and logout but let's say that you have a work flow event for that happens anytime the page is loaded and I want see this edit post page that we're on right now that's what we're creating it on I want to send the user back to the search page only when the job posts creator is not the current user right if I didn't create this job post I should not be on this edit post page so there's a condition on the action so as soon as the page is loaded and the current user is not the creator we need to kick them out if they happen to land on this page accidentally we don't want them to stay on the page so I'm gonna refresh the page here I was going to use a login logout example but really the point is to show you the value of conditions so if I go to posts see and all of these were all of these first ones I created manually so they have no Creator so it should kick me out so if I click on posts II and it's probably see how it took me back it didn't even get to the other page because there was another there was that redirect back over here as it's kind of more obvious example instead of going back to the search page let's take us back to the I don't know 404 page this is the page that that you don't necessarily need to create workflows for but anytime someone lands on a on a path in your URL it doesn't exist you will be automatically redirected to the 404 but for this example let's say I click on post a and it's not even going to get to the post edit page you can see that it took me to this 404 page which I have some other random things on here so that's number one that is a good example of how to protect pages that only specific people need to access but also to demonstrate an example of a condition okay now if I did create that specific job post then this condition would not pass and I would not get redirected and I would be allowed to stay on the page another example of conditions are can be found on elements well actually just real quick again with conditions in your workflows you can have conditions at the action level and also at the element or at the event level so the the actual trigger part of the workflow there's a condition here that if it doesn't get met none of the actions within it would run but you can also have conditional actions so that maybe someone runs someone in you know someone gets skipped and go to the next one so different options lots of different common come things that you can do through conditions and it's essentially you know when something is true then this action or this event will be allowed to run if it does not match if it does not meet the condition then it is not true and it will not run so the same thing you can do you can add conditions on elements there's a separate tab here in the property under the this is the one that I wanted to show you was if I create another condition here when this text so this element here is hovered then I want to change one of its properties I want to make it underlined okay so I will check this box you can see all of the different properties that can be changed it's usually appearance properties some properties have to do with behavior for example I can make the text not clickable but in my example we're gonna do an underline and I can also preview what the condition will be you can see there it gets underlined if I turn it off and on you can see the preview turn on if and on this is not an activate the condition it's just a preview for you so I'm gonna refresh my or I'm gonna go back to my search page and see here I'm under learning now it's a little bit more obvious that these are actually clickable when I hover over them you can do so many things with element conditions you can change the colors of things you know I can have the color of the entire row highlight in some color as I'm hovering over it to make it more obvious you can hide elements so for example if someone is logged out here's a good example for the log out when let me remove that let me group this input and this button together when I right click group these okay so now these are both in a group so I can put a condition on the group and say when the current user is logged out or in other words isn't logged in then maybe I want to hide the group because I don't want logged out people to be creating posts right so the property that I'm changing is its visibility property so it select that I will leave this unchecked because by default this group you can see here this element is visible on page load by default it is visible but once this condition is met then it's not going to be visible and it'll be hidden so I'm currently logged in as someone so I need to give myself a quick logout button I had a button to the left here out great so I'll start and it workflow on that button and I'm going to run the account action of log of the user out okay and I'll stay on the page I won't redirect anywhere I'm gonna refresh the page but just so you can see as soon as I log myself out that condition will kick in I will no longer see this group that contains this input and this button alright so here we go so click on this button and there it went away no I'm logged out you can also see that my email went away too because I'm not logged in it doesn't have an email address to pull to pull from I would probably also do something like you know change this button to a log in button or hide the logout button so that I can show a login button lots of different things so conditions very very powerful they let you create like lots of alternate paths and your workflows and also change the behavior of elements on your page so that you don't have to create you know like copies and copies of things for every single environment you can use conditions to change them super super helpful now grouping data this is a feature that I want to share with you because a lot of people who build apps on bubble are building tools for their own businesses and like custom custom ways to create reports different types of dashboards it's a really very powerful tool that lets you aggregate data so this is great for business applications anytime you want to have a chart of some kind this will let you perform calculations on your data so that you don't have to build out so much or or save so much extra information just to get you know a chart to work bubble will actually do some aggregation work for you in calculations for you so that you can see your data in in lots of different ways so here are a couple examples I'll just kind of read through them and talk through them and then I'm going to show you how you would use this function so I'm going to do an example of grouping a list of invoice records by their payment status so if you have a draft status paid or pending or overdue whatever it might be I will create a chart so that you can see that all of those records fill in this chart grouped by their status other ways you would use this just kind of different examples within apps let's talk about our job application app again you could group for the company a list of all applications by the submission dates that they can see Oh on this Monday January whatever we had 10 applications on the next Friday we had 20 applications just kind of as a way to monitor the you know incoming submissions things like that you can group by a number of different types of feel so it doesn't have to be like a text like a category name it can also be by date it can be by other things in your database so for example if we had an invoice type that was linked to a client which is maybe a user type or even a client type just on its own you can group these invoices by that custom type so it doesn't have to be a generic field and overall this is just a great way to display stats and stuff so let's do an example here actually because yeah let's do an example with the invoices I think that'll be easier so I'm going to create a new type called invoice and let's do amount I'm going to show you something that we can do in addition to grouping these things we can also perform some calculations so amount will be number and we'll do status which will be a text and let's just have those two you obviously add other things like who the invoice belongs to and descriptions and things like that but I'm going to go ahead and add a couple of invoices here let's just do one hundred paid and two hundred paid another hundred unpaid or we'll say draft 500 overdue 300 overdue feel free to speed through this part of the video and then we'll do one unpaid of thousand all right so we have two paid one draft two overdue and one unpaid all right so let me go I'm just going to scroll down on my search page since I'm just kind of about everything here and I'm going to install if I don't have it already the chart plug-in so bubble has a huge plugin marketplace plugins that are built by bubble and also by other bubble users and you know there it really extends a lot of functionality in your app a lot of different additional elements to give you different functionality very very useful so there is a chart plug-in that bubble has created that will work well for this okay so once I have installed that plug-in it will become available to me on my list here line bar chart so I'm just going to add that to the page okay so for this particular example I'm gonna do let's do let's do a pie chart the type of data is going to be my invoices okay and I'm going to the data source is where we use this grouping function because the group by function modifies or doesn't modify it yeah it modifies your list so my data source is going to be a list of invoices and the group by function will modify the list so it can change the way it's going to be presented to you so data source do a search for invoice okay and this alone let me show you what this alone will do let's do current the value will be the status no sorry the value will be the amount because that needs to be a number and then the label will be status okay so let's this okay so you can see what with the source of it being just a full list of all of your invoices there's no separation really it's just that every single piece of this pie here is each invoice so I had six entries so I have six pieces here and you can see that my label is the status so I have paid paid and then um the amount is next to it that's the value so and then I have draft overdue overdue one page so this isn't the best way to display this data I want to group this data so that every slice is a different status so that I can sum what the total amount is per status so that's where the group by function comes in so I will select this data source and click more here and I can see I have different operators I'm gonna go down to the grouping operator okay so now bubble is asking me what do I want to group these invoices by so I'm going to add a new grouping I want to group it by status and then this is an exact grouping if you were to group my numbers it actually gives you more options so you can group by buckets so like one through five or or individual or if you're grouping by date it allow you to group by the day or by the month with a text value it's always going to be just it's going to group by at the exact match and then I'm going to create a new aggregation so the aggregation lets me perform some kind of a math function on a number value within each invoice so I want to sum the num the amounts within each group so the result of this expression here is I'm no longer going to have a list of invoices but instead a list of groups and each group will have what will be a group with under a status so each group will be different status and then there will also be an associated with each group and that aggregation will be the sum of the amount for each group okay so the value expression here is going to be the the value is going to be the sum and you know I can format this so that it actually looks like a currency we'll do two decimals and the dollar sign oh actually it's not going to let me do that because that will convert it to a text so we actually want to number or format the number down here this is kind of a separate area so that the value can remain a number bubble knows that it's a number so I'm going to do that formatting down here instead okay great and then the label will be that status okay so now I will refresh the page and we'll see what this looks like okay so see how I have less slices here and have my unpaid slice which is my biggest one because it's the highest amount I have draft overdue and paid so I have grouped my invoices in this way if I wanted to change the aggregation I could maybe maybe instead of knowing what the sum of the amount is maybe I just want to count how many invoices are in each status grouping so that's a different type of aggregation and so now I have this different split of the pie and I still have my currency formatting let me undo that here it should just be a number because we're just counting so the number the number value is just the number of invoices per status so under overdue I have to under paid at two and I have one for unpaid and draft okay so this is very very powerful you can do so many more things with this but I just wanted to show you that you if you're building some kind of a business tool or any kind of financial application or anything that needs charts stats analytics this is a very powerful function great so there are a number of additional features to bubble that I want you to be aware of that really really contribute to building custom apps that just so that you know that it's possible in bubble - the first is user roles so I touched on a little bit kind of creating conditions based on whether people were logged in or logged out but you can actually bubble has a whole feature for creating privacy rules and restrictions and permissions so that based on who your user is not just whether they're logged in or out but if their email is a certain email or if they are a paying user or if they're an admin or if they're any kind of custom thing you define there is an entire place for you to create custom permission rules for security and have that reflect all throughout your application it allows you to restrict access to the database in certain ways users can maybe view some of the fields when you're displaying the data back or maybe they can't find something they're not allowed to find in searches this is a global so privacy setting that really allows you to create you know more sophisticated apps with strong layers of security so user roles definitely a thing that you can do in bubble and the second I want to talk about is api's so if you're not familiar with API is this is basically a system that allows you to connect your application with the outside world you if you you you might not know it but you're constantly using applications and sites online that are connecting via API to other things all the time a really a couple of examples are you know if you sign up or log into some service with your Facebook account that's using that's an API connection that service has connected to Facebook via API if you're familiar with flight aggregator services like kayak comm or on google flights where you search flights and it shows you results from various airlines all in one that is definitely an api connection because the searching site that you're using or even like hotel bookings where they just kind of put everything together the site that you're searching on is connecting via api to all of these external companies and services so that they're all collected into one so you can actually do that with your app too you can have your app communicate with some external service via api this is absolutely possible the api's are actually one of my favorite features a bubble because it makes you create air it lets you create really really powerful stuff it's it's so cool not only can you connect to connect your app to an outside service to pull in you know data from that outside service like maybe a calendar Google Calendar events into your app but you can actually do the opposite you can have the outside services connect to your app so that they can read your data or run workflows in your application you could build multiple apps and have them connect to each other and you know kind of communicate that way another kind of internal use of API is because your app has API functionality just on its own within it another use case of that would be to schedule things to schedule workflows to run in your application on some recurring basis or just in general you can schedule things to happen in the future in other words you don't have users don't have to be present for things to happen like if you wanted to send a daily email reminder for something or if you're building like an auctioning website and you need to have things change their status from active listening to expired listing on a specific date and time you can make that happen that's actually using your own internal API for your app so very very very powerful and very possible the third thing I just want to touch on is the way your application is structured is you have two environments you have a test environment and a live environment so the testing which is otherwise known as your development environment is where you build everything that's where everything has changed you create the pages you edit everything you add you design everything you build your database and then you have your live version of your application so that's the published version you you deploy your development environment to live and it's just very important to understand that these are two separate environments that actually have two separate databases you have a test database and a live database it's fantastic for development because if you're you know say you have you've gone live with your app and you have people using it and you're still working on it maybe you're building out new features or you're just you know fixing bugs or responding to customer requests and you want to do new things you can continue working and updating the app and leave the live environment alone and nobody will get interrupted until you deploy those new changes so there's a really great system for controlling these environments and publishing you also have a version control system if you ever need to revert back to a previous version you can absolutely do that so there's a handful of tools that let you manage all of this stuff and also for troubleshooting bubble also helps you test your own application in a number of ways I'm gonna go back into the editor here I showed you before there was an issue checker that showed up there let me go back to the index here and let's say that I you know did not provide the email address here so I've now created an issue bubble helps you and there are lots of different things that can generate an issue bubble helps you identify them very quickly by putting them in this list and if I were on and if if I run some other page let's say if I'm on you know this page here and I click on this issue bubble will actually take me to back to that page and point out exactly where the issue is it's so helpful especially if you've got a you know kind of a growing list here another tool that bubble gives you is let's see if I preview this I'm gonna add it manually here oh here we go so whatever you preview bubble will automatically add a debugger so this is a testing tool that lets you inspect everything that's happening on your page and also let you break down your workflow as it's running in real time on the page so let me change this back to email address and run this again with the debugger so you can see what I mean so it's this toolbar at the very bottom here this only shows if you are if you have the debugger on like that so when I click on inspect and then I can hover over once some of my elements here and I can click on it and it will actually break down all the different properties for that element the reason you would want this you know what we know you might be asking what's how is this different from just looking at the input in your editor well when you're running the page you might have conditions that might be activated or not activated you might have multiple conditions that might change things and when you're previewing it you might not be aware that a condition is kicking in or not this helps you like really inspect why things are BR presenting the way they are in the in the preview mode because it might be different from just your editor this is what your users are gonna see so if you're seeing weird behavior this inspection tool will let you see exactly what's going on so I can see for example you know this input is focused right now and half the cursor in there and it's highlighted in blue like that so I can see why why it's highlighted in blue it's because the input focus now if I run try to run the workflow I'm gonna get a bunch of errors because I don't have anything I don't have it you know the email is required so it's going to stop me there if I do step by step here I can run the workflow in a step-by-step mode it will pause at every action and any action that has input values you can see here it will show me what's being inserted again this is something you wouldn't be able to see in your editor area you would have to see it in this mode so I can see why did I get that error I thought I typed in something maybe you know there's a placeholder that makes it look like I type something in but if I run it here and it's telling me nope it's actually empty and I can click here and it'll take me to the value that was programmed to be inserted there and I can say okay yeah the input email addresses values supposed to go in there and if I click value it shows me that it's empty so that actually gives me a direction to go and to find the issue and troubleshoot the issue very very powerful tool for debugging and your issue checker as well so where do you go from here if you're looking to build an application on a bubble or if you have already started so the what we've gone through in this video are it's really the core functionality pieces you need to understand be aware of when you're building because everything that I talked about um no matter what type of application you're going to be using it you're most likely going to be adding users or registering users to your application so you need to know how to sign them up you're definitely going to be building some kind of a database for something you need to create data types you need to create fields when you have a database you need to create workflows to add records and modify records in your database understanding how to troubleshoot your app understanding how to pass data from one page to another understanding how to manipulate your elements and your workflows with conditions these are all basic foundational things that no matter what type of application you are building you need to understand how those things work and there's obviously so much more that we didn't cover here today that can be done I really do want to emphasize that this is just this is just the tip of the iceberg there's so much more customization that you can build into these pages in your application I want to let you know that there are other resources that go over other features that show you more specific tutorials on how to do things and everything is going to be linked below the I have other YouTube lessons that talk about very specific things how to build specific features I also send out email tutorials to my email list which you can join if you haven't already on coaching no code apps comm I do have a course on API specifically because that's a whole thing on its own in my API video bundle which you can also check out on my site I also offer a full-fledged course on building apps on bubble I go from A to Z I show you everything you need to know I go into very detailed explanations of how all the elements work what all the properties are of everything how to use these things and not only that but like what's the best way to use these things because I want you to build your app as best as you possibly can so my fast-track course is all about that it really takes you through it's a video course self-paced and you can learn more about it on my site as well another great resource is the bubble community forum lots of great help there from people who are experienced in bubble I'm on there all the time I'm very active in the forum answering questions it's a great place to learn to just kind of learning from other people's questions just things that they run into you can learn a lot from that alone so please comment below let me know what type of application you're building I'm really looking forward to seeing all of the ideas that are out there and I really appreciate you joining and watching this video thanks so much

Channel: Coaching No Code Apps

Views: 197,717

Rating: 4.9222832 out of 5

Keywords: bubble.is, bubble.is tutorial, learn bubble.is, bubble app builder, build an app without coding, how to build an app without programming, bubble.is for beginners, how to build an app, no code app tutorial, no code, bubble.io, bubble, apps without code, bubble marketplace app, bubble.is beginners, bubble tutorial, app builder, matthew neary, zeroqode, buildcamp, bootcamp, bubble bootcamp, bubble.io tutorial, learn bubble.io, bubble.io for beginners, bubble.io lessons

Id: 6OKVj1A9OcY

Length: 126min 35sec (7595 seconds)

Published: Tue Mar 12 2019