How data moves through your app - for Bubble beginners

hey guys just quickly before we jump into the content here just want to say this video is actually part of my upcoming course on how to build web applications in bubble so if you like the video if you want to see more like it i would love to see you in the course there's a link in the description if not please enjoy this video for its own sake and hope that it's helpful today i want to talk about a topic that often trips up a lot of bubble beginners who aren't familiar with programming before and that's just the idea around how data how values move throughout our application and just to kind of show you an example right off the bat to kind of give us a shared language here if we look at linkedin if i scroll through linkedin here and i look at any of these posts i have this share button which i can click on and it brings up this pop-up here where i can type a message and click to post this share pop-up is the same for any post that i want to share see this is a new post but it's the same structure but you can see the content here is different because i'm sharing a different post if i do a third one okay you can see that again it's a separate post but the overall structure of this pop-up is the same so what's happening there is that we've got this feed of posts on linkedin and every single time that we are clicking to share one of these posts we're basically sending or pushing data from the post in the feed to that pop-up so that pop-up is just an empty shell right just like in the previous video we were talking about repeating groups and each of those cells is essentially just an empty shell waiting to be populated with some data so how data moves around the page and what containers are set up to expect what type of data they're set up to expect is really kind of absolutely critical and not talked about enough when people are learning bubble so let's just jump into the editor and try and kind of go through a couple of examples here to make this concrete it's really important that we build intuition for this early i'm just going to add a couple of groups here on the page and i'm going to call this i'm going to make this a text type group and i'm just going to add some text inside of it right we saw in the last video that we can do this where i can insert dynamic data and pull through the parent groups text okay so this text element is a conduit through which the value within the group underneath can shine through so parent groups text and we've got a type of data here text and if i just typed in some value right here and previewed this okay you can see there is our group there and if i just add a little border to the group then we can kind of see it more clearly i'm going to come down to my debugger click inspect okay and then click on this group and we can see yep there is the data right so this is the data that this container is holding right this text value hello world okay so if we imagine that we've got a group here a group i'm just going to try and render with some rounded borders so this is our text group and it's holding a text so this little blue rectangle here this is a text okay this is think of this as just like one little piece of information it's a text shaped piece of information that says hello world inside of it simple enough right okay what if i duplicate this group i clicked ctrl d there or command d on a mac to duplicate that group if i duplicate this group now instead of having the same data source hello world okay this right here is we're calling this group text i'll just call it group b so we've got group a and group b okay group a is here over on the left right so this is group a and i'm creating another one over here where now for this data source i could actually point this to take group a's text okay so look inside of group a and take whatever value you find inside of it so group a's text right so essentially i've now got a second group here on the page right which is group b which is asking group a what do you have inside of you and that's going to send that same value right that same value then inside of group b so inside of bubble this is then what we have then if we change the value of group a if i say hello mars for example okay then both of these groups are updating okay so this is just to demonstrate that containers can hold data right all types of different data right these groups are just containers that's kind of a key concept to keep in mind containers and containers can hold data and they can pull data from other containers inside of them and what's really important when that when we're doing that kind of thing right where this group b is pulling data from group a is that it is pulling in data that it can actually hold on to we want to be thinking in terms of inputs and outputs what is the input that i need and what is the output that i'm getting so from group b's point of view the input that it needs is a text from group a's point of view what it's outputting is text so this kind of relationship between these two containers works very well but what if for example we changed group a to be a number instead so group b over here so again we still want group b to be holding text so we can just ignore this for a moment so now that group a is configured to take a number how will this connection that we've just made where group b is expecting text it has an input requirement of text but what it's actually going to be pulling in from group a is a number so let's go into the bubble editor this is my group a now instead of type of content text i'm going to go type of content number and you can see that immediately we've got some issues okay this issue tracker up the top is going to tell us anytime that we've got some illogical expressions in our application so one of these says that group a's data source it should be a number but right now it's a text so you can see actually we've got this data source hello mars that's the problem if i get rid of that the issue goes away and if i type in say the number five then that's fine but our other condition is actually here over here on group b and this is sort of the more illustrative example here is that our group b which is expecting text is now getting a number and so for this to work right we would actually have to change this input this text b's input to expect a number rather than a text okay and just as a quick aside here in case it's not really obvious only containers can hold data right all of these visual elements like text they can't hold data they can only render data so if i put a text down here i could quite easily you know do a search for let's say do a search for job listings and pull out the first item that i find in that list of job listings that we're pulling out from the database and then i could display for example the title okay just like this that's how that would look that's all fine and well if i call this text a if i have a second group here so i'm going to go ctrl d to duplicate here i can also while i'm on a fixed width page by the way i can also hold down control or command on a mac and just drag off of an element to create a duplicate of it so right here if i right click clear this expression i can't reference now the first texts text group a's text if i try to go it's not even here it's not even as an option the only options that i have to choose from in terms of my inputs for this text are containers containers on the page so group a and group b this text a is not showing up as a possible input for my text element okay so containers are the only elements that can hold data really important just to keep that in mind in the beginning here all right so yeah we want to really be thinking in terms of input and output all the time now that said we can actually so to speak transform one value right like a a job listing okay into another value like a text in the process of passing it from one group to another so just to show you kind of what i mean if i've got let's say i've got here this is an application for pets okay so this is my my pet shaped group and then as before i've got a text shaped group so as before this is group a and this is group b over here okay so inside of my pet shaped group i have a pet okay an actual pet object and if you just look in my database okay you can see look i've actually configured this pet thing in my database and i've got some pets here too i've got you know a budgie and a rabbit and a goldfish okay and so we've got a pet shaped group here on the page in bubble right let's just set this up so we're making it super concrete i'm going to set the data source of my group a to be a pet and i'm just going to do a search in the database for all pets and just pull out the first pet that i find now this text okay inside of this group can act as a conduit right and render one of the fields from the pet object inside of the group so the parent groups pit i'll access one of those fields right and render it through the text i may as well render the name pull the name through and then i'll just to get rid of that that error i'll just change the data source of my group b and so what we have right now is a group a with a pet object inside of it specifically a goldfish okay and then we have a text box in this group which is just showing the name of that pet now if we try to get group b to look at group a okay and pull in whatever group a is holding which is obviously a pet then that's going to be an error this pet okay cannot fit inside of a text shaped group any more than before this group b could hold a number this is invalid this is invalid all it can hold are texts right text shaped things okay however what we do know is that our pet okay and you can see it's kind of covering the group here but you get the idea our pet is a data thing it's an object remembering from our first video this is a package no more than a package of primitive or raw values raw information like text values like number values like this very cute picture of a cat here so this package what if we could instead of passing through the whole pet right into this text shaped container that doesn't make sense what if we could just access the name right we could just access one of those fields that is actually the right sized shape right the right data thing the right type of value for the container so in bubble what that would look like is if i configure this group b to be accessing a text again right it's accessing a text if i try now to just grab group a's pet okay then of course that's resulted in an error right at that point we're still just moving in an object that it's not configured to hold it's the wrong shaped object okay however we could grab now derivative values from this pet for example it's name so now we're literally just saying okay don't pass the whole pit just pass us one of the derivative values and this is now a valid expression on the page now when we when we load it this is working well even though these two groups are actually configured to hold completely different things one of them is a text right and one of them is a pet maybe i'll just change the pets border color here so we can kind of see visually that there are two different containers right two different shaped containers yet this is still totally valid in terms of input and output because as far as group b is concerned okay all it needs is a text input now group a all it has to offer is a pet but since pets just like any other data objects is just packages of primitive data in the act of passing this you can kind of think of it this way and the act of passing this we're kind of transforming the data that we're sending right we're just pulling out one of the fields or unpacking it from this pet shaped package right from this pet object in our database we're unpacking one of the fields inside of it and that's all that we're passing through to our group b which is of course configured to take text okay so input output really important that we start to build an intuition for these things in bubble now all of what we've just been discussing is pulling data from one group to another right we've got two groups on the page and one of them is looking to what the other group has and then pulling some data back into itself that's what we're doing any time that we're setting a data source like this so when we set a data source that's essentially saying when the page loads okay this is the data that i want you to hold this is where i want you to look in order to populate me this is what the group is saying to the application essentially and it's saying that keep looking for example this group is looking for group a's pet's name and anytime that changes right if i go into the database now and i change goldfish well let's just add kind of like a few exclamation marks to it and click save that's now updated in real time in our application okay so that data source is you can think of it almost like a permanent connection or it's just like this group is just always going to be looking at group a to know what it should display here okay so that's pulling data the group that's doing the looking that is the group that is pulling data into itself but we can do things the other way as route as well where we're pushing data okay and that is how we would do like what i was showing you at the beginning of this video with linkedin where we're clicking on a posts share button and that's then populating this new container in the case of linkedin a pop-up that's populating this new container with the data from another group so that is what we're doing anytime that we want um the user to essentially trigger a group showing some new data in the case of linkedin it's the same pop-up for every single post it's just the content underneath is changing and the trigger for that content changing is when the user is actually clicking that share button right in our case we could have two groups that both are configured to hold pets okay and when a user clicks some button okay we push the data from one to the other okay so rather than this guy looking as a reference to another group and then pulling in whatever it finds it's essentially we're doing things the other way around where we're pushing data from that first group into the second group upon some user action like clicking a button so that's pushing data so let's talk now about how to actually set that up in bubble let's delete this second group b and i'll copy my first group here so we've got one group a over there we've got another group a over there so i'm going to call that group b okay so group a and group b on our paper analog here and with group b we are not going to have any default data source so that on page load this group is going to have some data and this group is not i'm just going to get rid of those exclamation marks because nobody should be that excited about a goldfish let's just all calm down a little bit about the goldfish there we go right now on page load okay this search for pets okay of course if you remember from the first video this group a is doing a search into the database so it's retrieving some data or an application's memory our database is returning a single pet here and this second group okay because it doesn't have a default data source it's not pulling anything in on page loads so this is what we're looking like right group b is just sitting here idle it's shaped like a pet it's ready to accept a pet a group a has got this pet from the database so this is kind of our starting page setup now what we want essentially is for the user to be able to click on a button right in order to trigger this movement here okay so let's put a button onto our page button here onto our page that simply says push okay and since we're dealing with user interaction here right this is behavior that's happening after our page is loaded right once our users do something this is going to be a workflow so i'm going to click start edit workflow here to add a button is clicked event okay specifically for that that push button that we just created and now all we're going to do is we're going to come over to element actions display data okay this is how we do this push action is with this display data action and what we're first going to choose okay is the element that we want to display the data in okay so the receiving container so that's group b and then where is the data coming from right what's the output that's this data to display which is of course our group a over here group a and it can't just be group a right that's just a container that doesn't make sense you can't push a container into another container you can only push the value or the information inside of a container into another container okay so now if i load the app and i click push there we go we've got goldfish now appearing in that group and let's just take a quick moment here to just talk about one other aspect of the debugger the debugger as well as then you inspect the properties the data source of any element at any precise moment we can also track how our workflows are performing in a more granular detail so if i click step by step mode here and then i click push that's going to essentially cycle through every action in this workflow one by one and pause on every action so that we can kind of look under the hood so to speak and see okay what's this actually actually doing where is the dynamic data coming from what's the value of the dynamic data that kind of thing so i'm going to click run next here this is essentially we're starting to track the workflow here we're seeing that we're currently looking at the event so the button push is clicked so let's move on to that first action and we can see that we're displaying some data anything blue like this means we can click into it and inspect what the actual value of this expression is so group a's pet is in fact this whole object here right this goldfish object that's what we're pushing into group b so then if i run next it's no surprise that in fact we do have a goldfish inside of group b and i can even inspect just to confirm okay so get familiar with the debugger here i can click on this group b to look inside of it and indeed it is holding that goldfish right that goldfish was pushed from group a to group b and this diagram here isn't quite accurate because it's not like it's been pushed from group a to group b and now group a is without a pair in fact what is happening is that we're just creating essentially another pet inside a group it's the same pet ultimately both of these are referencing the same pet in the database right like they both say goldfish here but if i go into the database now and i make this a big goldfish okay they both updated now in real time because these groups are ultimately just referencing the original entry in the database so if i make changes to the original entry those changes are going to be replicated or propagate through any other places in the application where we are referencing that same data object now just to complete the picture here what we've just set up where we're pushing information from one group that can only hold a single pet or a single data thing into another group that can only hold a single thing isn't usually going to be that useful what's more useful is that linkedin like behavior right where there's like lots of possible inputs and depending on which one of the user clicks okay then the output group the the group b in in our application example here shows different content so you might guess what that means is we need some kind of repeating group okay so if this is my repeating group here this repeating group will have multiple cells and each cell is a container just like a group and each one of them is configured to hold a pet right so we might have multiple pets in this repeating group what we want is a second group okay which could be yeah a share pet group or a send message to the pet owner group or a more details group right there's not enough room within this cell so we want to have like a second this needs to be a pet shaped group of course we need a second group so that we can display some more information about one of these pets okay so depending on what the user does here right they might want to share let's just use the share example they might want to share any one of these pets but that means that they have to decide by which one that they click and so if they click this one then this one moves in they click this one then that one moves in right so any one of these items could be put into the list that's as opposed to what we've been doing before where we've just been saying hey grab the first item from a list and put it inside the group that's not usually you know useful behavior we're not going to know ahead of time what the value of the first item in the list is it's for the user to decide as they're interacting with the application which pet or which one of these cells they want to pass through into the new container so let's set that up quickly in our database i'm going to just hold on to our group a here and grab a simple repeating group and we're going to make sure that that's of type pet we don't care about a fixed number of rows we just want to make sure that it's tall enough the minimum height of each row in pixels is tall enough to fit our pet name group here so i'll just make it a little smaller drag it in now that it's highlighted red we know that the cell is ready to accept that group so i've released the mouse button and now we have this kind of basic setup here only thing i have to do now is say what's the input for this repeating group right every single container needs an input remember thinking in terms of inputs and outputs so in our case the ultimate input for this repeating group is going to be the database right the database where all of these pets actually live so that means we're doing a search for doing a search for pets and we don't care about any search constraints and if we reload the page you can see we've got a little bug here okay because all of these groups are just showing big goldfish so this might be a good time for us to get a little bit more familiar with the debugger figure out what's going on here so i can click on inspect okay and i can open up my repeating group here by searching for it and then clicking on it and then i can say okay so what's the data source tell me let's get real what data are you actually holding here is it really all of these big goldfish or just something more going on it looks like indeed there's something more going on because yeah here's their first pet in that list of pets which is indeed that big goldfish but here's my second pet which is a dog my third pit which is a cat fourth pet which is a budgie so we know that something's amiss here okay because this cell is holding a dog this one is holding a cat this one is holding a budgie yet they all say big goldfish and i can go even further and i look okay what is the group itself holding ah so each group is actually holding a goldfish it doesn't matter what cell i'm looking in okay because of course here's the repeating group cell but we've also got we've got a group here right these are all groups inside of which we have the pet all right so essentially one container inside of another right one group okay inside of a cell and so what we need to do here if we look at this group a we see that okay group a is doing its own independent search for a pet okay our repeating group is basically if we go down here here's our database where all of our pets ultimately live our database is sending a list of pets here but then our groups here inside of the database they're also asking the database to send them some stuff right each one of them independently is asking them to send a goldfish okay and so of course it doesn't really matter what the cell underneath is holding this group here is what's ultimately feeding this text this parent group's pet's name so if we want to fix this okay we want to basically cancel out this independent search that these containers are doing okay and we instead want each one of these to look to the cell in which it resides okay so we can do the equivalent of parent groups pet just like we were doing with a text living inside of a container so we want the the group inside of the cell to look at the value that the cell is holding so we're passing things through from the parent the cell into the child the group and in our elements tree that becomes even more concrete right here is the parent the repeating group and then the child is this group and there's of course one for each cell so instead of search for pets i'm going to right click clear expression we want the data source to just be current sales pick and now if we refresh this page voila now we're actually seeing the behavior that we were expecting right each cell has its own pet that pet is being passed through into the group within that cell and then finally there's a text right there's a text within that group which is actually the conduit for showing particular values particular fields within that pet namely in our case the name okay so now we want our our kind of more details group or our share group to take the analogy from linkedin right this guy over here so i'm just going to copy one of these group a's okay and i'll call it the group receiving make it really clear this is group receiving and we're not going to give it a data source right now it doesn't make sense for us to give it a data source because we want to populate it based on a workflow if you remember so where we had that button before that button click instead of a button click right we can actually just click on the group itself right any element can be clicked on to trigger a workflow not just buttons so group a is clicked and now what we want to do is also display data only this time of course we're doing it from within a repeating group you know what just to make complete the picture i'll call this group input and group output so it's really crystal clear we want to display the data in group output of course right good thing i named it so it's really clear and then the data to display is going to be this group okay so that means the group that was clicked so the output group or we could say or grab you know the parent cell which is going to equate to the same thing okay because they're both holding the same pet so we can go current sales pet or this group's pet doesn't really matter and then in theory that's going to push a value from whichever one of these groups was clicked within the repeating group into our more details or our output group so if i click big goldfish big goldfish appears if i click dog dog appears budgie rabbit you get the idea okay so now you're basically ready to make linkedin for pets but that's moving data around the page yeah really good to build an intuition about this rather than just sometimes you know beginners have a tendency when you see an expression that's red you're just clicking randomly you're clicking random options just to try and get it to turn blue just like why on earth is it not a valid expression and sometimes there's there's a place for that it's not always necessarily intuitive what all of the features that bubble has do and so you know you want to play around you want to experiment and and sometimes that means just choosing choosing different options that you might not understand but where you find that you're in a little bit of a whole and that strategy is not resulting in the behavior that you want it's just just take a step back and just think input output what value have i got this container configured to hold and what value am i actually receiving okay so much of the time we're getting errors in our application just because we've got misaligned input and output [Music] you

Channel: Matt Neary

Views: 15,178

Keywords: bubble.io, no-code, nocode, no code

Id: brMdG6y8CSc

Length: 31min 26sec (1886 seconds)

Published: Sun Mar 27 2022