Bubble.io New Responsive Editor: Design a Messaging UI

happy thanksgiving to those of you in the united states uh we're going to get started here in just a moment i'm tanya your host and i'm here with eli and justin my co-founders at pronocoders.com we miss you pablo happy birthday um tonight we're in for a treat justin is going to show us how he's designed a messaging ui using the new flexbox editor of bubbles and we're continuing this series because we're so excited with what we've been able to do with the new responsive editor if you have questions please go ahead and chat them in you can use the youtube stream we find is really reliable for sending in questions and we can answer you um i think maybe other channels you can as well um but definitely from youtube and yeah we're going to get started but before we do i just want to let you know we are launching the pro coders vault on friday for black friday there's going to be a substantial long-term like lifetime discount on it so you definitely want to get in on that and if you want to be among the first to know when that is please go to pronocoders.com vault and sign up to be on the list we'll send you an email when it's live and ready to go yeah all right justin you're on i'm turning over turn it over all right thank you so today we are going to build from scratch a messaging system uh this is going to include the database structure that you're going to need for something like this it's going to include um some nice fancy responsiveness and uh getting into the new responsive editor and how to make that work for all screen sizes so let's jump straight in here so i wanted to do this app um in in some proper context here you can see i have a test page here but this is an actual production app it's called auction quest it's currently being rebranded to something else what we're going to do is we're going to use this real app environment in order to create a uh yeah messaging system that works so let's start off by creating a brand new page i think that's the very first step so i'm going to use this one messages new responsive obviously change that name in the future i'm going to clone from nothing now this is a dark screened ui and what i'm going to be doing is mimicking the facebook ui here you can ignore all my very personal messages here but um we're going for this kind of setup where we have chats on the side left and right left and then on the right we have um all of the messages you can see that they're left aligned for all of the people who are talking to you and for yourself they would go on the right side we're also going to have a little section that will pop out in and out uh when you click on it and we're also going to make it responsive like it is in uh in facebook messenger you can see as i move in all the names disappear and it moves to the side everything stretches properly wonderful that's what we're going to be doing today so let's go ahead and get started with that so first things first i like to use i have a very large screen tanya how is it on your head can you read the text is it clear enough should i zoom in more um i can read it what do you think eli do you have any opinions on the laptop yeah yeah all right sounds good uh i like to use a width of uh 1200 but before i do that i'm going to click upgrade responsive beta and that will allow me to upgrade the page i'll wait while it reloads the app this always happens three times slower when you're streaming it they'll figure it out eventually yeah yeah they need to have like a minimal version like how gmail has like a like a low like basic html version when it's things are loading slow gotcha that'd be nice all right i should probably mute my slack notifications um while this is coming in we can see here okay now we're in the new responsive editor it's still loading i'm not sure what's going on here hopefully bubble doesn't go down right now in the layout tab i'm going to set my width to 1200 i just prefer working with a little bit of a wider range of view but you can set it to whatever you like i'm going to set the the basically what i want to have um is just what facebook has i want to have a header across the top right here and then i'm going to have a column on the left and a column on the right in order to set that up i want to start with a column layout the reason i'm starting with a column layout is because i have a header at the top and then i have um like basically the content underneath that so in my column setup let me grab a group right here i'm going to go all the way across now one thing that i i was working on earlier before i actually do that i have a header that is in it's a floating group right now and this header is exactly 1200 wide and it's set up to be responsive but i find out that or i find that because this is built in the old responsive editor it doesn't scale well i haven't found a way to properly scale this oh there's a beaver hiding behind that icon all right um i haven't found a way to scale that properly so instead of using the one that i had on my app and changing that one over and then having to change it on all of my other screens i'm just going to create a new header for this so i'm going to go ahead and create a group up at the top for the header now container layouts we have four different container layouts when you select the container layout that's referring to what is going to happen to the elements that are inside the group how do you want to lay the things that are inside that group so first of all let's try to get this so that it's stretched out all the way to the right so in order to do that i'm going to select a um i'm going to think about this for a second so i want there's going to be one row i probably have some elements on the left i'll probably have some elements on the right i could probably do this with a column layout or i could do this one aligned parent layout for this use case i'm going to go ahead with column uh actually you know what i'm going to try a line to parent why not i'm going to change it from fixed width uh to not fixed width and that will stretch it all the way to the end next i probably want to make this a little bit taller that sounds 50 pixels sounds about right i do not want to fit height to content i'd rather actually keep it fixed width to 50. all right let me go ahead and drop in an icon on the corner here i'll probably drop the the logo that would be a good idea here so go ahead drop that logo in now something that i like to do and this is just a use case that i found was that whenever i have a variable or something that i want to access on the page but i don't want it to be showing on the page i just create a little pop-up called pop-up hidden variables and then this is where i keep all of the variables that i'm going to be accessing throughout the throughout the page and so i'll just create another group and i'm going to rename this group var as in variable and the var is going to be in my case is going to be website now i believe what the website item is is it allows me to change settings on the uh on the app that i want to um change dynamically or have the user actually be able to change so i'm just going to search for the website if i look at my database here under app data under a website i only have one thing here it looks like it's just controlling stripe fees and everything right now um but what i'm going to do is i'm going to include a logo so i'm going to go ahead into my website i'm going to add a logo uh i'm probably gonna go with a just a text so that i can drop in the file that i've already pre-uploaded looks like this one looks good so i'm just going to get the url for that go into app data and i'm going to drop that right in here for logo okay now i have my image or at least my url so here and for our website i'm going to be holding the the website that i want to access and then what i can do here is in my dynamic image i just reference that variable for our website's website and then logo and that should give me the image that i want run mode i want it to stretch and i believe if i look at the i believe it's a one by one so i'm going to inspect this just to get the size of it looks like it's uh 300 yeah it looks like it's a one by one so i'm just going to make sure that the icons one by one so the width i'm going to make it uh let's say 40 sounds good minimum height 40. i'm going to keep it on the middle on the left side and then i'm going to give it a margin of 10 on the left in order to push it over just a little bit now on the other side what i want to do is drop down just a login button for now um i could get more fancy with this but right now let's just keep it the way it is uh for layout i want to push this all the way to the right side and give it a margin of 10. okay i'm not going to set any of this up just yet um we'll just keep it the way it is right now all right now underneath this is where i'm going to create my two content groups so i'm going to drop a group in here and this group is going to hold the main content i'm going to want one here on the left side and one here on the right side so i'm going to do what i did before except that i'm going to create one that says row now i was really confused when i first started using this so i was like rho you would think that it would allow you to put things in rows and column you'd think that'll allow you to create multiple columns but that's not how it works it means you want to fit everything into one row so i'm going to try to put everything into one row here and i want to stretch this all the way across i'm going to have two elements in this row so let's go ahead and change this from what fixed width so it pushes it all the way to the left now that i have that i'm going to go ahead and put a group inside of it and then another group beside that now i do want this to stretch all the way to the end of the page so in order to do that i'm going to go down to um instead of fit height to content i just want it to stretch all the way down to an infinite max height i'm going to do the exact same thing for these i'm i'm gonna have this one all right before i get into get into uh the container layout or anything like that i'm gonna change this in a second but i just want it to stretch down so i'm going to make this oh i guess it has to be i want this to stretch all the way down it's what i want uh here we go vertical alignment there's the stretch i want this to stretch and i want this to go all the way out to the right all right so now we have our elements so kind of explaining what i just did there so if i grab the parent group here so i'm holding the parent group that's on the outside of all of this um that parent group is a row layout the container layout the container alignment actually really doesn't matter at this moment um i have it left aligned but if i were to change it does not change anything on the inside because they're taking up the entire width now in within here within this group i have two items in the row you could say this group on the left which is set to a fixed width of 146. i'm going to change that to actually let me let me see what the width is that facebook uses so in order to grab that width i'm just going to inspect the page just so i can get a good kind of eyeball of what it is sure so i'm going to go go ahead and hover over you see that div right there is 360 wide i don't know if you can see that if that's big enough but it's 360. so i'm gonna go ahead and say yeah that's you know facebook does it should be pretty good so 360 for my fixed width oh no i accidentally deleted it 360 pixels and then uh the minimum height this probably won't come into effect um because it's stretching to its maximum height now within the left group if i look at facebook and how it works uh is oh yeah that's uh that's exactly how it works okay so we have right here the uh the header chats and then we have some buttons on the side here specifically i care about the the one that allows you to create a message then we have a search box underneath that and then we have a repeating group that kind of loads on forever as you go down uh you also have an install messenger app but we're not going to worry about that because we're not creating an app today so let me drop back in first things first it's looking a little white it's kind of burning my eyes right now so let's swap that over to a nice dark background i'll make this header group a little blacker there we go something like that and then i want this group on the side to also be pretty dark and so we have three different elements um if i look at facebook's color scheme they're kind of going for one color all the way around i don't know i don't know if i like that but we'll see how how it looks after uh so first things first we're going to create that uh chat header here within this uh this left bar now the type oh sorry for the layout i don't want row because i want things to stack all the way down so if i want them to stack down in one column i'm going to choose column and uh what i'm going to do inside is create each element now something that you have to you used to have to do a lot in the old editor was he had to put a lot of items within um like within separate groups we don't really need to do that anymore and a lot of the reason why we had to create things in groups was that was the only way to collapse the height if they were not visible but we don't need to do that anymore because every element even text elements have something called collapse when hidden which is exactly the one what we we want collapse when hidden will collapse it horizontally and vertically whereas before collapsing would only do so this is really for us i'm sure you know these things already or at least you've heard them before but if you don't um yeah hopefully that helps so let's go ahead and we're going to create a group that's going to hold the chats menu if just i'm gonna move this on to the side so you guys can see it let me close that down here so we're gonna have this chats bar here and then we're good that's really having fun tonight there we go we're going to have text and then we're going to have an icon that's what i'm going to create i'm not going to worry about these two icons here in order to throw that down i want to create a group here at the top here we go again it doesn't really matter what size you create them because i want this to stretch all the way to the edge um within this container i want everything to be set up within one row so i'm going to choose row and i'm going to well i'll worry about this in a second let's uh make it not fixed width so it pushes all the way to the side perfect all right so within that let's see if i can move this over a little bit no never mind there we go so within here let's put a text element we're going to call this chats and then we're going to have the icon that's going to come up on the other side so let's drop that icon in icon drop that in okay uh so we'll create a we'll use the edit one a similar one to what they have and now i'm not putting this in a group and i'm not putting this in a group now the cool thing that you can do now is that you can actually center things vertically and so that's what i'm going to do here i'm going to center that vertically but you'll notice that it's not really centered vertically because the text itself is not centered so i'm going to go ahead and center that text i can do that by making the size of the text the same as the height of the group so i'm going to go ahead where it's this fixed height and i'm just going to press the down key in order to see where it is and so that's pretty much uh horizontal um or rather vertically centered another way to do this would be to if i wanted to create it like a larger size but i wanted to be horizontally not horizontally vertically centered um you a lot of people think oh i need to create a new style specifically for that but something that i like to do is just throw in this url is not empty so what that's going to do is it's always going to be true it's just going to check hey is the url empty no okay perfect and then it's going to apply whatever's in here so i'm just going to say i'm going to keep that style but just edit one thing i'm going to say center the text horizontal or vertically and you can see what that would look like and so it looks like that looks like it's centered perfectly all right with that said um now i want to move this over to the right side now there's a few different ways of doing this um the way that i'm going to do this is i'm going to use this one right here that's going to push them across it's called space between you're going to make the space in in between that much i'm going to go ahead and create the vertical alignment and let's add some margins on either side so we've got 10 here we've got 10 on the left that looks decent there do we have any questions here tanya not so far but i do want to uh mention that it is okay to ask your questions in fact welcome to ask your questions on the youtube uh stream especially and then also if you would like more information on some of the concepts being oh juan says hello ben said hi earlier um if you want more information on some of the concepts that justin has been covering we do have a flexbox guide at pronocoders.com flex dash guide awesome thank you all right so uh now that we have these chats uh this here and i'm sorry to interrupt we we got some questions already um let's see can the margins be dynamic or managed by styles uh i don't believe they can be managed by styles unfortunately um if you check the style guides i you don't have the layout tab there unfortunately not and then can they this if they can't be dynamic or dynamic in the future but yes they can be dynamic and you can see how that would affect now what would be really cool is if uh that could be uh if that could be a transition as well ben's asking can you make the margins via a conditional yes you can you can change the margins by conditional i'm curious what you would use that for um ah here we go oh do we have margin as one of the things no unfortunately not it would be very cool though if you would be able to change the margins and move them something with a transition a lot of these things are still being added it's still in beta so uh if you have any of those ideas about what you could do with an app um just check out bubbles idea board they are generally looked at these ideas and you can upvote other one ideas that people have you can see there it's bubble.io ideaboard you can submit an idea or see all of the ideas that they have i'm sure they have tons of ideas because right now it's not even loading yes all right and you can see how many people have uploaded it i'm glad that they removed the ability to upvote as many times as you wanted because that was that existed for a bit uh but yeah i have not been on that board in a while the last time i was there you couldn't see any of the ideas it's like you had to search for an idea it's like they were trying to hide them yeah they didn't want no so i think juan is suggesting that there's already an ability to add an expression where you're setting the margin and so instead of a hard-coded 20 that may be a default of 20 but the client if they ask it to be 30 you could do like the website object like we do in canvas um to like make it a reference a dynamic reference oh that's what we made my dynamic unfortunately i'm not seeing that there's no dynamic editor for the margins yeah okay that would be beautiful i wonder that would be awesome dynamic width elements man what it i think bubble would add a search thing you know generate a skeleton no nothing okay so let's go ahead submit an idea make the margins allow dynamic expressions within margins that's do i need a description there we go you can go ahead and upvote that if you like that idea all right oh i could hear myself yell all right in your in your screen there um okay let's uh you know what i'm just gonna remove the style increase it manually bold it that looks good and uh yeah that's looking good so if i look at the next step on on facebook we've got the oh man come on facebook uh we've got the chats here um we've got the icon that we wanted um i do want to put a background on that icon actually so i will put it in a group in order to do that now fun way to do that is just to right click it and click uh group elements in a group in this case there's only one and then based off of this i'm going to uh just have it aligned apparent i'm going to create it as a fixed width box uh 33 that sounds good 33 let's change the width of this to like 26 okay and then i want to center this right in the middle oh there's a margin here that's why and then i'm going to create an appearance on the background here so background style flat color let's give it some dark gray and then add some roundness to it 200 um should probably make it a little bit larger i think did i grab the right group when i did that i hope i did um so i'm going to zoom in here a lot of people don't know you can do this but you can just change the zoom value there i i think um let me remove the element borders okay now this is the one thing with icons that's kind of annoying is that you know especially this icon it doesn't really look like it's centered because the whole bottom of the icon is like totally cut off and it the icon itself is not centered so in order to account for that i'm going to create a margin to kind of push it so it looks more like it's in the middle yeah something like that maybe make this a little bit bigger yeah there we go that's looking good and then just give it a margin on the right 10 pixels i think is what we went with looks a little far because there's only four pixels from the top so i'm going to mimic that yeah it's good enough let's drop in a an element underneath that that's going to be the search bar so i'm just going to grab a search element in most cases you would have to use a group but i'm just going to drop the element straight on the page i can't find it because i have so many so i'm just going to type search box all right let's drop that there for layout i don't want this to be fixed width i do want it fixed height i think it's pretty common practice to set everything to uh 40 pixels in terms of height okay and then i'm going to add a little bit of margin to keep it away from the what's above okay and then change it to search for a user and then i'm going to define my list of options as users i'll search by their real name okay now underneath that now i'm going to put the repeating group so this repeating group is going to hold everything within it so i drop in a repeating group i'm going to zoom out a little bit here i want this to have an unlimited number of rows depending on how big your screen is and i'm going to mimic facebook and say uh theirs was 70 high so i'm going to say 70 pixels here as well and it is cool that you can set it to a percentage of the um i guess it would be the height of the of the group but i'm going to change it to pixels and then i do want only one column now i do want this to be stretched out horizontally and vertically so i'm not going to fit height to content i just want it to stretch off and so this is this does a cool thing that uh bubble didn't do before but it will show like half of an element um rather than where in uh in the original editor you can you would only show whole elements right you could you can show that it keeps going off the page now repeating groups has a few more settings uh they have the collapse when hidden just like everything else but a lot of this has to do with um what will happen to the elements on the inside now repeating groups what i find with repeating groups is that you want to set them up in like a table format and sometimes and i think in this case this would probably be the easiest instead of um instead of creating or like going through all the business of like creating a margin here and a margin there and then you know worrying about all of that i'm just gonna use fixed as the sales container layout and that's because this the width of this is fixed already so that's what i'm going to do here uh so first thing first i'm just going to drop an image you notice that it stays where it is because it's in fixed uh the layout cell content is fixed now that we have some elements on the page i'm going to grab some text this will show the person's name and then we're gonna drop one on below that which will show the last message from that person uh now that we're getting into like the actual dynamic aspect of it there's a weird bug now you'll notice one thing um the snap to yeah i don't know what's going on has this ever happened to you before tanya nope where it's like i know that my zoom is off but i didn't realize it would change it like that we do have a new question that came in it's not directly related to what we're doing this evening but um how can we do lazy loading like facebook does for the conversation list uh so that would be an extended uh basically extended vertical scrolling is what uh bubble would do in that case so the way to do that is to actually make sure that you do not load all of the content at once so do not show all items immediately once you have that set just make sure that make sure that you are scrolling vertically do i have it because it's in no there should be one that says scroll vertically am i missing something i here the way you have it set up is already set for lazy loading because you have you have your ah here we go yes there you go yeah yeah yeah yeah thank you um i noticed now yeah if you have columns then you get to choose if they're not fixed then you can choose which direction it scrolls but yes 100 so this is set up for lazy loading already bubble tries to lazy load whenever they can you for the question um i'm going to add in some extra margin here i can never decide how many so the margin here was 10 so i'm going to do 10 here as well just feels so close you know what i mean then i'm going to talk a little bit about how to set up the database so a lot of people struggle with how to set up a messaging database because you you know do you keep it as a list of messages on the user like how do you how do you do it and the best way to do it is probably just to keep it simple so i have two different uh two different data types one called message and one called thread so what the thread holds is it just holds the date of the last message that was sent and it holds the list of users that are in the thread typically it's just going to be between two individuals but we'll also talk about you know if you have three or four individuals like facebook where you can create like group group messaging between multiple people and then message so a message has an attachment you can attach something to it if you want it has a text field it has thread and viewed by so viewed by this is how you keep track of like how many red and unread messages somebody would have and it just has a list of users now you have to be careful if you have if you're building for example a slack um kind of app for like an enterprise and they have thousands of users you probably don't want to use the viewed by um in in this way now uh bubble is quicker to use lists like lists on a data type than it is to do a search when the list is relatively small so we're talking i would say like if it's less than 100 or maybe less than 200 it'd probably be better to use the list but if it's more than that do not rely on lists do you guys have anything to say about that specifically not so far ben had asked what lazy loading is and i explained that it's uh it's loading things as the user needs it on the page rather than taking a precious page load speed to load things yes um vishal says hello and juan says he loves that no more suffering trying to move it to one pixel below when you're talking earlier so yeah right awesome perfect so uh using this message and thread system i'm going to create the repeat repeating group and how that works so for my type of content i'm going to show a list of all the threads that i have uh here we go so there's my emoji thread and the data source i'm going to do a search for all of the threads that where the users contains me the current user i'm going to sort them by the the date the last message was sent and i want the most recent at the top i also have a search bar so i also want to search by whatever i searched in there so if the user contains the search boxes value then i want to display only those ones however when it's empty i want it to display everything so i'm going to ignore empty constraints which means this will be ignored when the search box is empty that's all standard bubble stuff and then we have i believe there's like a an icon here on the side that will show how many unread messages there are so i'm going to go ahead and drop that in as a text element i'm going to create it as 32 wide and 32 high and i'm just going to throw in the current users oh let's talk a little bit about this stuff first before i jump on to that so first things first i want to show uh what i want to do is i actually want to do what facebook is doing here and i think this is an interesting thing to talk about so what facebook does is if you have a message with just one person then it just shows that person's image but if you have a thread with two people or three people that it shows all of those people i'm wondering if there's a thread with more than two i believe yeah i believe it it just caps out of two probably the last two people to show so i'm gonna have it dynamic in my app as well where if it's through with multiple people then it will show those multiple avatars and if it's only with one then it'll show a large avatar the way to do that is in this case would probably be to stack two um two different i guess versions on top of each other now because we're within this uh type of content this like sorry this layout which is fixed it works a lot like how bubble works now and so i'm just going to create a group and this group is going to going to hold all of the avatars and then i'm gonna have two different groups within there so let's just give this a background so we can we can see what it looks like um so i'll just give it a border style so we can see where it is all right so we have one here which again needs to be 32 by 32 and then i'm going to put one on the other side of it so i'm going to instead of show only hidable i'm going to show if i right click and reveal an elements tree i can see that i have group avatars and within it i have image c and image b so i'm going to do is in here i'm going to show the second last person to send a message and this is going to be the last person to send a message not including yourself so how do we delineate that uh so first of all i want to group these inside of another group that's gonna separate them so this is if there's two avatars so two plus people i'm gonna show this one and then if there's one person then i'll set that up in a second so if there's more than two people i'm gonna have both avatars right here now this one's going to show the second last person this one's going to show the the very last person to send a message and i never want to show my own avatar there because that would be kind of silly so in the dynamic image section what i'm going to do is i'm going to check the parent groups threads users and i'm going to subtract or i guess minus myself from that group and then based off of that i'm going to grab uh copy expression um i have to think about this because i want to see the last person who messaged so i would do a search for the messages that are within that thread thread equals the parent groups thread and i'm going to check uh yeah that's all i need to know and i'm going to oh yeah i'm going to say that the user the created by does not equal the current user and i'm going to sort them by created date so the date that they were created and i want it to be as descending so the very last one is first and i'm going to take the first item once i take that first item i'm going to grab the creator which is the person and then i'm gonna grab their avatar so that should show the very last messages person's avatar and then i'm gonna do this with the second last person so i'm gonna grab that same one that we just ran but instead of the first item i'm gonna do item number two uh creators avatar now we need a fallback if there is no if there aren't two messages or one message from the other person so if that's true i'm gonna have a just kind of like a placeholder here um what i'm gonna do is i'm just going to default to one of the two people so i'm going to default to the parent group threads users and this is that same thing that i was doing before i'm defaulting to the parent group's users minus myself minus the current user uh and then i'm gonna grab their avatar so let me grab the first ones avatar so let me copy that over here and just change this to item one which is the same thing as first item and i'm gonna grab the item number two's avatar excellent all right now i only want to show this two plus people group if uh there is if there are two people that are actually um other than me so what i'm going to do is i'm going to check the parent group starts users count is greater than 2. so if it's greater than two that means there must be two other people plus me which means that i want to make this visible uh i do not want to make it on visible on page load so this is a trick if you want your page to load faster you can basically you can turn off everything that is a conditional that will show based on some other condition you want to make it not visible on page load and that way um only if it's conditionally will will it like only if it's positive in the conditions will it show that means it will load faster will not load all of those other elements and then hide them which is traditionally what would happen if you did it the other way around all right so based off of that two plus people i'm gonna grab another one i'm gonna just copy and paste with ctrl c ctrl v and this is gonna be one person so if there is only one person if the count is less than or equal to two then i want to show this one and i'm going to remove this one i'm going to say this is image person other person i guess let me hide this one so i can see just that and in here i'm going to display instead of displaying all of this craziness just going to display the parent groups threads users minus item current user uh first items avatar there we go uh so that should show accordingly uh depending if there's one person or if there's two people wonderful all right now what i want to do is i want to show the name of the person in the thread or the people in the thread so i'm just going to grab the threads users i'm going to use the same trick minus item current user and then i'm going to grab their names i think i have it as real name they have a username and a real name and then that will if it's a list it'll just show them separated by commas in here i want to show the very last message that was sent not from me so i'm going to do a search for the messages search for messages within this thread current cells thread where the uh created by is not me then the first i'm going to grab oh i have to sort i'm going to sort it by create a date and then descending so that i can grab the first item as text so i just want to show the text there now because we are in fixed width um i believe and someone can correct me if i'm wrong but i believe that it will cut off the content if if you're in fixed uh in fixed container layout that it's not going to grow with the text but we can double check that as we test page now we want to show the number of messages that have been sent so i'm going to go ahead and in here i'm going to say not the most number of messages but rather the number of unread messages so i'm going to do a search for the messages where the viewed by doesn't contain current user and the thread is the current thread is the current sales thread now uh some of you might be thinking oh well what about ones where you are the creator obviously you've seen ones that you are the creator and so we don't need to do a check on here we'll do a check when they submit or when they create a message awesome so once we have that we search for messages and we're just going to count the number of unread messages and we're going to display it in there i'm going to remove that so that i can create a custom style nice flat background i think the colors are orange here or gold rather i'm going to use black on gold center it vertically bold it and that should be pretty good uh just get it round so let's add some roundness to it and that should be good it's a little large so let's just bring that size down it's about 22. that sounds good to me i'm going to center it horse not horizontally vertically which apparently is broken now interesting okay i'm gonna just check uh it looks roughly in the middle it's a little too small though all right let's go with that okay move that over a bit now one thing that i have noticed is that uh the snapping seems to be broken especially with other text elements i can't seem to snap them together so maybe that's a a bug with uh the current editor all right now one thing uh you might be wondering is like oh well if i preview this page obviously this person doesn't have any uh messages so everything's blank here um what are we gonna show if it's all blank and also um it looks like because we're in debug mode let's remove debug mode there's space at the bottom so without debug mode on then it removes that space but yeah what do we do if it's uh if it's empty well a favorite idea of most people is just to go to on undraw.co you can change whatever color you want and do a search for some some filler images so i'm going to go ahead and search for mailbox i'm going to download that svg it's free to use and i am going to put that here at the very bottom so i'm going to grab a i'm going to grab a group i'm going to put this within a group so that i can show and hide it pretty easily uh i'm gonna do the exact same thing here oh looks like that group didn't show up within there there we go and then i am going to uh i'll do a row sorry column within it so i'm going to show the image the empty image and then i'm going to show some text underneath that let's push it all the way to the side and then i am going to grab that svg that i just downloaded put it into an image element i'm going to upload it not to interrupt your train of thought justin but i was just thinking poor pablo the the one event he's not at you're gonna go to undraw and start pulling down the images i know i have to because he's not here yep um all right uh no where was i here i don't want it to be that large i guess i could yeah let's do that and then i'll just add a margin saves my time are all of them square just curious if they're square no 340 by 240 okay they're not a little square 340 by 240 that helps me know i can do keep aspect ratio so i don't need to do any resizing 34 by 24. awesome let's add in some margins and then i'm going to throw a text element is there a this is a group please tell me this is a group yes and let's throw one there text element and this will say you have no messages it must be so lonely it's very depressing but you know it is what it is i'll just throw that in the middle save some time here um and then i want this to be horizontally centered just gonna go ahead and click this button on horizontal alignment and then i'm going to move it down a little bit in terms of margins now what i want to do is only show this if there are no messages and i only want to show this if there are our messages so what i'm going to do is within layout um under conditional i'm going to say when this repeating group's list of threads count is zero so it's empty um i'm going to make this not visible and i also want it to collapse when it's hidden so once i have that i'm just going to copy that condition straight over if you right click anywhere other than the when you'll get a different menu that allows you to copy the entire condition and then i'm going to paste that condition right here oh it's because of referring to this group so let's grab that there we go repeating groups threads of count is is zero i want this to be visible so i'm going to make this element not visible on page load i'm going to rename it to empty state and that should be good to go and we should see if that pops up oh last thing i need to make sure that this also collapses when hidden i'll throw in an animation why not uh and then let's display that wonderful you have no messages it must be so lonely oh man that's a horrible thing to say all right uh so now let's actually build the right side of the element or the um of what we're doing here and so if we look at facebook we have looks like we have a title here at the top with whether they're active i'm not gonna talk about whether someone's active or not it's actually pretty finicky in bubble to do that um i have done it before i could talk about that uh let me know in the chat if you're interested to know how to create an active now um like how to manage that within bubble there's one way that i know i'm curious to know if anyone else has some um thoughts on that and then it looks like we have a a little pop-up menu that comes pops out horizontally and underneath we have all of the messages separated by times so i am going to copy this as closely as i can so let's go ahead by starting with the people who are talking to you but before we actually do that we should drop in the element that goes at the very top here a couple couple of comments here michelle hi justin for search for text message text box what if the last message sent is sent by the current user are we including it or skipping it for for right here yeah for the text so the text so i'm searching for the messages where the created by is not the current user so if it's empty i think you're right if it's empty if they haven't send a message then you should probably default to something it depends on whether they've sent a message or not uh what we could do is just default to the only message that's been sent i'm assuming well can someone create a thread without sending anything then we just leave it blank i think what we do there so let's let's let's do that let's just leave it blank um but yeah that's a great question let me know feel free to interrupt me more often yeah no worries um ben i'm not sure what you were saying yes please too it's been a minute um and then vishal added i'm interested to know how to implement active part okay the active part now i would i'm so curious how uh eli how you would do this but this is what i thought of and i felt really smart when i think came up with it but basically it's something called a heartbeat so what you do is you check if the user is there or not by using a heartbeat so in my heartbeat i have to keep track because this is an auction app it's a live auction app so people are live streaming while they're bidding on items and i need to know if there are certain people there or not so the way that i'm doing it is that every 15 or i think i have it every no every 60 seconds or do i have it every two minutes i can't remember it might be every five minutes because the more that you check whether they're there uh the more capacity on your app that you're gonna use and you you wanna be careful how much capacity that you use just to check if someone's there but what i do is basically i check to see if they're on the page so every every just run or just show you how i would do that uh yeah i'm gonna go ahead let's create that active element so let me throw that up there and then and then we'll go from there so let's grab this layout let's make it one single column let me drop in the [Music] group okay and then make that uh align apparent and i want it to fixed width not fixed with rather okay and let's drop in the name and then we'll drop in that heartbeat uh okay uh name so let's do type of content let's say this is like a message i guess it wouldn't be message it would be group thread uh i like to throw emojis in just to know where i am so there's a heart um okay and then that group thread will be type thread and then based off of group thread threads um users oh yeah here's a here's a tricky thing i don't think this is something that i'll address today um but if you're in a group it has a different name because you can name your groups so i could get in that to later if i have time but right now i'm just going to grab the first other user and display that at the very top here so let's go ahead the users users minus item current user and then we're going to grab their real name okay and in this one i don't want it to be so like i don't want it to spill over to the next line so i can actually set a fit height to content i'm just going to make it fix height and roughly yeah looks about good to me uh and then underneath that uh is where i want to show uh yeah so let me group that inside of a group and then underneath that i'm gonna show uh another thing i'm gonna show the that whether they're active or not uh so let's create a um let me move this yeah line to parent and then not fix tight come on just trying to make the group outside of it fit not fit height to content and then push this up to the top there we go all right so let's grab that i'm going to put another text and this will be the active whether they're active or not okay so um and then i'm just gonna instead of creating a whole another element i'm just gonna create a green dot to show if they're active or not okay all right now in order to do this this uh what i would do is on every page of your app i would have a a little check basically to see if they're active or not and uh the way to do this check is honestly i would put in a reusable that shows up on every page which is most often the header within the header i would put something like this so i would do do every five seconds but change it from five seconds to something like much longer than that maybe every 600 seconds or maybe every 300 seconds something like that and the more you space it out the less capacity it's going to use on your app which is important if you have a lot of users and what i'm going to do is i'm going to make change to the current user's heartbeat um now i my heartbeat setup is a little bit more complicated because i need to know if they're active within a certain page rather than if they're active on the app somewhere on the app but what you would do is on the user you would just do create a new field which is uh heartbeat i'm going to delete this after and that heartbeat is going to have a date in it and all you have to do is make changes of the current user's heartbeat equals uh current let's say your current date and time so the time that it checks and then on here all you need to do is on the conditional just check so when uh you have to check that user so let me just grab the same user that i just grabbed here in the conditional i'm going to say this person's heartbeat when the heartbeat is greater than if you're doing 300 seconds then if it's greater than 300 seconds then you know they're no longer online uh great thank you grab i think he grabbed the wrong field i grabbed it you didn't grab the date field you grabbed the link today heartbeat date date right so i thought oh i have to subtract the current time right now in the condition i think you have two heartbeat fields on your user i have two heartbeat feels i don't think i do do i have a deleted one that i'm using i don't think so maybe i'm wrong what's going on oh oh that's why i'm not grabbing the first item i need to grab the first items yeah and then i can subtract that would do it current date and time i can i'm barely keeping up with my own thought process i'm surprised that you're able to follow along with what i'm saying no i i love this like this is um this is the same way same way i would set it up it's but it's yeah you're exactly right the you have to find the right time frame to to actually update that user because you don't want to over overwhelm your app with it right yeah but yeah and you can check that within your logs um just looking at like um like right now it says web requests but if i look at oh let's see oh when did i stir this somewhere like there ah it's probably not gonna grab it but oh the following six hours okay uh what's the day that i use this probably sometime in june anyway it was like 85 of it was just workflows and when you see 85 percent of your overall usage being your workflows you're you're running it too often so make sure that you don't run it too often you are killing your app trying to see if people are online yeah one thing that i found um like a lot of the time i had to check like um [Music] how to i was using like a search and i needed the search to be updated every second and so what i was doing is i was grabbing the current date and time but if you grab the current date and time it only grabs the current date and time on page load and so if you want to update the current date and time in order to update the search you have to like set a state and then every second you change the date and time and that will just kill your app like i would recommend never use anything less than 300 especially if you're making changes to your database like if you're if you're changing a state on the page that's fine but if you're accessing the server in any way shape or form including like grabbing the current date and time don't do it just make it way more than that juan is asking in a massive platform like facebook or whatsapp it's is it also storing that time but every second is it the same logic or is it developed in another way i think you know optimized yeah i know heartbeats are a pretty standard thing across programming um but i don't think that it's yeah it's definitely they're not using like a field on i don't know i don't know because in facebook they keep track of so much more than just like if you're online they keep track of like your scroll position and like the ad that you were watching like how long you were watching it for yeah um like how long you were reading a text how long it was on your screen for like everything and like they must have 10 000 fields on certain on certain database elements and how they're doing that i think they just they've optimized for that specific usage and like the closer that you can get to machine code and like the um [Music] and like the closer yeah the closer you can skim the line between like um what the machine understands and like and the code that you're writing the more efficient you can make and i think that's what happening in terms of bubble like um i can't think of the word right now but eli you know what i'm talking about where it's like you have high level is it high level programming languages and low-level i'm a no coder man i remember taking a course in university on this and it was like high-level languages are less efficient but easier to code in and that and that's with bubble like the more functionality that we can like offload to the front end like this you're just gonna you're gonna run into inefficiencies no matter what juan said he's worried when pro no coders has apps pro no coders app has 10 million users um and then michelle is asking uh justin can you please again explain conditional part of the active text box oh yes i don't think i've even finished that yet um okay so what i'm gonna do is i'm just checking their heartbeat i actually did this the wrong way i'm gonna do the other way so i'm gonna grab the current date and time and then i'm gonna subtract the last time that they were online so i'm gonna grab grab here you know what i should do this within the group and then i can refer to it uh current users first item yeah no no there we go so what i'm doing is i'm just grabbing what user this is referring to up here within the group so that i can just refer to the parent group's user's real name and then same thing in the condition i'm going to take the current date and time minus the last time they were online which is their heartbeat and i'm going to format that in seconds and if that seconds is greater than 300 then i am going to uh not show or i'm going to change the text from active to inactive uh red and i'm going to say or last active and then i'll just show their heartbeat i mean the the time that they were last active um now i probably want to show it as like relative time like last active five minutes ago rather than showing like the exact date and time uh so in order to do that i'm probably just going to use something called relative time which i don't know if i have this installed i don't think i do i have a plug-in called current date and time what was i thinking there let's do uh relative time hey eli i'm curious is there any way to check to see how much of an impact a plug-in will have on your app you mean before like just just from installing it yeah yeah like i know um a lot of them are built in the elements but you have to load a lot of the dependencies right some of the yeah yeah so one thing one thing to look at um is if you go back to that that previous screen right underneath uh where's where the element and relative time element is if they say this this plug-in loads in html or ads html ahead that means it's going to be adding something to every page on your app um yes yes yes and so that's something to watch for and then the other thing is is and juan and i well and tanya i guess uh figured this out um look at the look at the files they're downloading um there was one plugin that was downloading like a 1.4 megabyte file and it's like uh yeah that's gonna that's gonna hurt your performance but that's that's the thing i look for is that if it adds an html header then i'm gonna pay more attention if it doesn't it's only gonna do do things that you have the element on the page is there an easy way to check the size of a file of the files in your sources oh sorry i was muted i'm under network oh it's under network uh yes under network um then you can filter down to different uh different searches and it kind of gives you a quick overview there um but what am i but isn't there a way to just get it to reload there's a refresh button on your browser ah there we go and then you're saying just filter by size here sdk hash oh facebook okay that's the largest one that can't be right really i'm only loading like huh interesting okay i did not know that thank you eli um awesome so does that kind of answer the question around the whether they're active or not um you said rick was it i i wish i should see that name i think i can see the name can't i somewhere tanya still there yep i'm here but i was distracted for a moment with the question sorry uh who who asked that question oh vishal asked the last question about explaining the conditional part of the active text box rochelle you said uh vishal oh vision oh michelle oh okay all right um why do i not see a chat box do you guys see chat boxes am i just missing something here looks like i'm just missing something i think i'm the only oh here it is yes oh you found it okay i found it it's okay yes yes okay all right so that is how to show the active and inactive if they're active or inactive um i'm fairly confident that do every blank seconds will also run on page load but uh evil if i'm wrong feel free to jump in on that uh let's go ahead with fixed width for that um now i want to show an image on the left of this so what i'm going to do is grab an icon not an icon i'm going to grab that user actually i can steal this one right here i'm gonna grab that shawl answered yes really loved your explanation thank you i'm glad i could help uh so let's grab this image now you're gonna notice that i okay first of all it's straight the image is stretching over the whole width so let's make that fixed uh fixed width not zero let's make it uh i don't know 60. play around with that and then the min height will be 60 will also make it fixed um you'll notice that it's just on top of the other element behind here now there's two ways to play with this um i could just increase the margins here in order to move it out of the way or i could change this header from align to parrot to row which i'm just going to keep it to align to parent right now so i'm going to change my margin that looks about right i'm going to change margin on here kind of center it a little bit uh that's right in the middle this one's right in the middle i want to move this one down you can see that they go right over top of each other and i don't want them to go over top of each other so i'm going to change this from align to parent to column and then i want to center everything that's within within this so in order to center both of these elements i have to do something nope that was right um oh you know what i can do i'll make it uh fit the content there we go and then i'll center this one there we go oh okay juan says uh hi justin is this any keyboard shortcuts for the margins oh good question uh let's jump into keyboard shortcuts i know they had uh they used to have a keyboard shortcuts here like something like shift arrow well it does work within here if you use shift arrow it goes up by 510 something like that um but if there was like if you could just edit from here and then add a margin playing with it right now but i don't see any um the help menu used to have a list of keyboard shortcuts let me just check their shortcut list there it is yeah i don't see anything specific to that zero code also has a bunch of shortcuts that you can create so the zero code plugin for bubble has editor shortcuts um i think there's one under edit uh can you set anything specifically i don't know there's just zoom in zoom out tabs i actually had to remove all of the shortcuts because they were interfering with some of the other functions like alt tab i oh you can select multiple elements this way i didn't know you could do that anyway uh you can also turn on dark mode for your bubble editor um using the zerico plug-in which is nice i really would like this background made dark mode as well but we're gonna not use that for right now yeah yeah it is quite cool um the biggest thing with the zero code plugin and eli we should definitely add this but being able to select text from the plugin screen so that you can copy and paste things from the plug-in screen which should have built in yes dark mode yeah then yeah yeah no that's cool i don't know how many times i've tried copying the link from that screen right there right like what a silly thing to not allow like the one place where they we're like just to make these links work that would be nice um maybe if we have in our plug-in if we just just found if it's https we could uh we could just make it a link like make that text a link or something like that you do right click inspect yeah that would be awesome one thing to know i don't know if this is a zero code plugin or something else but uh um anywhere where it's like copy this element uh i think for example under api if i were to create like a create a new token this is not working but if i were to copy that right you know where it says copied it doesn't actually copy it and i think that has to do with the zero code plugin interfering so if you click that and i were to paste it uh it doesn't come through so that's really annoying like kick up click copy and i paste no didn't copy it so you have to watch out for that and then what you realize is there's there's no way to select this text without inspecting the page so maybe someone else can confirm whether or not that breaks if it's the zero code plugin or not it might be i mean i have every bubble extension installed all five of them open build um oh no now i can't close it why did i do that no canvas and frames and the get and the uh no code no corner one as well anyway sorry i digress we should jump back into this uh check copy fish extension to grab text oh nice let's uh now put in the icon on the very right side of the facebook messenger so that we can so that we can check information and then we'll have something that pops out on the right side and push everything as well okay so that looks pretty good um fairly large that's one thing that i don't really like it's the fact that like they don't allow you to just edit straight from there anymore in the new editor but i understand why let's go with 25 that sounds good we'll keep it on the right side and then we'll add some margins here on the right and 20 sounds good off topic pro no coders extension release date ooh it's soon the date i don't know if that's been discussed has it we're working on it we're focused on the launch of the vault right now so definitely if you're if you're interested in all things late of of late with pro no coders go to pronocoders.com vault sign up to be the first to know when it's released and then sign up for the vault we'd love to have you awesome so i'm just going to grab that user's avatar and display it there rescale's fine that's all good um i will set this up later for right now i'm going to set up the repeating group that goes underneath it and that's going to show all of the data so let's let's go ahead here repeating group holy moly where'd you go there we go you should add another plug-in so you have some more elements to scroll through there another two or three would be nice hey oh i never even added the relative time one i'm just gonna go ahead and add that relative time um oh man wait where did it go did i delete it no i didn't okay now this is the real challenge how do we deal with elements that we don't want to display like plug-in things that we don't want to display because now they mess up the layout i think you can just drop it in that group and make it make it zero pixels just make it zero yeah because that's really well even if you make it zero pixels does it zero no i you can make it one by one you can't make anything zero try try um setting collapse with hidden i've been wanting to to test this anyway so they can do it live right so just said the claps went ahead and see if it if it still initializes oh collapse one hidden end not visible on page layout and not visible yeah okay i'll need debug mode for that i guess i could just refer to that ben says i that i did it tonya did that for me last week make it fixed group and put it behind make a fixed group and then put it behind it yeah um i really like it would be nice if you just put it on that hidden pop-up right but then it doesn't load at least on the old one so let let's test it here i mean i'm pretty sure yeah i can i can drop it on this one which is not fixed it's a uh aligned to parent but aligned apparent they just ignore each other so it'll work out there oh that's true so yeah let's see if that if it loads uh so let me instead of active let me just add dynamic data [Music] you know what the other option there would be would be to have them in an invisible group where the element itself is visible but the group is invisible uh i've tried that it doesn't work at least on the old one maybe it only works for some plugins i don't know depends on what's loading um refresh interval i don't know milliseconds 10 000. um i do not remember it being this complicated the date and time you want to express relative to the current date or time or your baseline date oh i see uh their heartbeat user let me just grab their user's heartbeat and then we'll test to see if it loads or not okay responsive editor let's see what you're doing oh i just realized that i never actually accessed it uh so let's grab last active relative time a's current value it doesn't look like it's working i'm crazy uh layout moana's saying if you can oh wait this is a new question i'll hold blunt for a second what is this plug-in what i mean is loading and that is not the plug-in to use how does that have 12 000 people using it doesn't canvas ui have uh relative time i feel like airdev had a plugin that did that am i crazy i've never used relative time so it's asking me go ahead anyone oh and i was going to say it seemed like they did have a plug-in for that but i can't i can't remember i did remember that they had one yeah juan is asking if you convert a page or reusable to the new responsive engine can you revert it or is it better to clone it and test in the new one you cannot revert it no you cannot revert it and then if you have a reusable element with the new responsive engine but inside a page with the old system how does it behave floating groups do not like it i noticed that um floating groups do not seem to expand when the page expands if the if the floating group was if it's a reuse we're saying that most elements do work fine yeah my experience has been that they're working it works fine to put a new responsive reusable in a web page i'm curious why uh floating groups don't work the same because my old header like no matter what i do i can't make it uh like if i drop my header in i can't make this floating group uh like yeah i can't make it actually uh expand the entire width michelle is saying maybe vague time timestamp the plug-in you're looking for from airdoes thank you vague time that's it vague time thank you so much okay let's undo that vague time bring it on a vague time works so well here we go buy air dev too okay we should really know that it's only in 708 abs but it's it's super lean and it does exactly what i want um but yeah you can see like that header does not stretch for some reason that floating group header just stays there um okay so let's use that big time drop in the vague time to do that exact same thing all right vague time i'll drop it here and then from date current date and time to date uh actually it should probably be current date and time and then from date would be the last time they were online group users user heartbeat okay and then active all right so that looks like it's good um instead of relative time it's vague time hey the timestamp sting stream all right uh so that's good to go let's grab the repeating group underneath oh man we really gotta finish the repeating group here let's make that not fixed width um and then i'm going to make it stretch all the way down the page but actually underneath that i want to put the element where you actually talk to them so let's go ahead and grab that input and then we'll have a we're going to put that inside of a group so that inside that group i can put a button all right let's make it a row not fixed width there we go i wish it would default to not fixed that would be really nice when you put a new group in and then let's drop in a button alrighty so this button will be uh let's keep it the same height as this one which should be 40. uh that button will say send or something along those lines now i want this to push all the way to the side so i do not want this to be a fixed width i want it to take as much room as it can fixed height is fine i do want a little bit of a margin in between the two five on each sounds good give me some left margin there give me some right margin here yeah maybe keep them closer together i'm not sure that sounds fine um and then now i want to stretch this so that it goes all the way down the page so i'm going to make it not fit to content i am going to make the uh the inside of them like each of these uh oh uh that's that's okay set fixed number of rows that's what i want to undo i'm going to show messages the data source will be the do search for messages where the thread equals the um parent groups thread which is that overall group okay so now i've got uh all of the messages i want to sort now this is the interesting thing because facebook is um essentially facebook is upside down right so all of them new messages go to the bottom and so what we want is all of the new messages also show at the bottom but when a new message is added we don't want you to have to manually scroll down every time a new message is added we want that to be automatically put like automatically scroll so in order to do that um we need to use something called rg reverse um i believe i have it in here already rg reverse there's a whole bunch of different plugins that all do the same thing but essentially this plug-in will allow me to um rotate the entire repeating group and then so that it's upside down and then it's going to rotate all of the elements inside of that upside down again so that they're they're showing right side up and that will allow you to actually um yeah basically show the message as new messages come in they'll come in at the bottom and you won't have to scroll down in order to see them so you just have to put in the repeating group id so let's call rg1 and then any elements that are inside of it you would just grab the inside the cell the group and put that to cell one for example so i'm going to go ahead and change that to rg1 let me drop in the elements so i'm going to need a group within them first no i hate when i do that group there we go uh it is fixed for some reason so let's change that to actually really doesn't matter oh i guess no i want this to be column so it goes across and then i want them to be not fix there we go and not fixed height push it all the way along um yeah that looks like it's fine now within this i need to make this cell attribute cell one so that's gonna rotate this around the other way so now i just need basically the image of the person who sent the message so let me just make sure that that is grabbing the message of the current cell and then [Music] not a button i'm not sure why i put that there let's grab that image come on image where are you hmm image okay oh i've officially been at work for 12 hours wonderful congratulations thank you oh i'm going to sleep in tomorrow that's for sure uh we've got the dynamic message so that it's going to be the current group's creator's avatar and then we'll just make it nice and round on the edges there make sure it is fixed 39 by 39 uh we're gonna push it all the way to the bottom oh did i make this column i meant to make it no wait one no one row love how to always think about if it's a row or a column eventually we'll get it and then let's have the text come out of a bubble here so we're going to have it align to the bottom as well let's push it all the way the fixed width all the way to the end but leave a nice healthy margin on either uh side there's a lot of things that we could do within here and i think you can see like if you send messages within a certain time frame if they're close enough within time they kind of combine together if they're further in time then they've got a line in between them and if there's a long time in between them then it will it will show you a time stamp in between and we could get into all of those conditions today but i think we're just going to keep it simple mostly because my eyes are about to shut let's grab a margin on the left side here and then throw in uh the text for the parent group's message text don't worry justin if you fall asleep i'll wake you up that sounds good uh it is not fixed tight so that means it's going to grow as it needs to we'll just set a minimum height of about yay big now i want the text to be um in the middle so i'm going to center the text the hacky way let's center the text let's grab center the text horizontally let's grab some padding for the text so 10 that sounds about good uh yeah that sounds about good okay and then as it grows it will get bigger on top i want to make it a little bit round give it some roundness and then i'm going to give it a background style like a dark gray something like that maybe make it a little less round yeah something like that sure uh and then yeah i mean 25 is a little bit too big of a margin but this should essentially it should show the messages now we just need to build the workflows in order for this to happen so let's go ahead and when we click send i am going to create a new message the text will be whatever i've typed into the input the thread will be the current thread that i'm viewing the viewed by will add me because i'm the one that sent it so of course i've seen it already and we're not going to worry about attachment just yet okay now once i have this button it should also reset the input and it's also going to set the focus back to the input so that i can continue to type there okay and that's essentially everything that we need to do for that we just need to create some threads between some users hey uh tanya do you mind signing up for the app real quick so we can test messages back and forth i don't mind can you send me the link for sure i'll send it in the restream chat there you go uh so i should probably make the login button send you to the login page i can go to the login page is it just login i think so you can see my uh you're gonna have to stop updating long enough for me to get in though i will do that there you go the one thing about working with two devs on something and does this email verification or do i need to use real email uh you should be able to use the facebook login okay that'll be cool yeah that was my inclination continue with facebook all right oh man i hate when that happens you know what no just use bubble to login the easy way oh sure all right obviously we need to show something where there's no message from anyone in this box here not just like a red box and then we need to create a thread so tanya is your username so i'm going to grab i'm just going to in the database i'm just going to create a thread here all right juana's asking this new responsive engine does have the visibility conditions on the responsive tab yes you can use the responsive tab with the new responsive engine um and it works pretty well and those functionalities to hide and push things horizontally can be developed from the ui builder yes so that's that's one of the cool things one is um a lot of the things that you couldn't do in the responsive engine in terms of development before now you can and the responsive editor um and then yeah you have the ability to do a bunch of things responsibly from the ui builder awesome we should make a list of things you can and can't do from each that would be helpful yeah yeah a little comparison list yeah alrighty if you bug me enough to do that i will i'm speaking to everyone in general i have to add a clicking oh i have to put everything in a group in order for us to be able to click ah okay this is already in a group that's right do you know why there we go yes we didn't even talk about hover or anything like that but we'll just throw this right there and then i have to grab that parent group in order to give you something to click on one thing about this is that you can create really cool layouts but it does take quite a bit longer say what yeah what was that is that heresy i just heard yep yeah so we know we know what's coming up now we're gonna have to have a face-off between the old responsive and the nearest oh yeah yes we should do that yes all right so if i click it now it should send you it should open that thread show one says not all he's sorry he's bombarded us with questions it's not always that you can have tanya justin and eli answering you at the same time oh no i have two groups ben's placing a bet he's saying that he he bets the new responsive editor would win by 10x it'd be 10 times faster yeah to build with the new one yeah more like 10 times slower we'll see ben knows what's up that said justin and eli are facing off next week you heard it here first [Laughter] okay uh this is one thing that i haven't been able oh maybe i have to do this if i fit this height to content that i don't know eli how do we do this or tanya anyone how do we make it so that this will collapse the high oh i guess i would just change the minimum change yeah change your min height there we go which did nothing and make sure your cell min height is is small enough on the repeating group in appearance ah there we go chain seems strange whatever's going on right now this one's at the bottom and everything else is at the top that might be a bug with how it displays we'll see all right we should be able to display it now if i click all right you ready tanya i'm ready let's do this can you see me oh it's still loading for me i had to load after you changed it juan is asking will we still need a placeholder group for a new possible new elements inside a page so we don't need to resize all the groups nope you don't need to do that anymore in the new one let me see where do i go to my chats oh just go to that page go to that page okay messages dash unresponsive done yes justin i can see you i can share my screen too right i think so yeah yeah let's do it [Music] it's like we're in the matrix i know let's see here we're gonna do here tanya's screen now we will do this all right justin you want to turn off your camera and we'll go at it here all right yes i see you that looks terrible just fyi we can't see both sides of your screen oh this is oh this is oh maybe i hit the wrong one let's see here that's bizarre why does it look like that there now you can there you go all right there we go right one all right but shouldn't it be at the bottom yeah yeah so let's uh let's just change the sort by the created date descending yes and then that should fix that problem i also didn't do anything with the viewing um when you view when you view a message um then it should mark it as red i'm laughing because ben has a theory that if all pro pro no coders founders are on a stream together bubble will implode [Laughter] all of bubble will just it's gone i think i don't think we've made i don't think we've managed to do that yet no not on a stream yeah we've got a plan for that the time zone makes it a little tricky now here's the one thing to note about uh using the rg reverse is that you actually need to create the margin on the top so that it'll apply it to the bottom when it reverses the entire thing no i have to click that's a good note actually that's not true i guess it it's smart about it let's change the bottom maybe i'm just not doing it right let's see click click click click yeah there there we go so it's still bottom not top okay let's uh let's get a whole bunch of messages on the screen so we can see how scroll works okay it still scrolls on the right side that's all good perfect yep um so my my time is pretty much coming to a halt here is there anything that we should uh address in the very last hurrah of the night yeah any last questions juan or ben or anyone else who's watching we'll give you time to type i have a question what is that icon on your user all i can see is like some kind of a flame or something that's a that's a redhead actually um i just went to yeah i just said pippi long stockings ben says if we sign up for pro no coders do we suffer a loan no that's our one guarantee that we have for you if you sign up for pro no coders you will not suffer alone i think you're referring i i'm often heard saying when i'm on office hours which we do office hours five days a week and we will host a zoom monday through friday and our members come on the zooms and they ask us any bubble question they want and we can't guarantee answers for those questions but we can promise they won't suffer with those questions alone thank you ben for bringing it up yeah and then yeah so i guess thank you justin that was amazing that was a really good solid two hours of learning about the responsive editor the new one and what we can do with it um yeah and if you want more content like this and us answering your questions do go sign up at pronocoders.com again we are launching our vault and a little bit about the vault justin do you want to tell everyone what the vault is so essentially uh what the vault is right now uh is it is a collection of videos um that's kind of catering to that um intermediate to advanced group of bubblers that are out there that know how to debate the basics are there are some basic videos in there as well but it's really catering to those people who are trying to build an app and they're running into problems that are not within the actual bubble manual and things that you try to google for but you can't find we have a whole collection of uh targeted videos for those situations we also allow the ability for you to submit a question to the vault that we will answer for you for free and then we will include that in the vault so if that's something that you're interested in please please sign up for the vault uh get ready to submit your questions that you have and we can answer them for you or at least not let you suffer alone right exactly nobody suffers low awesome well thank you eli for being our backup this evening we appreciate having you here and thank you everyone for watching and we will be back tomorrow let's see today is wednesday i am actually going to do office hours on thanksgiving because i can't think of a better way to celebrate thanksgiving i'm so grateful for our crew um so i will be back here tomorrow evening at 6 00 pm pacific time for office hours and if you'd like to join us go sign up at pronocoders.com thanks guys thank you bye see ya

Channel: Pro NoCoders

Views: 361

Keywords:

Id: 4rcWB-sjCdc

Length: 113min 10sec (6790 seconds)

Published: Thu Nov 25 2021