if you're thinking about building a no code app on Bubble this video is going to walk you through everything you need to know to go from blank page to a live functioning application my name is Gabby Raman and I'm the co-founder of coaching no code apps where we teach entrepreneurs how to build and scale their custom applications completely without code now I'm going to help you understand what bubble is what it can and cannot do how to get started I'm going to Showcase some real live bubble applications and I'm also going to build completely from scratch a mini app during this video and all along the way I'm going to be dropping tips around app security performance design and more so this way you know exactly what to expect for your app all right let's get started okay so what is bubble bubble is an app development platform you can build design and publish real interactive and robust web applications completely without code that's right you don't need to have any kind of coding or programming background to build a real app on this platform platform what you're going to be using instead is a visual editor and bubble is full stack which means all of the important components that you need to build and maintain an application long term is all Under One Roof your database systems hosting you know page Design Systems all of the logic to bring features to life it's all in one place that you know these components communicate with each other seamlessly so that you can just worry about actually building the app and you can build apps as small as personal projects uh and as large as you know SAS applications for large businesses this is significantly going to reduce the amount of development uh time uh compared to traditional coding and also keep you in control right because you're actually going to know how the app works so if you ever need to make changes to the application uh you know as it continues to evolve you'll know exactly what to do it's completely in your hands so this is a fantastic and Powerful option for non-technical entrepreneurs so in thinking about bubble's capabilities what types of apps can and can not build on this platform okay so most bubble applications are going to be data driven in some form or another the functionality of the app revolves around information that's being manipulated that's being reported on that you can search through that you can display in a certain way right that users can interact with and the data itself can be data that is user generated maybe they're filling out a form and submitting something to the application Andor it could be information that you are providing your users right maybe you're providing a database of resour sources uh that your users need to interact with now I want to bring this into context just a bit here with this traffic light system green applications are best suited for the bubble platform they're highly data driven uh highly interactive uh and these are really common types of apps that you can find here so we have marketplaces social networks dashboards right where you can create reports crms and erps for businesses any kind of scheduling or booking tool tracking of literally anything right if you have uh data that needs to be calculated or timestamped tracking those things really common type of functionality that we find on Bubble e-commerce applications right if you have users paying each other or if you have users paying you you know creating shops things like that transactions very well suited for this platform uh any kind of application that has Dynamic forms so maybe job applications or surveys quizzes things like that and calculators we often see uh functionality being built around custom logic to manipulate data and output uh you know a custom result for their users then you have our applications here in the yellow light category so these are apps that you can build on bubble but you do have other options that might be better suited depending on what you're doing so for example media Rich portfolios these types of applications are uh they tend to be really heavy in their multimedia right whether it's images video audio whatever it is um Bubble does have uh file storage built in but if you have a high volume of multim media you're probably looking at integrating with an external file storage system anyway um and depending on how interactive the portfolio is you know bubble might be a little overkill for you you may be just fine uh using a traditional website builder to display that content marketing Pages yes you can absolutely build those things on bubble but that's not really what bubble is for there are plenty of website Builders uh that can help you put together marketing landing pages uh quite quickly blogs same thing stat IC website same thing right you can build these things here but that's not really what bubble is meant for bubble is really meant for doing more with data that you can interact with uh these applications tend to be more for just viewing and then you have the applications within the red light category here these are apps that you probably don't want to build on Bubble because they're not going to be supported very well you're not going to find all the capabilities you need to pull them off so for example games with any heavy Motion Graphics or animations uh this is really not what bubble is meant for you want to use a different system for that multimedia editing so if you're thinking about editing podcast or editing video editing images in robust ways right for you know at the Photoshop level at the Final Cut Pro or Adobe Premiere level um creating any kind of Motion Graphics uh that sort of editing is best suited on dedicated systems bubble is not really meant for that you will find some uh capabilities some plugins and things that can do basic uh editing for you but you're likely looking at inter ations rather than using um you know native functionality uh in bubble also any kind of computer AED design so like 3D modeling that sort of thing and finally you do need to make sure that the type of application you're building if you need to meet certain industry regulations or compliance that bubble is actually Meeting those things for example bubble is not hipa compliant so you don't want to build um an application that is going to be dealing with sensitive patient information Hippa is of course a US law but it's good to know no matter where in the world you are now you probably noticed that uh you know those green light applications typically involve realtime interactivity with the users they have to be on the page they're typing things in they're making selections they're doing searches whatever it is but it's good to know too that bubble also supports background functionality where you know you can create really powerful automations so let's say that you know a contract was signed uh and that's a part of your application you could have uh database records being updated automatically uh in response to that you can email notification being sent out uh imagine you know payments if payments are a big thing in your application and credit cards are failing or a new subscription was created right users don't necessarily have to be present on the page for next steps to happen so again you can create really powerful background automations as well all right so now that we've gone through some bubble capabilities let's go through some frequently asked questions that might be starting to pop up for you right now the first is can I build an app for free on Bubble technically yes but really if it's just a small personal project uh the free plan on Bubble is going to have limits on it you're not going to have access to what's known as the live environment of your application you'll only have access to the development environment and this is really meant to serve as a Sandbox uh for you to get to know the platform and get started and and maybe start to do some internal testing you should expect to move into any one of the paid plans when you're ready to go live when you're ready to uh you know add more capabilities to your application uh you know you're going to connect it to a custom domain you should expect to move into a paid plan okay and now this brings me to our next question which is how many users can I sign up to my application and in general how many database entries can I have in my app on the free plan you are limited to 200 database entries this includes users a user is a type of database record um you'll be able to create other types of database records as well but on the free plan up to 200 items when you need more than that you're going to have to move into a paid plan any one of the paid plans once you're on one of those uh that limit is lifted you have no limit to the number of Records you can add to your application's database can I design a professionall looking application absolutely you can there's no question about that you know bubble is not going to assume anything about how you want your app to look you do have to come to this with creativity but the platform is going to have tools for you that you can take advantage of to have fine-tune control over all the visual properties of your pages it's also going to come with some important built-in capabilities to make that easier for you for example a style manager where you can organize all of your colors your commonly used colors fonts and sizes of things that way you can reuse them uh very quickly you're not having to redesign things over and over again wasting time um styles are also going to contribute to better performance in your app overall bubble also has a powerful responsive engine which will allow you to lay out your pages in a way that adapts to different SC screen sizes from ultrawide monitors to normal desktop computers to tablets and all the way down to smartphones so all of these tools you'll be able to take advantage of to create really slick and professionall looking designs now with that said you might be wondering uh I'm not very creative this is a little intimidating for me how about templates does bubble offer any templates that uh you know you can work from yes Bubble does have a template Marketplace that you can explore you know depending on the complexity of your application you may find a template that's really close to what you need um and that can help you get something out the door rather quickly we tend to recommend building from scratch though you know with a template you're going to have to modify something somewhere um and that requires time to figure out what you don't need undo it and then kind of rework things to fit your own needs I promise you're going to learn so much more when you build your own application from the ground up a template is a fantastic Learning Resource of course you can uh see you know how things can come together uh what styling properties are being used to get things to look a certain way um so you do have that option there but we do recommend building your application from scratch can I install plugins into my application yes this is another big yes there is a vast plug-in Marketplace that you can explore uh once you're inside of your app editor so plugins can add extra capabilities in your application so you can have more visual elements to choose from an add to your design such as fancier charts and graphs um you can add more workflow capabilities more events more actions you can also integrate with third party part systems now some plugins are free some are paid and it's going to be up to you to do your homework and research uh you know to find the right plugin for your app any plugin that you add to your application is a dependency so you do want to find the right balance of what specifically you have to have in there and what you might be able to create from scratch yourself plugins are a great way of creating shortcuts for things but you don't want to have too many of those um otherwise you know the the stability of your app could get away from you also keep in mind that the vast majority of the plugins are created by the community they're published by third party developers uh most of them are going to be bubble users themselves uh folks who are very familiar with the platform there are a handful of official bubble plugins um but again it's just going to depend on what you need um it is a fantastic place to add additional capability so um I do encourage you to explore if there's something that you're not quite sure on how to build yourself um or if you need to integrate with a third party system speaking of extending functionality here's another question can I still add code to my app if I wanted to right on this no code platform and the answer is yes you can there are some places where you can add custom HTML CSS um you can add custom JavaScript you can also create a plugin that's private to your application and that would be a coded solution too you also have API capabilities that can really open up a lot of doors communicating with the outside world you know PHP servers that are outside of your app things like that um so the capability is there that's obviously going to be for more advanced use cases um you know the idea is that you build everything within the native capabilities of the platform so that you don't have to write a single line of code okay this next question has to do with mobile applications can I publish my app in the app stores the Google Play Store and the Apple App Store yes but there are a couple things to keep in mind bubble applications are web applications which means you access them through a browser you have to have an internet connection to get to them now you can go through a process known as wrapping the application this would require a thirdparty service to help you with this and what that does is it converts your web app into a format that's compatible for those stores you still need to have an internet connection it's still technically a web app um in order to work with the applications but that is a way to get them published there and the second thing is that as of this recording bubble is in the middle of beta testing a new native mobile app capability where you can build test and publish native mobile apps that will be compatible for IOS and Android devices there going to be a whole set of new features within the editor uh you know with mobile components so if you are interested in creting a native app you can keep an eye out for that to come soon here's another design related question can I import designs from wireframing tools like figma Adobe XD things like that bubble only has an import capability that works with figma specifically it is a bit limited um it will only really work with basic designs and even then you're going to have to rework things anyway um so that everything is fully compatible you know with the rest of your application we recommend just designing from scratch if if you have external designs use them as a reference uh but rather than importing designs from figma just rebuild them from scratch you're going to learn a lot as you go anyway um you're going to ensure that you choose the right elements for those designs sometimes the import uh will kind of convert things into the wrong elements you'll have to replace them it's just going to create extra work for you so short answer is you know with figma only yes at a basic level we recommend skipping that step Al together and just building your designs yourself let's talk about exports can I export my bubble applications code no you cannot bubble applications only work on Bubble okay so keep that in mind when you're making the decision to build on this platform this is the platform that you're going to stick with and remember that this platform is not just for you know MVPs and prototypes and early versions if you build your application correctly you can scale your app for the long term just a matter of uh putting in the right practices in place so that everything is secure that it scales well you know once you have more users more activity we'll be talking about performance and optimization a little bit later in this video okay so bubble applications only work on Bubble you cannot export the application to use in a different system you can however export your apps data and there's a couple ways you can do this you can do this through apis um and through CSV downloads this next question is a really important one how secure is my application and its data and the answer to this is really going to require a collaborative effort between bubble as the the platform hosting your app and you as the builder of the application bubble is responsible for the infrastructure okay so they're sock to compliant um your application is hosted on Amazon web services which Powers most of the internet's you know most popular Cloud software um they're going to handle a lot of data encryption for you um password management a lot of user credential management logging in logging out resetting passwords things like that um and also uh there you know there's a number of capabilities around who can actually access your editor um and you can Define you different levels of permission there now on your end you're going to be responsible for creating more granular access rights to the app that you've built so the uh data records the uh functions the pages right who can and cannot do and see certain things you know bubble doesn't know what you're building again so uh it is up to you to create those rules to create that logic in your application so it is up to you it is your responsibility to not just build those things but also enforce them properly uh in your application can I collaborate with other people in my editor yes you absolutely can now the plan that your application's on will dictate how much of this you have access to but in general you can invite other bubble accounts to your editor give them a certain level of permission um and you can work alongside them without actually stepping over each other um there's a lot of Version Control tools um you know merging changes syncing changes things like that so if you're looking to work with a partner or even a team of people this is a great feature to take advantage of and for our final FAQ can I really scale is it truly possible to build an app completely without code in a way that's going to be long lasting right support a lot of users data activity over time um and have it be reliable yes absolutely we've seen it firsthand we've worked with hundreds of applications in many different Industries um you know Founders and app Builders from all walks of life build applications completely from scratch and turn them into you know Revenue generating products you know the application itself might have been the product um so it's absolutely possible the thing to keep in mind is that bubble is just the tool at the end of the day right it's a great tool but it's just a tool it is up to you to make a lot of important decisions around the logic around building it in an optimized way we'll talk about these things a little bit more later in this video but you know you do have to come to this with a plan you do have to come to this with strategy and you have to understand the concepts around managing data around creating user-friendly designs and so on so yes it is absolutely possible um and I'm going to show you too by showcasing a few different examples of real life applications built on bubble that are currently live our first showcase is Ultimate book list this is a big directory of uh book recommendations I'm going to scroll down here to this uh kind of list of top personalities I'll select uh one person here let's say Tim Ferris and this is going to take me to Tim's profile if I scroll down here I can see the various categories of book recommendations uh that fall under this profile we can see the 85 recommended books and and these recommendations are coming from sources that's kind of one of the key things here uh to create authority over uh this entire directory so every single uh book that we see here has a linked Source where we can actually read the recommendation from this person so maybe it was uh social media post maybe it was published in an article somewhere um so let's check on you know one of these books here I'm going to select this check checklist Manifesto okay so now I'm in a similar profile but now it's from a books perspective and here I can see all of the different different personalities that have recommended this book so it's going in the other direction here this is a great discovery uh platform for uh book content so this was all built on Bubble you know this uh application has a lot of functionality uh that you might find with social networks such as search right profiles um you can have an account to mark your favorites you can follow um and of course different linking and uh navigating between different pages to be able to move the user through and actually encourage uh the discovery of new books all right our next showcase is inario app now this is an application specifically for the curtain and blind industry different users within the industry can use this app uh designers retail uh shop owners manufacturers and this is really a big project management space it's an area where folks can manage all of their Fabrics in a product Library uh you know they can set up different invoices and quoting kind of build out custom uh designs for curtain and uh blinds for different rooms you know within their clients they can manage all of the products make sure that things are moving forward and their statuses they can collaborate with other people you can see there's all sorts of complex functionality here this has all been built custom uh to support not just this industry but also to create this kind of unified working space that otherwise you know these users would maybe be using different tools cobbled together uh to get all of their work done we can see here in the workshop we're able to create you know invoices and things like that so this application also has you know custom calculators uh to track all of the the pricing of everything it can export files for the users this is a very powerful application with a lot of sophisticated features behind the scenes that make it easy for the users to move forward and and really be able to focus on their work our next showcase here is planned this is an application that helps users uh improve their Financial Health by exploring uh their transactions from different perspectives gather insights to help them make better uh financial decisions so I'm going to click through this little demo here so we can get a sense of you know the functionality here this application has an integration with plaid which allows you to pull in securely uh transactions from bank accounts credit cards savings accounts things like that um that way the application actually has data to work with it can output uh these scores it can you know break things down into different categories help the user understand where they're strong where they can uh you know bring some more attention to reach their finan cial goals there's a a task management system here to kind of keep all of these activities in one place there's a budgeting tools kind of present all of the information to the user be able to extract those insights uh yeah we have these comparisons here and this application also supports uh having clients or individuals meet with a coach a financial coach or maybe an advisor uh so that they can collaborate on this data and be able to make decisions from there we can see that this application has a a version that is specifically for those financial professionals um that they can then bring to their clients our next showcase here is zoi this is a cmms software that stands for computerized maintenance Management Systems uh this is specifically for um any kind of Maintenance system uh maintenance environment where you have work orders inventory preventative maintenance um technicians that might be uh going out to a job site and needs to keep track of all of the different tasks and statuses so here we have you know these custom forms that have been designed to take in important details to track everything preventative maintenance so that you have these sort of automated features to uh you know on a schedule send out reminders that you know this particular resource needs to have an update on it we have mobile maintenance you know any technicians that are on the go can update their statuses while they're out in the field inventory management lots of different functionality around these features you know uploading files uploading statuses um again a lot of collaboration between users as well this is very much an application that involves teams um so you have various assignments different views of all the data so that everybody's on the same page I also want to mention that all four of these applications are bringing in Revenue in some way or another so zoi here let's go over to their pricing page uh they're going off of a subscription system very common for applications three- tier system uh they can try it for free right there's a little trial there to get a taste of it really incentivize uh the interested party to uh get to know the different features make sure that it's right for them also have a demo application that you can tour um planned also has a subscription system I believe they have a premium model so they do have a free tier where you get access to um you know a basic set of features and then you can uh upgrade to get access to more features again very common system inario app has sort of a collection of different products um but if we take a look at their pricing page here kind of the the the primary offering here is also three tier subscription system as well as with a free trial ultimate book list is free to use as a visitor so the way that this app is actually bringing in Revenue I'm going to open up one of these book profiles here is there are affiliate links to the the the book on Amazon right so if I actually click through to the Amazon page for this book uh the owner of this application will get uh a bit back from that transaction so uh this way you know it really incentivizes creating a a large following uh of this application while still being able to support the operations behind the scenes and I will share that all four of those applications were built by clients that we've worked with personally uh we saw the very early stages of each of those applications we couldn't be more proud of their work all right now let's take a look at how bubble actually works what are the concepts what are the fundamentals uh that go into building an application there are four pillars to every bubble application no matter what type of app you build you will be moving between these four areas constantly throughout your development the first is the database the database needs to be structured it's going to be custom defined by you you are responsible for creating the tables the names of those tables the fields within those tables how the tables relate to one another there are a lot of decisions to make to structure the architecture and organization system of your data because your data again is going to power so much of how this application functions so database is the first pillar the second pillar is design what are your users going to see when they interact with your app and this is more than just the colors and the size of your text this also speaks to usability how friendly are your designs how easy is it for your users to navigate uh between all of the pages and understand where they need to go next in their flow the third pillar is workflow this is where you make the application come to life right so if I click on a button what instruction am I giving bubble to do from there are we sending an email are we modifying a database record am I calculating something or displaying something new within the design you know you can create quite robust functions and sequences of actions just from a single button click and it's up to you to put all of that logic together your logic may also be conditional right if the user is an admin versus a guest what can they do or see from here so much of this is dictated by the workflows that you build to essentially animate your application and the four pillar is workload this is going to speak to your app's performance workload is how bubble measures your application's activity and how heavy it is on the infrastructure behind the scenes um not all activity is made equal you know some operations are more lightweight than others but it is up to you to build the most efficient app you possibly can um that's going to help you have fast loading Pages it's going to make sure that you don't have a more expensive app uh behind the scenes so all four of these pillars are going to work together right and so you're going to constantly be moving between these areas as you make decisions around your data architecture the logic that you create in workflows how you design your pages how you populate things with Dynamic information that may change from user to user all while making sure things are scalable long term now I'm going to open up the editor to a bubble application that I'll actually be using to build out our mini app very soon here uh this is to introduce you to the interface there are many different screens to help you customize and configure your app um so I'm going to point out some of the bigger ones so that you know exactly where to get started this is the editor for a brand new bubble application on the Le hand side you're going to see seven different tabs these are all the different sections that are going to help you build out your app we're currently within the design tab this is your canvas for you to put together your front-end designs for your pages you can currently see that we're on the index page there are some other built-in Pages here you can also create new ones of course for example if I switch over to the reset password page this has been preconfigured by bubble and I can customize this if I Want It Go going back over to the index page you'll see that we have a blank canvas here so it's completely up to me on what I want to add to the page and how I want it to look on the left here we can see a big library of elements that I can add to the canvas for example I can choose a button add it to the page here and this property window that shows up will let me configure the button further the second tab is the workflow Tab and this is where you can make things happen in your application you need to have some kind of a trigger and bubble has a big library of triggers here let's say an element is clicked and it'll Auto Select our own element on the page right now that blue button and then I can add one or more actions there's an even bigger library of actions here account actions navigation data changes and more so if I wanted to click the button to send an email for example I can then configure that action further from there and note that I'm not writing any code in order to set up this Logic the data tab is the third tab in the editor here and this is a bit more involved there's actually five different subtabs to help you organize your database structure data types is where you set up your tables within the data type you can also set up all of the fields so for example I can add a custom field to create a first name field for the user a last name field a phone number a profile photo it's up to me to custom configure all of the different properties I want in my database under the Privacy tab I can set up what are called privacy rules this lets me create really granular control over access rights who can and cannot access data in my custom data structure the app data tab is actually where I see all of my records that are being added to the database so for example whenever a user signs up I'm going to see a new entry here in the user table with their email address the timestamp of when they were created and if there are any other custom fields that I had them submit then I would see that information show up here as well so this is where I can manage and view all of the data that's getting generated option sets are a fantastic uh capability here within bubble where you can manage a predetermined list of choices we'll be taking a closer look at this a little bit later in this video and the file manager is where you can manage anything that been uploaded to your application this is different from your application's data entries we're talking about PDFs csvs images any kind of file that needs to be uploaded from a device uh will be managed here and your application will come with a certain amount of file storage space uh available to you and you can always increase that if you want um you just need to modify your app plan uh to get that extra space the fourth tab here is Styles this is a really useful section to ensure you stay consistent throughout your entire application uh with all of the designs you can see that bubble has um many presets already done for you um for all of the standard elements so for example a drop down is going to have this border with that light gray color the placeholder is going to also be that light gray but you can modify this right you can customize away from whatever the presets are doing and you can also add your own styles styles are essentially presets for design so you're going to save yourself a lot of time again it'll ensure you stay consistent throughout the entire application and this is a huge performance helper um if you use Styles more than customizing every individual element in your canvas um independently you're definitely going to be using both but get into the habit of using Styles whenever you can this also has another section here called style variables where you can set up all of your commonly used colors um and even your application font so that wherever you are in your design you'll be able to have access to this uh pallet here uh for quick access plugins is the fifth tab here and this is where you're going to make manage any plugins you've installed to your app now obviously we're not seeing anything right now because this is a brand new application but I would get started by clicking on this blue button over here uh where it says add plugins this will pull open a window so that I can search the marketplace so for example if I search by the term email um this will show me any email related plug-in that's been published to the marketplace this could be connections to email marketing Services notifications email verifications analytics and so on you can see that on the left hand side there's a handful of filters to help you really narrow down your search you can filter by you know free plugins versus premium ones um and then these common categories as well so for example let's say that I wanted to install uh let's just pick one right here uh send grid marketing emails right if I click on install here I'm going to close this window now I have this one plugin added to my application from here depending on the plugin I might need to configure some general settings within this window but the there's going to be some descriptions and it'll also let me know exactly what I get from this plugin in this case I'm getting some additional workflow actions so that I can send emails through the srid system srid is a an external uh email service provider settings is our sixth tab here and you can see that there's a lot of subtabs that you can work through to further configure your application behind the scenes I'm going to call out just a few areas that are going to be most important when you're just getting started this first subtab here app plan is the summary of your application's um workload usage um and anything else that is going to contribute to to the cost of your app so you can see I'm currently on the free plan so I get you know 50,000 workload units I have up to 500 megabytes of file storage um we can see that I've Barely Used any of my workload units this is a brand new application I haven't uploaded any files this will also summarize plugins for me especially since uh some plugins can be paid so we're going to see a summary of what my app is costing me on a monthly basis over here so this is a nice summary so that you're never lost on what your bill is going to be the general tab here has some general settings around access to your application password protection things like that um and I want to point out that you'll see these green messages here where bubble will let you know if a specific feature is limited to a paid plan and not just that but also which plan tier so the password protection option here uh is uh you need to be on the starter plan this a first paid plan whereas the two-factor authentication feature you do need to be on the growth plan which is one level above starter so be mindful of those settings there and then you have domain and email which is where you can uh connect your application to a custom domain you do need to be on a pay plan for this as well um and that way you can wh label the URL once you have your domain in place you'll also be able to set up your your email so all of these other tabs are going to speak to very specific areas of the application behind the scenes that you will at some point want to go through all of them to make sure that everything is uh configured exactly how you want it the logs tab is where you're going to be able to monitor your application activity uh we will dig into this tab in a little bit more detail later on in this video but you'll find that in this app metric subtab we have some charts here so that we can see how much workload our application is consuming um on a monthly basis you can change the time frame to get you know more granular if you're trying to inspect something trying to optimize and really drill in right I can actually click through to this chart and it'll continue to break it down for me again I don't have very much activity in this app quite yet but we'll come back to this uh to see this uh with a bit more variety in here but this is all metrics um around usage in your application and this is an important section to be mindful of um as your app continues to grow so that you ensure you're building the most optimized application possible the server logs area is essentially a running log of every individual activity who triggered it what time everything happened what related records were involved um you get a lot of information here this is super helpful for troubleshooting if you're trying to figure something out um and whereas the app metrics is more of an ation on that activity all right so those are the seven sections of your editor I do want to call out one thing that can be very helpful to get in the habit of using when you're first getting started which is notes um I'm going to show you an example here within the data section see how there's a little comment icon next to the type name for this user table I'm going to open this up and you can see that I can write in a note this little panel opens up here for me so I'm going to say this is my first note for the user data type it's just an open-ended you know multi-line input here if I close this now you can see that that icon is um filled in letting me know that there is a note okay um so if I click on this I can get back to it let's go over to for example the Privacy area just to show you you're going to find this icon in multiple areas within your editor so here is um another icon for this Privacy Rule so I'm going to say here is some info okay we're going to close this let's go to one more section let's go to the design um let's add that button back to our page over here notice in the property editor I see that icon again so be on the lookout for this icon because you can add notes to almost anything throughout your entire editor here this is my note for the button and you see how in the upper right corner it's keeping track of all of my notes if I click on view all it will list them for me I can click on one of them it'll take me right to it so that's a handy way of kind of documenting internally um important notes that you want to keep in mind just things to remember especially if you're working with other people now that we're more familiar with with the interface I'm going to walk through in real time the creation of a sign up and login feature this way you can actually see how the database design and workflows all influence each other let's take a look so I'm also going to be modeling after this inspiration image here uh so that we can follow along you know if you're not super comfortable with design or if you're not really sure where to begin with your layouts it's always helpful to take a look at these inspiration sites to get some ideas um I'm on dribble dribble with 3bs um and I just search for generic term signup form to see patterns and Trends uh across modern you know signup form designs and one thing that really stood out to me was you know a lot of these have you know the form on one side and then the image on another side whether the image has a testimonial or some marketing text maybe some screenshots of the application um you know that's there's some differences there but layout wise that's what is uh being designed you know across many of these images here uh that left and right side so we're going to mimic this same uh approach here and I'm going to be using this as my example image um so we have something to follow along with so the first thing that I'm noticing is that there's a very clear 50/50 split um in this particular image uh with the left and right side and I also really like kind of the how this is rounded and I think what I want to do is uh have this entire design centered on my page rather than having it take up the entire page and I'm thinking about you know ultrawide monitors I don't really want things to be stretched out too much so I'm actually going to have one primary container to keep things centered on my page and then split that container into two okay this is one of the first things that you'll want to address is just kind of wireframing out your sections um so that everything falls on a grid so I'm going to add my first group to the the page here um this is group a let's rename it to let's call it group Main and I'm going to limit the width right you see how it's stretching out to the full width of the page I'm going to limit this with the max width of 1,000 pixels right so it's shorter now I'm also going to center it horizontally okay my page itself or my canvas is 1200 pixels so there's a 200 pixels extra um and now they're on either side of that that extra space is on either side of this group okay I'm also going to change the height of this main group uh let's get rid of this height to content and for now I think I'm going to Max it at 70% of the page just for now I might come back and change this um because I want to be able to see kind of the the boundaries of this group uh more easily to start uh let's actually send Center the group on the page let's go to the page level Center uh the items inside of it that's really just this one group here going over to the appearance tab I'm going to change the roundness to 20 I'm also going to give this a solid border like that right so now I have my primary container in the very middle of my page okay now this group is going to contain my left and right sides okay so I'm going to change this layout style to a row that means that everything inside of the group main kind of the first elements inside of it are going to stack horizontally and I want that to create my left and right side so I'm going to add another group this is going to be called group left like that and I'm going to change the uh width to max out at 50% right there's the left side and let's also uh vertically stretch the height of this group okay so there is my group left now I'm going to copy and paste to have a group right that's pretty much already set up I just need to rename this here group uh right's actually spell it correctly there we go group right all right so now we have our kind of wire framed sections for our content if I preview my page here I'm going to see that Center group I don't actually see the left and right side right now because they don't have any kind of background or anything yet but uh this is where my content's going to live okay so I'm actually going to um you know compare to this image here I also have an astronaut image they're looking the other way so I'm going to reverse the side so that they can actually be looking at the form uh so I'm going to change this group left to have a background image let's go to the background style image let's upload an image from my computer go over here this great and note that there's now a URL here this is actually pointing to where the file lives in my applications file storage if we jump over to the data tab under the file manager you can see there is the image um that has been uploaded to my app all right now you can make other adjustments to the image here you have a few different settings I think what I want to do is Center this so that I have a bit more negative space here to add some text if we look at our inspiration image got some white text here with a quote so I kind of want to do something similar um let's get that text in there now actually so I'm going to add a text element to this group uh notice how it kind of uh Auto positioned itself to the upper left corner that's because my left group is a column layout so um uh it's going to start at the top and also more specifically really that it's top aligned um so I'm going to move this so that it is bottom aligned and at the text level I'm going to have it horizontally Place itself to the right um of its container so it's over here now in the bottom right corner um let's actually change some appearance properties so we can see the text let's make this white going to make it a bit bigger let's go with 24 pixels and I'm also going to uh change the actual content this is sample text for the featured image like that you can also you know type in your own uh numbers here you don't you're not just limited to what you see in that dropdown all right so we have some text here I kind of want this to be raised a bit so I'm actually going to go into uh the layout settings for this text and create some uh margins so maybe let's say 70 pixels of margin to push it uh up and then on the right side perhaps 20 pixels to push it over I'm noticing that the text is left aligned within the boundaries of the text element so I'm going to come over here and right align it okay so that's a little closer to what I want right that's good enough for now okay so now let's go over to the right side let's take a look at our inspiration image see what we have here we have this sort of header um I've got some primary text subtext you know login button some inputs everything here is falling in a column you know what I think I want to do is actually take this header and actually move it out of the kind of Center container and make it more of a page header top the uh the the the top of the screen here um that way it can be a little bit more uniform with later on in other areas of my application there's always going to be kind of a top header expanding the full width of the screen so I'm going to add a group uh that is going to sit on the top and and outside of this main container we're going to call this group header okay now I want to call out a couple things notice how this group is uh you know further down it's not actually at the top of the page and um it's very close to the the uh the main container there's there's no separation so that's because at the page level I had centered um the content within it I'm going to change this back to top a line like this and I'm going to add some Gap spacing to create some separation let's do maybe 100 pixels to push that down a bit I'm also going to change the height of the group header to at least 50 pixels just to give it a bit more room okay and now you can see you know because this is outside of that primary group you know the width of this is different it's got uh it's able to stretch out the full size of the page and we can fine-tune this further as we develop the application further but this is for now how I want to leave things so I'm going to add some text inside uh to you know be a placeholder for my app name right app name goes there let's make this bold we're going to make it a bit bigger all right and we'll also uh Center this I believe I want my group header to be a row okay so that everything inside of it Stacks horizontally I don't want anything stacking vertically this way now that it's a row I can Center this vertically inside of that um and we have a drop down for the language uh they've got a little flag in there you can definitely get that design I'm going to keep this a bit simpler here I'm just going to use a standard drop down element where I can display the text here but you you can definitely custom create uh your own dropdown with images as well um so I'm going to add just a couple of choices English French Spanish something like this this we'll have it default to English and I'm going to remove the placeholder um I do see that there is you know this border around it there's a lot of roundness there um so let's create roundness of 20 pixels and it's already got one of our preset style colors or style variables there so I'm going to leave that as is I do want to make it a bit taller so I'm going to come into the layout um give this a height of let's say 40 pixels okay and we're also going to Center this in the group and you see how they're hugging each other they're right next to each other I want to separate them I actually want the app name to stay there with a bit of space on the Le hand side and then I want the drop down to go all the way to the right so I'm going to go back to the header group and I'm going to select this other alignment style here where they're spaced out um right they go to the very edges anything else that gets added to this group will just be evenly distributed inside now I also want to add some padding to this header so I'm going to add let's say 20 pixels on either end right just so that it pushes them in a touch okay so now let's refresh the page just to see where we're at here with our design right now we've created this sort of you know um header frame that can carry over to the rest of the application we could have navigation up at the top you know menus things like that all right so I'm going to move on from here right there's our drop down with our languages I noticed that um we have some conflicting corners and uh with the uh roundness of that main group right you see the roundness here but the image it has some hard Corners here there's no roundness on that image so I'm going to come back into my group left go into the appearance and I'm only going to modify the roundness of this group on the left side so I'm going to Define each border independently let's change the uh top left to 20 and also the bottom left to 20 right there now we have U did I do it let's see I didn't actually select it there it is um now we actually have more seamless uh presentation of that image let's refresh the uh preview here there we go that's a lot better I think I want to lower this text just a little bit um I'm going to take down that bottom margin to maybe 60 pixels just a little bit again we you know I could spend all day fine-tuning this here and this is something that you want to be very careful with and and I'm definitely uh guilty of this is you know when you're first getting started do not spend too much time making everything Pixel Perfect because you know you can always make tweaks here and there your priority should really be on getting functioning features you need to get those things to work so if it means keeping things a little simpler to start so that you can get to the workflow part the actual logic part you know do that uh you you will always be able to fine-tune and make things pretty but if it if it doesn't work it doesn't matter how good it looks right so your priority should always be on getting your your features functioning all right so now let's take a look at the right side um in this case over here it's the left side so we have a primary text and a subtext um there's a little bit of spacing I can see there's more spacing between these items so we're going to have several containers here uh to control spacing just a bit um let me add a group you'll see that I'm constantly going to group elements to control my sections um so we're going to call this primary uh and sub uh just for my primary text and my subtext okay you Al also notice that I'm labeling everything as I go that makes a world of difference um when you are designing a page especially when that's going to have a lot of visual elements you don't ever want to get yourself lost or mixing things up that can have a big ripple effect um you know especially once you get workflows in in play here okay so this is going to main my two texts so let's add the first text in here um what are we saying this is saying hi there cool so we'll say hi there it's going to be nice and big like this right now this is one of those things where you definitely want to take advantage of your Styles because um you know they're there for a reason they're there to help you just in a single click um uh apply you know sizing colors uh any other visual appearance properties without you having to select them over and over and over again especially if you're you know creating a lot of different elements um with the same styling okay um I think I want to do yeah we'll we'll we'll leave that there as is so um we're going to use that heading one style for this text I'm just going to center it and I'm going to copy and paste to create another text I'm using my keyboard shortcuts for that contrl c contrl v and uh our subtext says welcome to the app welcome to the app we're happy here here okay and we're going to change the heading style to the smaller one here um I think I actually want to do one that's not as bold let me see if I have anything like that I don't think I do let me change this back to heading six I'm going to actually uh override this so that it doesn't have as heavy of um you know the the The Styling there I'm taking down the weight of that text there we go now this group I'm going to add some spacing between those texts they're a little bit too close together so so at the group level I'm going to add Gap spacing um let's say 10 pixels apart just to separate them a little bit okay now I'm also going to um I'm just going to copy this group uh just to kind of serve as a little template here for my next thing which is the actual uh form I believe I think I want everything here in this next form yes yes I'm going to have the button this or text as well as my inputs so we're going to rename this group to group form and I noticed that the SE ation there is a little bit more so I'm going to change the Gap spacing here to 20 pixels so that they're spaced out a bit more um also at the group right level notice that these two inner groups are right next to each other let's also add some Gap spacing there um we'll do 20 pixels as well okay so first thing we have is our um our login with Google button okay so I'm going to add a button here I can get rid of this text now um here and this is going to say log in with Google and this button is going to be an icon and label and I'm going to change the icon uh to a Google icon right there uh we're also going to change the appearance of this here I'm just going to override everything but this would be another use case to set up a style for a button um I'm going to actually get rid of the background color uh and we'll just have the text be colored here as well as the icon on with one of my color variables like this all right I'm also going to have a roundness I'm going to do a 10 10 roundness rather than 20 just a little bit more subtle here and uh let's see where we're at do we have a border color let's add this uh solid color our same text variable Right is coming along there now notice in the inspiration design here the width of the button as well as the inputs and the login button here they're all um even right even just kind of the how far the the primary text here is going um I'm going to I'm going to replicate this as well so that we have that consistency there so this button first of all I'm going to remove the fit width to content I don't want it actually to be as wide as the content inside of it I want it to stretch as far as it can um within its container so it's its most immediate container is the thing that's going to stop it okay in that case it's this group form which its parent is group right right so everything kind of trickles uh in terms of uh widths and Heights as well now I don't want this hugging the very edge of group right so what I'm actually going to do is take group right and create some padding this way I don't have to add individual margins to every single thing inside of this group The padding will just kind of take care of everything inside of it so I'm going to add uh let's do maybe 40 pixels oops 40 pixels on either side uh to kind of push that in just a little bit more right you see that shading there that's bubble showing me where the padding is okay so we've got our group now I'm going to add um some text here so that we can do that or text and I think I want this text moved inside of my group notice how I'm picking it up and I can move things around inside the elements tree here I can drag and drop I can also drag and drop here um I can also use this next previous to shift their position all right so this is going to be my or text and I'm actually going to change this to my normal body style I'm also going to add two shapes what I'm trying to do here is replicate this design here shape or shape that's what we're doing so I'm going to have two shapes uh let's say a little lot more narrow in terms of its height there there two pixels I'm just going to copy this I'm going to grab from here it's hard to kind of right click on that when it's very very tiny and then grab it from here paste okay so you see because the shape or shape are all inside of this group form which is set up as a column I now need to create another group to separate them off as their own row this is something you're going to do a lot is using containers to help you mix and match your your rows and columns in your grid so I'm going to multi- select um the two shapes as well as the or I'm just holding down my shift key and I'm going to right click and group them all in a new row container it's kind of a shortcut doing it that way um and now I'm going to Center them all let's open up the elements tree this is kind of easier way to select everything so the shape is going to be centered or is going to be centered and shape B is also going to be centered and at the new row level this new group level here I'm going to Center them um you know within that group there and I can add some Gap spacing let's do maybe 10 pixels to separate them just like that okay so now I've created this uh similar design here let's refresh the page and see where we're at um with that kind of separation between our social login and then our inputs are going to go down below all right one thing I'm noticing is that we're kind of close to the edges up there at the top um of the group I think I want to come back to my group right and also uh create 40 pixels of padding in the top and the bottom right so we can push all of that in I think that's going to be a little bit more comfortable for us I think I also want to um increase the row Gap spacing between my primary texts up here and then the form down below so I've added 40 pixels there maybe 50 will be obviously I'm eyeballing everything but uh just trying to kind of you know you know as you make these tweaks and stuff you you'll probably go back and forth um to adjust these different settings but just know where the key is to know you know where you want to make those changes um so that you can have uh the biggest effect with the least uh you know properties being adjusted there are many ways to um accomplish the same design some are more cumbersome than others you know I could have added margins to every single individual element but that's a lot of clicking it's a lot of uh you know there's room for error when you do that so by going to the outer containers and forcing this consistent spacing through the padding I now don't have to worry about you know setting up left and right margins on the button as well as this text and as well as this text things like that okay so now let's move into adding our inputs so I'm going to add a single line input here I'm just searching through my U my assets and I'm going to just kind of drop this in here and then I can reposition this after the or group uh this input uh let's see what is the height of our button that's 50 pixels let's actually fix this to 50 pixels tall that way my inputs can also be a fixed 50 pixels we're going to remove the width so that it expands to the same width as everything else I don't need this minimum in here all right so this input is going to be for the email address so I'll type in a placeholder so the user can know what to type in there we're going to tell bubble that this is an email format there's some special properties around email so it's good to let bubble know that I'm also going to copy and paste this input now I can set up my password password input and password format all right and then we can add our button for the login so I think is that the next item oh no we have our forgot password Here let me add another text I'm going to grab this text here uh actually we'll grab this one to kick us off so this one's going to say for got password question mark all right going to go into the layout and have it right aligned horizontally um also change the color so that it stands out a little bit maybe we change the weight um to slightly heavier weight again all right and now I'm going to grab this button copy and paste it down below so that we have our login so this is not going to be an icon and label it's just going to be the label to log into the application um in our inspiration image the this is more of a you know heavier accent color on the button to really call that out as a primary action so I'm going to do the same thing let's change the background style to our flat color with our darker text color variable and the label itself will return back to White here okay let's preview something I know I'm already noticing something happening here which is the height of the right side is um uh not expanding with the content within it so uh we can make that correction I believe this has to do with the fact fact that I set the uh main container to 70% so now we're going to update that so it can actually fit to content a little bit better but it looks like things are coming along here all right so let's go back to group main going to go to the layout and I'm going to now remove this Max height setting and we'll have this fit to content okay so now it's just going to be as tall as it needs to be to fit everything inside of it so that should be more comfortable for us here there we go cool all right I think we have one more element here which is don't have an account sign up okay so I'm going to copy this text down below we're going to Center this here don't have an account sign up and because this is one single text you know in your one color will apply to the whole thing notice that they've got a split color here what I'm going to do is come into the Rich Text Editor um actually let me change the uh primary color to me move this down here uh to this darker text variable and then I'm going to open up the Rich Text Editor and highlight the line up and override the color just for that highlighted part like that um and then I get that same effect now I could have used two separate texts and put them in a row group you know similar how I did a row group here and then be able to control their colors separately that way that that would have been perfectly fine too okay um so I believe we have now created replicated this login form yep right pretty much obviously you know we can fine-tune things like you know the colors and stuff when you hover over um any other spacing and things but here we go all right so what I'm going to do now is create the sign up form and then we can uh connect the logic so that the accounts are created and we can actually log in we're not going to hook up the Google form um or the Google flow uh just because that requires an integration you can absolutely accomplish that um but we're going to stick with the email and password uh for this demonstration here so because I already have a group that has you know a lot of the components I'm going to need for the sign up I'm going to copy and paste this and I'm going to rename this group to group log in okay and this is going to be my default group and we're going to have some logic here so that the user can switch back and forth between the two so I'm going to take the entire group I'm going to copy this and I'm going to select the right group so that when I pasted it pastes inside and paste it here okay so I'm never going to see them both at the same time but in my canvas obviously you know I can show them both at the same time if I want to edit them uh by looking at them both here now my copy I'm going to rename this to group sign up all right so what adjustments do I need to make to the sign up Group Well I would also want to offer the ability to sign up with Google so I'm going to change the uh the the label here to say sign up and I want to make sure that yes Buton uh bubble automatically renamed my button so that I don't mix them up here in the workflows and then here now I have two email address inputs and two password inputs um I'm going to rename them very important again so you don't mix things up in your workflows so I'm going to call this login for the email and same thing for the password this is login and down below for sign up sign up and for password we have our sign up and for the sign up specifically I'm also going to add an additional password input so that they can confirm um and you know we don't run into any typo mistakes there so let's go back up here going to move this over and we're going to call this input password confirm uh this is for the signup form all right so this is also going to be set up as a password format and I'm just going to change the placeholder to say confirm password that way the user actually knows you know why is there a second one they know what to do there right we do not need the forgot password for the signup form and uh this button is going to say sign up you know and then uh down below we're going to change this wording here let me open up the Rich Text uh actually let me do it from the text box I think this is easier uh so here we'll say already have an account and then our text will say login so this is just going to be the reverse so that they go back to the login form log in like that okay so now we have our two groups for our two functions so now we're going to move into actual functionality here let's start with just like switching back and forth between the two groups I'm going to take the signup group going to go into the layout and I'm going to turn off this setting here I do not want it to be visible on page load Okay so the login group is the only thing that's visible on page load as we see right here notice that there's now this extra white space because of that group that's hidden and it's taking up that space I can correct that by collapsing the height uh basically collapsing the entire dimensions of that element when it's hidden which it is right now right it's not visible on page load so let's refresh this okay that way we don't have that extra white space I also want to make sure that you know when I'm on that other group that this doesn't create extra white space so let's go over to the sign up group I'm going to do the same thing collapse when hidden but I'm going to leave this checkbox checked for the the login uh so that it is visible on page load this is my default group so now I'm going to hook up a workflow for these texts when the user clicks on don't have an account I want to hide this group and show this group so we're going to add a workflow right when this text is clicked I'm going to go to element actions and I'm going to hide the login group so here's where you know the labeling is very help ful uh this is my group login and I want to show the sign up group right here okay and we're going to do the reverse uh with the other text so I can help myself by copying this event and pasting it and just swapping out the elements so I'm going to search for my text already have an account that's going to hide the signup group and show the login group right you'll get more comfortable with those little shortcuts and you know copying and pasting things swapping things out to help you move a lot faster so let's refresh the page here okay so we have our login group click on this now we have our signup group click on this again it switches back and we can tell because the wording is changing right the signup group has that extra input you notice what's happening the image is uh resizing itself a little bit and that's because it's adapting to the height of the overall container here because our signup group has an extra input it's a little bit taller and therefore the image is resizing itself so that you know it's proportional we don't have any Distortion of the image um that's just kind of happening automatically all right so now let's set up the actual workflow for signing up I think I want to do that one first email password confirm password so we're going to go to the sign up button at a workflow and we're going to go to an account action called sign the user up bubble is going to ask for some required values to be filled in here we can see they're required because they're highlighted in red we also can see that there are two issues that are coming up in this issue Checker um it's very helpful tool here to make sure that you're configuring things technically uh correctly right this is bubble doesn't know what you're building so it's not going to know you know uh uh any specific visuals that you want um or specific values but because we've added a signup action it's only going to work if I fill in the email and password Fields because those are required um so that's why bubble is uh kind of letting me know hey don't forget to fill those in all right so for the email we're going to map the value of the email address input the signup version right um to this particular setting here so the inputs value I'm going to do the same thing for the password and I can search for my inputs uh to narrow those down input password sign up right got to be careful not to mix these up here um signups value I'm mapping those values to these fields so that bubble knows uh to save those values to the right place in the user account now from here I can do a lot of other things I'm not going to address these right now but you know you can uh you can actually we are going to use this one you can send an email to confirm uh make sure that they actually own the account they'll have to click on a link um that way bubble can internally confirm them you can also adjust other values for the user um when you set up uh custom Fields within the user you can say for example their name their photo it also doesn't have to happen in this one action you can come back later and and modify the existing user record to save other detail so you could have for example a multi-step creation process for now we're keeping this simple we're just going to do the bare minimum email and password and we're also going to go ahead with the password confirmation so I'm going to insert the input password confirm right and put that value map it to that setting there all right now after the sign up has occurred I do want to let the user know that it worked um you know without anything else happening here it's going to look like really nothing went through for the user we need to give them some some sort of visual cue so I'm going to do two things first is I'm going to reset the input that's going to clear out all inputs that are involved in this workflow the second thing I'm going to do is add a little alert message okay um we're going to say this alert message is at the top of the screen I'm going to position this to the Top This is a special type of element that is hidden by default and is only shown through a workflow action um I'm going to make sure that the background of this is fully opaque like this and we'll change the um just changing the styling of this a little bit uh font color to white so that we can actually see it and I think I want to have the background color match that text here all right so I'm going to say um you are signed up we'll probably come back here and make an adjustment as we go later uh with our the rest of our mini app but for now this is just a visual cue um to let the user know that this was successful so in the workflow I want to add another action under element actions I can show that alert message and uh you see here that here's the timing that I can control for that alert it's going to take half a second to fade in it'll stay on the page for two seconds and half a second to fade out all right so let's test this out let's actually sign up a user now so I'm going to switch over to my sign up form and I'm going to say Jane sample.com and put in a password test test sign up all right we see a progress bar going there's my alert and I can also see that all of my inputs have disappeared or the values have disappeared so they were all cleared out so if I go back into my app data for my user table there's my brand new user that was created I'm never going to see a user's password Here bubble encrypts that it keeps it away from you um but we do see the email address okay um now uh I also want to hook up the login form okay so let's go over to uh the login button here we're going to start a new workflow and very similar to the sign up we'll choose the login action and we have to provide an email and a password so that bubble can go check the credentials make sure they're correct and mark them as logged in uh so here we're going to insert the email logins value and here we will map the password logins value same thing I also want to reset the inputs just to let them know um and let's go ahead and show the alert message as well you know ideally you're probably redirecting them navigating them to a different page again for now we're just going to show an alert meage message so I'm going to actually change the message because the alert element is designed the exact same way I want it rather than having two elements I'm going to use the same one but override the message to say you are logged in like that okay so let's test out that login so here I can do Jan sample.com test log in now I'm logged in if I try to log in as a user that doesn't exist let's say John sample.com and some password log in I'm getting a system message that's saying hey we can't find an account uh with those credentials all right there we have it now we have a functioning signup form and login form so that uh moving forward from here with our mini app we can actually run things as a proper user all right so now that we have a sign up in login feature I'm going to build off of that and move into my mini application I'm going to be building a time tracking tool for an individual the user will log into the system they'll be able to manage clients projects and add time entries for each of those projects that way the application can keep track of how much time they've spent and then they can send an invoice to the client so that they can get paid so we're going to start with data structure because so many features are driven by data you want to make sure that you have the right fields in place relationships between records um basically all that architecture to work off of many of your designs and your logic are going to need to reference your data types and Fields anyway so it's a good idea to come in here and organize uh your data needs as as much as possible you know this isn't uh kind of a oneandone thing you'll always be able to come back in here and make adjustments as you go that's very expected you certainly can't anticipate everything you need from the beginning um but give it your best shot uh because it'll allow you to uh move in a more efficient manner throughout development so what I'm going to do is I'm going to start by creating all the different data types um that I know I want for this mini application we've already got the built-in user type um I'm going to create a new type for project okay I'm also going to create a type for client as well as one for invoice these are the main data items that I want my application to work with and A good rule of thumb is if you think of all the important nouns that you would encounter when you're describing user flows um that's usually a good sign that you want a separate table for it right my users will log in they will be able to manage clients and set up projects for each client um they're going to be a creating time entries that's another one here time entry uh to uh each project to be able to send an invoice to the client right generally if you can think of those important nouns uh that way you can organize your your tables properly now once you've created your data types you can go in and set up the fields within those types so for example for our user maybe we want to collect a first name from them and this would be a generic text value okay so you're going to define the format of the field okay so we'll create the first name field uh we might want a last name this is also a text you can filter it down by searching this way and let's also say we have a profile photo profile photo this will be an image for the format of this value okay image right here right so it is up to you to set up the fields and the proper format the format does matter because that's going to dictate kind of what operations are available in some cases what visual elements uh you can use to reference these things you can always come back in here and change the labels of your Fields just like you can with the data types The Only Exception is the user type is built in you can't change the name of it nor can you delete uh this data type here okay so let's do some similar things here with our uh other data types so our client is just a standalone table you can kind of think of it as uh you know creating a CRM um so we want the client's first name which is a text client's last name also a text uh let's say that we want to capture the client's email address right these are not people who are logging in they're more of it's a directory an an address book for ourselves this is again a text here uh maybe a phone number for the client okay phone number and phone number you'd think that it's a number but um you know you don't do math with phone numbers and that's really what you want to reserve the number type uh for so the text is is really all you need you know there are different formatting for phone numbers International numbers codes you know the plus uh character things like that so A text is going to be most appropriate for that one okay so some basic information to store for the client now for the project we might want to have a project name okay so this is going to be a text these are values that are describing uh that project uh we want to have a project deadline for example say deadline this is going to be a date like that um we'll also want to have a project status now this is a good use case for an option set okay so I'm going to switch over to this tab here I'm going to skip over the guided setup I'm just going to uh click that button right there and I'm going to set up my first option set which I'm going to call project status okay and an option set is a way for you to manage a list of predetermined choices these are not choices that your users can control um but it's a list of choices that you'll likely need to reference multiple times throughout your design and your logic so I'm I'm probably going to need to work with this status in many ways right to display it to the user in a table for example Maybe to reference in order to create conditions uh you know maybe show something that is archived versus active um or you know have a workflow go down a certain path based on the status so I know I'm going to reference this multiple times so I want to create a shortcut this is kind of like a reusable uh type of uh data element uh where I'm always going to be consistent with the different status values so let's say uh projects can be in a draft status um active maybe archived so now that we have this option set created we can go back to the data type for the project type and create a new field called status and the field type is going to be that option set that I just generated right that I called project status now one thing that I like to do actually for option sets I actually like to give the name a prefix OS so that it's easier to identify you know throughout your design that this is referring to an option set and it's not just you know a data type or a field or anything so now that I've added that OS there you can actually see more clearly that this is an option set value right with for any given project the status field is going to be one of these three choices that I created here and when you go to create a field you can see that OS there I I personally like that to be able to identify option sets separate from your data types more easily okay um now the project is always going to be tied to a client so here's another uh kind of special type of field format um we're going to create a new field called related client uh this is another kind of tip uh where you know having some prefix some indicator that your field is going to be a relationship to another record okay the field type here is not going to be a text the value for this field is not the client's name instead it's going to be a reference to a client record so here I'm actually choosing the client a data type and that tells bubble that the value of this field is a reference to client record through the project and through this particular field I will be able to get access to all of the values within the client not just their name not just their email but the entire object right the entire record here so that relationship is really important now I could go over to the client's side and create the relationship on the other end if I wanted I could have um here related projects plural right because a client could have more than one the type being project to be linked to a project record and marking this as a list so that we know that this field can have more than one project this is a one to many relationship whereas this is a one to one relationship now the nature of your application and the amount of data that you're dealing with is going to help you make decisions on whether it's necessary uh to create this list field you want to be careful with list Fields because you don't want to have a list that has thousands and thousands of items it uh it increases the overall size of the record um and really the onetoone relationship is all we need so we don't want to create some inefficiencies here technically bubble will allow you to save up to 10,000 items in a single list field for any given record you don't really want to be anywhere near that I've never found uh you know a use case where you're getting huge benefits out of a very very large list usually uh you know if that's happening you probably need to break things down differently in the rest of your data structure so there's a lot of strategy around you know where things are saved how you create relationships but just pointing out here that at the moment we're going to have a two-way relationship between our project and our client now coming over to our time entry uh we're going to have several Fields here to keep track of time spent so uh we're going to have well first of all the related projects so we know you know which which project we've been working on uh whoops this is going to be related project like this I don't necessarily need to relate this to the client as well um you know as long as I have a relationship to the project I therefore have a relationship to the client um you know again another kind of strategy point in some in some uh use cases it may be helpful to be a little bit redundant there to create some shortcuts uh you know uh more efficient Pathways to information it just depends on the types of features and functionality You're Building uh and the logic you need but I'm going to leave it with just the relationship to the project I'm also going to have a uh start time field for when the time entry has begun and this is going to be a date uh value dates will record both dates and times now you can manipulate dates and times in many different ways where maybe you're only working with the date component only the time component uh but technically we're going to have a date and a time here even though the name of my label is start time um we're going to have end time for the other side of things this is also going to be a date format just like that uh let's see we're also going to have a calculated uh value that we'll we'll calculate through the workflows um Bubble doesn't have field types that are calculations right the setting up a field type as a any kind of like an automated thing that doesn't exist here um any calculated value would have to happen through a workflow and you can save that calculated value um to the data record so I'm leaving room for that uh so we're going to have a calculated duration and this is going to be uh let's say that this is a number we're going to say duration in minutes okay so we'll normalize any difference between start and end to minutes okay uh let's do one more thing here let's say that the user has a rate right an hourly rate for how much they want to charge uh this is going to be a number and I'm notice that I'm saving this at the user level right because the rate really describes the user um it could be that the user wants to uh provide a different rate per client or even per project so this is just a matter of you know what you want your app to do and and and that can help dictate where it's most appropriate to save certain Fields if I want the user to be able to change rates per client or per project then it would actually be more appropriate to save the rate at that level because if every Project's going to have a different rate I need to look at the project not the user but if I have like a standard rate then then I want to save that at the user level so that no matter what project no matter what client we can always go back to the user to find that standard rate I could also have a mix right in some cases the the standard rate could be the default unless you know specifically uh given uh for a project I want to provide a different rate for that okay so these are just they're decisions that are are going to be dependent on what you want the application to do now given that there is a rate somewhere uh the time entry can also calculate the cost um of that entry right how much uh do we are we going to earn from this time spent on the project based on the rate and the duration so this would be another calculation that we would do in a workflow so I'm going to call this calculated cost and this is going to be a number for that okay now let's go over to the invoice so the invoice is kind of joining a lot of these things together so we're going to invoice the client so I'm going to say related client so we know who to send the invoice to like this um I also want to have all of the time entries that I want to add to the invoice so this is going to be a uh related time entries plural this is going to be a list and you know maybe an invoice has one maybe it has more than one but I want to allow for multiple so uh that's why we're making this list here so this is going to be related to my time entry type just like that and maybe some other fields to help me sort of summarize everything within the invoice so total duration uh like this in minutes note that you know you know typically with with uh time tracking and you know invoicing clients on projects we're probably going to be exceeding 60 minutes it's likely going to be hours but by normalizing everything to a smaller unit um I can uh I can standardize everything behind the scenes that my calculations are a lot easier just because it's in minute in the database right it's in that format doesn't mean that it's always going to be in minutes in the design I can reformat things for the front and design so that it's more friendly it's easier to understand I can convert it to hours if I want um on the front end so again another piece of strategy here is just to think about like what's going to be the easiest format and structure for the entire application um so that you're not having to do as much math or as much converting overall uh so here we're going to do number for total duration and I'm also going to say total cost like this and this is going to be another number so this would be the sum of all of the individual cost values uh for each individual time entry all right so that total cost is essentially the amount that we're invoicing the client um we could also have uh an invoice status let's actually create another option set here statuses are common use cases for option sets so I'm going to say uh OS invoice status it's a new set and let's create some status some sample statuses here uh let's do a draft invoice um sent invoice paid um void right common statuses that invoices can be in and then go back to our data type and set up a new field that can now tie itself to one of those choices uh so we'll say status here we'll link this to the invoice status right so any one invoice could be one of these different uh values there we can also collect other details such as you know when we sent the invoice because the creation of the invoice which would typically default to a draft status um may not be you know it's likely not going to be the exact same date and time as when it was sent to the client so it could be helpful to know you know hey it's been this long since the client has had it and it's not been paid for example um so sent timestamp is what we can call this field here and this would be a date so when the invoice is first created right and let's say we want to default all new invoices to the draft status uh this would ensure that bubble saves that value you know automatically um and it can be changed that uh the this value will be empty to start and that's okay it's okay if it's empty it's only when uh we actually trigger the workflow to send an email with a file things like that uh would we then update this field to s timestamp that that precise date and time so we know and then you can design things on the front end to calculate the difference between this date and the current date and time right the present date and time to know how how much time has passed for that okay so if you notice that what we're doing here is we're not working with any specific data entry what we're doing is setting up the structure um of all of our tables the fields are actually columns in a table if you look at um our app data here and we go over to uh let's do the let's do the clients as a simple example notice that you know we've sort of transposed everything right every field that we defined for the client is now a column header so if you're more familiar with you know traditional um spreadsheet designs things like this right every row is going to represent a different client and every client's going to have an email first last name and so on so we're trying to structure the column headers of our table per data type once you have this structure set up you can technically also create records manually now most of the time for you know especially for the type of app we're building here we're going to want everything to be generated through our workflows through the you know designs that we're creating on the front end but you as the admin actually have control over these tables as well so I can come in here and manually create a new client now that my structure is set up so I can call this client sample.com um we can say client Smith like this we'll create a phone number and we'll create it without any projects no slug or anything here right so now I have a manual entry for my first client um in my database if I want to go over and create a new project uh here okay I can set up a project tied to that new client let me actually change the search field this the kind of lookup field uh for the client record I want to search by the email address for the client okay so setting up a new project I'm going to link it to my client record and we're going to call this project ABC we'll give it a deadline of let's say January 1st 2025 at noon and we'll say that this is an active project okay so we'll create that there okay so now I have a new project record that I've created manually again this is not generally anything that's that you know that's going to be powering your app you're usually going to have your user who's logged in triggering workflows within designs to create records dynamically and pull in values dynamically uh but now that I have uh this Dynamic record I can see how those values would start to fill in my tables um from this perspective here this is a relationship right the related client so I can click to view the related entry it'll show that popup for me so it gives me some context there I want to point out one other area here which is the Privacy tab now that I have data type set up I can set up privacy rules to ensure that the only data I could ever possibly see when I'm logged into this app is data that belongs to me so uh for example under the project data type I'm going to create a new rule here called owner okay and I'm going to create a rule that basically says I'm only allowed to Access Project records in the system that I created so when this Pro projects Creator this is a built-in field bubble will record uh the user that generated the record for every single data type okay so when this Project's Creator is the current user then I'm going to allow that user to view the details of the project in question right this is set up for the project specifically so they can view all of the fields within it they can find that project in searches they can view any files that are attached U this is related to creating private file access whereas anyone who falls out side of that rule cannot access so this is where you'd want to intentionally deselect I always like to create privacy rules so that you give access and then the everyone else default permission is uh going to prevent the user from accessing okay as long as the projects Creator is the current user then they can access that project detail and you can set this up with all of your data types and you can get really specific with uh your Expressions it just depends on the fields that you've set up in your structure here because you're essentially doing compar comparisons of values of those fields so is the Project's Creator the current user we're comparing two users with one another Creator is one user current user is another user so if they're the same then we're going to give access because that tells us that okay the current user is actually the owner of this project and that's why I labeled it this way right and you can actually create multiple rules so if you have an application that has uh different levels of permission different user rules right here's the rule for the admin here's the rule for the employee here's the rule for the guest uh you know so you can give people maybe uh search access but maybe they can't actually view all of the fields uh within that record maybe they can only view the name and the deadline but no other details for example right so you can get very specific it's a powerful area that allows you to create Global access rights these are going to apply to the entire application if somebody Falls outside of this you know those projects that they can't have access to they will never show up in a search result um right they they you know they won't be able to access it by uh you know manipulating any code behind the scenes in the browser it is a it is quite important for you to create these server side restrictions so that users cannot get access to your data very very important here um especially if you have an application that where users are creating their own data and that information needs to be separated from one another uh which is the case in this example here some other user that has their own set of projects their own set of clients you know we don't want those items to bleed within uh the others uh dashboard in their own experience they should only be able to see the stuff that they've created all right so now that we have the data structure in place now we're going to wireframe the front and design we're just going to start by creating the pages we need in the app and setting up a global menu system let's take a look all right so the first thing I'm going to do is set up a new page to get started with my wireframes I'm going to click on add a new page um we're going to start with our client's page right so the user can manage their clients and I'm actually going to clone this page from the index because there's some components that the index has that I want to keep uh that that way I can save myself a couple of clicks you know I don't have to set them all up all over again uh so let's click on create here okay so my client's page is getting created so we can see now this is my custom page here and it's essentially a copy of the index so I'm going to make some adjustments to make it more appropriate for the client's page here I'm going to get rid of the left group the right group and I'm going to be left with just this main group now I want the styling of my inner Pages uh to be a little bit different from the index first thing I'm going to do is I'm going to change the background color of the page itself to um a lighter gray and then I'm going to give my main group a background color of white just to create a subtle separation of background and foreground I'm also going to um remove the roundness I'm also going to remove the border that color separation is enough for me to see that you know that difference there and really the boundaries uh and the space that that group is taking um let's also remove the fit height to content so there's my group also going to go to the page and reduce the Gap spacing uh a little bit let's change it down to 20 pixels okay so I have my header at the top and then my primary container for my content to live within here and this is uh really going to be kind of the the framework for all of my pages so there is consistency throughout the entire application everything is uh uh very familiar for the user no matter what screen they're on okay this header uh I'm also going to give this one a background color of white and we're going to add some menu items here so that we create a a navigation system so let me add a new text um to this group we're going to call this clients this will be our first menu item now I actually want this to be a lot closer to the app name I I don't actually want it you know in the middle of this here and as I add more menu items they're just going to be spaced out throughout the entire uh group and I don't really want them I I actually want it to be closer to the left side so I'm going to multi- select the app name as well as this first menu item and I'm going to group it in a new row this way I have more control over the spacing between those elements right and then this second group that I've created um I can have this fit to content so that we can see you know again within the header which is defining the that padding on the left and right side the header is set up to uh align things with space between the outermost elements so in this case now the outermost element is the overall Group which is on the left side and then the other outermost is the drop down which is is going to stay on the right side but now that I have this group I can fine-tune things within it so I can add some Gap spacing here let's say 20 pixels so that there is still some separation between those inner texts okay all right so let's set up these uh menu items going to Center that uh let's make this a little bit bigger here maybe an 18 point okay and I'm going to create all of my menu items I'm just going to copy and paste a handful of text here and just rename them so we're going to manage our clients our projects uh we have our time sheet okay uh we have our invoices and also settings you know if I want to change my password change my email for logging in things like that okay so here is our our menu now this group I believe is needs to be centered as well let's pull this to the middle there we go that's much better okay so this is a good starting point here for just like the general sort of template for all pages in our application um what I want to do now is actually create a reusable element out of this group okay a reusable element out of this group uh this way I don't have to rebuild the menu every single time for every page and if I wanted to make a change to any part of the design I only need to do it once I'll show you what I mean here in just a moment so I'm going to right click on this group and I'm going to convert it into a reusable element this is essentially creating a global element um that I can use on any page so we're going to call this header okay and I'm going to say create now it's going to take me to sort of a standalone place in my um editor uh specifically for this header right I'm no longer on a page uh so I do need to make a couple of adjustments here you can see how things have sort of collapsed um I'm going to set the default Builder width to 1200 and I'm also going to change the background so that it is white again some things need to be reset just a little bit here okay so there's my header now if I go back to the client's page okay I'm going to get rid of the original header that I had there and now I'm going to replace it with my reusable you can see at the very bottom here let me actually collapse all of this down so you can see where this lives okay for my assets we have a section for reusable elements here's my custom header I created so I'm going to select that and just add it to the page so now you notice when I hover over this everything's kind of shaded I can't edit it directly here anymore I have to go into the you know the editing page for this specific element um and when we're on a page it's it's kind of like you have a page on a page um when you design a reusable element onto a page U but the the idea here is I don't need to go into every individual page to make a header change I can just make the adjustment from the one reusable element so let's go over and um duplicate let's go to uh uh add a new page here and create our projects page we can really see this reusable in action um and I'm going to clone this from the client's page okay so just from cloning I've saved myself a whole bunch of steps right it's the exact same I don't need to worry about the main container or the colors now that this is this is it I'm pretty much done right because the reusable element lives here it also lives on this client's page um if I go into the reusable element and let's say I wanted to change the color of this text here to this brighter blue okay and I go back over to the client's page notice it's changed here and also over to the projects page uh which yeah we're switched over it's changed there as well okay one place will have a ripple effect everywhere okay this is not the same as if I go into clients and I have a button inside of this group it's not like that button's going to show up on the projects page these are two separate pages but the reusable element is something that is shared across both pages okay I'm spending some time on that because it's a really uh important element to take advantage of for uh consistency for reducing errors uh so wherever you can find a use case for it you know definitely take advantage of it okay so let me remove the button here all right so now we're going to add a couple more pages uh to match our menu here um just going to be clones of everything so we have time sheet here this is going to clone from anyone either clients or projects they're the exact same good and then let's do invoices okay and this will clone as well there's another way to create clones as well you can go to the edit menu of any of your pages create clone this page and it'll have it automatically selected another shortcut and we'll also have settings here okay so I have all of my custom Pages creating in my application now the next thing I want to do is I want to help the user understand what page they're on when they're looking at it you know from the frontend preview um by Bolding uh the specific you know menu items so we're going to go into the reusable element here and I'm going to add a condition on this text okay this condition is going to say only when the current page name is clients okay just type that in then I'm going to change one of the visual properties which is to bold it okay it's a conditional scenario that changes the visual property only when this is true here so I'm going to right click copy this condition come over to projects paste the condition and just swap out the value when the page name is projects and this page name is just m uh matching exactly how I've labeled it here you know uh with the the actual page name and the property editor for each page um so they've got a match exactly otherwise they won't be uh passing the condition so here we have time sheet this and here we have invoices and we have settings that all right so let's see what um this is now allowed us to do let's start with the client's page I'm going to preview here okay so you can see how the client's p uh text here is in bold if I manually modify my URL here let's change this to projects just to load that second page you can see that this is not bold um I'm not actually able to navigate yet because I haven't created a workflow for it yet so let's do that next so back into the reusable element we're going to go to the client's text and I'm going to add a navigation action to go to a specific page in my application we're going to go to the client's page wherever we are in the app if we click on this text that's where it's going to take us now I can copy and paste a few times to get all of the rest of my um uh navigation actions in place okay so I'll just switch this to invoices and that's going to take us to the invoices page we'll switch this to projects and that will take us to the projects page switch this to uh settings settings page and finally time sheet go to the time sheet page all right so now I've hooked up my navigation so let's refresh the page here so now if I click on time sheet it's automatically going to take me to that page notice that the condition kicks in go to settings settings go back to invoices right so all of my navigation is working exactly as I've designed it okay so now the user can actually move through the application through the front end we can also set up the uh app name here in the header uh to take me back to the index page right so we can do um navigation go to page go to to the index that way we we kind of go back home it would also be a good idea to have you know a log out button um for the user to formally log themselves out and also get redirected back to the index um that can show up over here let's add that actually to uh our menu so going to add button so you see how I'm making modifications I don't have to worry about having to make these changes on every single page I'm just doing it in one place and it'll reflect automatically for me um so we're going to say log out uh let's change this to an icon and label and see if we can find a a log out icon out yeah how about this one this all right and uh how about we maybe reverse the positioning of the label I think I want that icon to be to the right um of the text okay let's choose a different style maybe this outline button so that it's not so strong there and we'll Center it and I do want to have this on the other side of the drop down here and so I'm going to group them together put them in a row container okay we'll have this fit to content and I'm going to separate them here with uh some Gap spacing just like that let's see the height of this drop down is 40 pixels I'm going to have this button match that 40 pixels um it does look like uh the roundness of the drop down is a little different from the button that could be a little bit kind of confusing it's it's sort of setting off a weird vibe a weird design Vibe for me um so I'm actually going to have the roundness of the drop down match the button um uh instead so it's a little different from the index uh so this one is going to be we have a roundness of five I'm going to do the same thing for the drop down we're going to change this to a roundness of five there we go a little bit more consistent there okay so I'm going to refresh the page here okay so here's my log out um I haven't actually hooked up the logout button so let's go change that add the workflow here and this is going to trigger a log out function which is important right we actually need to tell bubble to log the user out of their session and at the same time I'm also going to redirect them back to the index right so now we have a multi-step uh workflow here okay so I'm going to refresh the page and log the user out it'll take me back over to the index um so now from here now that we've got all those pages set up I can modify uh my my login flows and my sign up flows to take me inside of the app rather than showing that alert message um okay so let's remove that from there I'm going to instead use a navigation action to take them to let's say we take them to the time sheet page let's say that that's maybe the kind of the default page to to navigate to so I'm going to refresh the page here um and let's log the user in we had Jane sample.com test is the password log in we know they're logged in successfully otherwise we would have seen an error message this is just my browser telling me I'm using a not a not good password I'm just using the word test there uh so it's taken me inside specifically to the time sheet page right so I know that I'm I'm in the the system now now I do want to take a moment to touch on some responsive uh settings as well uh let's come back into the index because this will be a good way to demonstrate this if I switch over to the responsive view here in the design canvas I'm going to be able to simulate what my designs are going to look like when the screen is more narrow right if we go into more of a tablet or a smartphone so there's a lot of things kind of collapsing automatically but they're not really uh that user friendly right what I think I want to do is after a certain point I want the image to go away I actually want the left group to hide so that we prioritize the form and after all that is the most important thing here on this screen so there's going to be a point where it starts to get uncomfortable because things are just wrapping too much there you know things are too uh I'm going to have to scroll more uh maybe you know maybe around here right you can see the page size is 712 perhaps around the 700 uh break point or maybe even before uh this text starts to wrap let's see where that might be that is over here it's a little bit wider so how about we go for uh 930 pixels we switch this so that the right side um is the only thing that shows so on group left I'm going to create a condition that says when the page width is less than uh let's say less than or equal to less than or equal to 930 okay I'm just typing that in then I'm going to hide this group right the visibility is going to go away and on the layout tab I want to make sure that the content actually collapses that we don't actually see um you know that empty space there now what happened when I did that was this group here the group right shifted over to take its place because remember our main group aligns everything from left to right so now that the left side went away this is moving over to fill that space so what I'm actually going to do is have the alignment of the main group be Center and I might want to make a couple of other adjustments to this main group so that we don't have these borders hugging the edges of the pages I'm going to come into uh the margin setting of the main group so that it always maintains let's say 50 pixels of margin on the left and the right side right there's always going to be that space there so you see let me uh close this window here when I'm wider than 930 I'm going to see the full design as I move down right at some point it's going to switch over to the to the you know more simplified design and there's also going to be a point where you know you still see that things are collapsing here and this is because the right side has a minimum width of 40 pixels so it's allowing uh the design to kind of get really really squished down I'm going to change this minimum width to uh a much wider design let's say maybe 300 pixels right that's my absolute minimum that's as small as it can go and that will you know be fine for you know mobile devices once we're at you know for example 320 here we'll still be able to see things quite comfortably now I am noticing that the pad adding is a bit excessive now um at 320 so you see I'm having to make tweaks you know as I test different break points and and that's just the nature of you know uh creating these precise designs it's all very possible to have a very professional looking design but you know it may take some tweaking here um Bubble is going to help me by you know showing me how things adapt a lot of things will happen for me you know such as things collapsing uh on top of each other you know text shifting around things like that um what I'm going to do is I think before at the same break point point that 9:30 break point I'm going to get rid of the left and right padding for the group right so I'm going to go back to that main group uh or which where was it it was on the left group let me go back to the left group here and I'm going to right click copy this condition just to save myself a couple clicks go into the right group paste for the conditional expression I don't want to hide this I just want to remove the left padding right set this back to zero as well as the right padding adding set this back to zero okay so now you can see what's happening here let's remove that for a moment okay there's the full design as it Narrows we have more space to move within right so it's not so crowded so I'm going to jump over to the preview window here and I'm actually going to make my browser window smaller okay so we can actually see what this looks like from you know the front end not in the editor so here's the full design and again note and I'm on a fairly large monitor here so wider than 12 100 pixels but note that you know the center group is not expanding it's maintaining that maximum uh width of 1,000 uh but as I make things smaller eventually we see the left side go away okay what should happen there we go and then the right side is taking up the rest of the space it's centered presented very nicely there and it continues to compress you know down to more of a mobile size so everything's very comfortable here we're not uh nothing stepping over each other nothing's getting cut off all right so as you can see you know at the end of the day you are building a custom design so the more disciplined you are with your grid your rows and your columns if everything is falling very naturally very cleanly in rows and columns then the responsive design is going to get a lot done for you you still need to go in there and tweak things because bubble's not necessarily going to know that you want certain things to collapse or hide in a certain way so it is very important that you do check those things as you go um so that it it does look great on any device all right so now it's time to build some functional features on the pages that we've wireframe referencing the data structure that we put together earlier okay let's jump in all right so what I'm going to do is I'm on the clients page right now and I'm going to walk through um a set of functionality to help me manage clients I want to be able to create read update and delete my clients these crud operations um are really the core of all data management so I'm going to start by giving my user the ability to create a new client by entering in all the details that we have organized in the data structure their email their name and their phone number okay so we'll have a group to hold all of those different inputs okay so this is going to be called group create client and I'm going to expand the height of this just a little bit to give myself some breathing room as I'm looking at it just 100 pixels here um and I'm really going to uh kind of draft this out first I'm just going to grab the elements that I need um so that I have something functional and then we'll be able to uh kind of reorganize it and polish the design a little bit so I'm going to add a text here to serve as my first input label um this is going to be for the client's first name okay and then we'll add an input uh right below it this group is set up as a column structure uh and I'm going to leave this without a placeholder um and just kind of leave it blank there the reason I'm adding a text to go alongside this input is I want that text to serve as a label that's always going to be visible as soon as you start typing into an input the placeholder is going to go away so this is more of a userfriendly um kind of tactic here okay so this input I'm going to make it a little bit taller uh here all right and the text for this I'm actually going to apply one of my other styles for this I think I want a small title it's a little bit bigger and it's bold so that's what I want to use for my form that I'm about to create here so now I'm going to take these two elements just multi- selecting them and grouping them inside of a column container okay so they're going to be in their own group and I'm going to have that group fit with to content and I'm going to create a little bit of spacing between them let's say 10 pixels here okay so now I have the first element uh for my form and I'm going to rename this to first name like that note how I'm naming everything as I go that's going to be the best Habit to get into okay so I'm going to copy that uh grouping and I'm going to be able to set up a little bit faster my my next input so this is going to be group last name okay this text here will be last name and I don't need to change anything uh you know input uh for the placeholder or the format for the input it's going to be the same they're both going to accept text I do need to make sure that I have labeled these however input last name and input first name okay and now we're going to set up another one for the email address okay so going through here most of this is just labeling for everything so here we have our our label email address and for the email specifically I am going to change the content format to the email format and we'll rename this to email address then finally we're going to have our phone number so I'm going to copy and paste this here phone number uh bubble does have a special format for phone numbers if you're in the US if you do need to work with International numbers you probably want to leave this just on text so I'm going to change it over to us phone and I'm going to set the input name to phone number you can also by the way rename things over here on the left hand side okay now I don't actually want my form to be uh in a vertical format like this I actually want it to be horizontal so I'm going to change the layout to a row uh Style just like that I'm going to add a little bit of Gap spacing here with this group this is the the kind of the group client the the outer group of all of these individual input groups you see how I've collapsed that down there okay so for group client I'm going to add Gap spacing of 20 pixels for each of these columns and we're going to add a button over here so the user has something to click to create the new client just like that okay and we're going to have this button be centered I think I actually want all of my groups I'm multi- selecting here so I can make this change in a bulk setting Center those vertically um I'm also going to uh have this group overall uh just really fit height to content um so I'm going to remove that minimum 100 that I had earlier right now it's a little bit um uh more precise around all the boundaries of these elements here okay now you notice how this is very much hugging the uh boundaries of my primary container my main container so I'm going to come back into my main container and I'm going to add some padding I'm going to do 10 pixels of padding all the way around just to create a little bit of a bumper there that that's probably something I should have done um with all of my other pages so that I have that same template um now I know but uh that's that's the uh change that I'm going to make for that one just to give a bit of breathing room here okay so I now have a form that the user can fill in and click on a button to create a new record in the database so let's set up the workflow for that when the button is clicked we're going to run a data action called create a new thing the thing we want to create is the client right bubble doesn't actually know what it is we want to create so we have to choose from our custom data types notice that the user is not here because user is a special data type you're going to use a signup action to create a new user so creating a new thing we're going to create a new client I'm going to add all of the fields available to me within the structure I'm actually going to remove the related projects that's not really um relevant here right now so we're not going to be defining that but all of these fields I can map to my inputs now so I'm just going to search for my inputs just typing in here input email addresses value okay first name input first name's value just mapping everything just like I did with the signup same thing for last name here we'll do the same thing for the phone number all right okay you see how important the labeling is it makes your workflow setup a lot easier because you're not um having to guess which input you're working with I'm also going to reset the inputs so that it clears everything once we're done all right so let's preview this um now we're not going to see any indication of a list of clients uh on the page because I haven't designed anything but we'll be able to check our database um I'm not really liking how this button this is very picky it's going to bother me that button's sort of uh not very well aligned um within the group I think I actually want to change this uh so that it is vertically aligned at the bottom of the group that contains it okay so so I'm going to refresh the page here and let's create our first client we're going to create Alex Hamilton Alex sample.com and we'll give Alex a phone number you see how that phone number formatting is happening for me uh that's because of the format setting that I gave the input all right create client click on the button you see how the input's all cleared out that's the only visual cue I have for now that the record was created so if I jump over to the data Tab and over to the app data subtab I can now see in my client uh table I have this new record that was created Alex at sample Alex Hamilton there's the phone number okay so now I have a way to create new records now I want to be able to show that to the user um you know show show the list of clients that they have here in a table now there's two ways to go about this in bubble um there's two elements that you can use to work with Dynamic lists you have the repeating group element and you also have the table element as you can see you know as of this recording this element is Tech technically in beta um you know I think it's stable enough to be using in features like this so I'm going to go ahead and use this because this comes with a lot of great uh capabilities uh to create a standard you know looking table repeating groups are are great too uh for this sort of thing uh for a traditional sort of spreadsheet like table there's a little bit you know there's a couple more steps that you need to take for a repeating group to get there um repeating group is a bit more flexible in terms of working with Dynamic lists in general not just table designs but other list designs uh for this I only needed a table so that's the element that I'm going to use so I'm going to add this to my page and uh they're side by side so that tells me that my main container um is in a row setup I'm going to change this over to a column uh and let's move the table uh down below the form okay just like this I'm also going to add some Gap spacing in my main group here let's add some 20 pixels of Separation all right so my table is kind of preconfigured to have you know a traditional spreadsheet sort of design so there's a couple of adjustments that I want to make uh right from the beginning here I'm going to remove the fit width to content so that it expands to the full width of the uh group here and I know that I have four um values that I want to display so I'm going to want to add at least one more column uh so let's right click over here add a column to the right okay next thing I want to do is for this row zero that's going to act as my header um so I'm going to make this row sticky so that it's always at the Top If I have a big list of clients it's always present there right if I'm scrolling through items um that header won't go away for me uh and I'm also going to change the background so that there's a bit of Separation just in terms of coloring here uh for the for the table okay now inside of the table I'm also going to add some text to display the column headers basically going to match the form that we have up at the top uh so I'm going to take this first text that says first name I'm just going to change the color okay and basically within the table you see how you know this is made up of a bunch of cells every cell is essentially its own container so all of the settings you've been seeing so far in terms of layout Styles alignment spacing you can uh Implement at the cell level so I'm going to change uh the the layout alignment for this cell to be centered and I'm going to go to the text and also Center that vertically within the cell I think that's going to be cleaner for me here okay so I'm going to copy this um uh text and place this for into all of these other columns and I'm going to multi- select the other Colum as well and Center them just for some quick editing there and uh just rename rename the uh the text here so this is last name this is going to be email I could have also copied and pasted the uh items up above but this one's already set up with the right coloring and everything so I'm going to leave this as is okay phone number now the rest of the table is going to populate dynamically based on what's In My database right I can't anticipate how many clients any given user is going to have so you see how there's this little infinity sign here um next to the one that means that this is a repeating row everything that I design in this first cell is going to repeat for all the other rows for as many rows as we want the table to generate and that's going to be based on the data that I have in the database okay so first thing I'm going to do for this row I'm I don't want it to be fixed to three rows I want it to be dynamic okay I want as many rows as we have clients in the datab base to appear here next thing I'm going to do is at the table level I'm going to define the data source right the table is an element that works with Dynamic data so I need to give it a data source where is it going to find all of the clients well my database um there are other sources you know you can pull from plugins API connections um other values that you may have in the app uh but the database is the most common one so I need to tell bubble hey this is going to be a table of clients and the data source is going to be the result of a search of my client table so I'm going to search for clients um and I'm going to sort by their uh let's do their first name okay so that it's an alphabetical order by first name now I'm not going to add any constraints to this but keep in mind that you know I only want my user to see clients that belong to them so one thing I could do here is to say as long as the Creator right the creator of the client record equals the current user that's one way to ensure that I'm not seeing anybody else's clients but remember this also can be done done through privacy rules and we're just on one page here if I had a search for clients on my projects page on my time sheet page the Privacy Rule is going to catch all of that okay it it's certainly not a bad thing to have this constraint in here as well but you really want the privacy rules to be your first layer of Defense uh for uh protecting access to data okay if you don't have the Privacy Rule you would definitely want to make sure that you have these constraints within the individual searches all right so I'm going to remove this constraint because I do want to to demonstrate the effects of privacy rules in a in in a moment here but uh right now uh we're just going to search through clients for that are in the in the system Al together okay so I have a data source now I'm going to take another text here and place it inside of the repeating cell you see how it duplicated uh for me this text is going to be dynamic instead of a static text that I've typed in there I'm going to insert Dynamic data and insert the current rows clients first name okay this is a dynamic expression it's kind of like an instruction that we're giving bubble uh to go find the record that is being referenced in this row and insert the value within that first name field okay so I'm going to change the style that I want to use for this we're just going to work with the regular body style I'm going to have this centered and also with this one I think I'm going to I think I'm actually going to leave it left aligned um let's see if we can add some uh just a little bit of a margin to push the text away there's again many different ways to create spacing and distribution I'm kind of roughing this out right now but I'm going to add let's say 10 pixels to separate it from the edge of the cell all right so I'm going to copy this text and place it into our other cells to complete the table this expression should be referencing the client's last name this one is going to reference the client's email address and this one over here is going to reference the phone number all right and you see how you know the expression is now moving the text into two lines that's just going to look that way for the editor if the you know length of the expression is actually longer than what the actual values will be and you want a bit more of an accurate representation in your editor you can also take advantage of the placeholder here this is just for you within the canvas so I can replace this with email address it's just a placeholder it's just to kind of clean up the the look of everything within the editor itself it doesn't actually change the expression I can do the same thing over here with the phone number if I wanted okay all right so let's actually preview this I'm going to uh re refresh the page here now that we have a table in place okay so we have those two clients in the database I've got the data filling in now if I were to create a new uh client let's say George Washington Georg test.com um and give him a phone number create client there we go now we have a third row that automatically appeared right in real time I didn't need to refresh the page or anything it's just pulling uh the results from that search all right now I can customize the design of this table even further but what I want to move into is editing and deleting uh these records if I wanted all right so what I'm going to do is actually add another column to have some action items per client so I'm going to add another column over to the right let's have two icons displaying side by side I think there's a couple ways we can approach this but uh what I'm going to do is I'm going to have an edit icon okay so we're going to have a little pencil icon here um I'm also going to have a trash can icon to uh for for the deletion so we'll say trash there we go like this okay U let me change the styling of this so that they kind of match the rest of our colors here and this new cell let's Center these items um let's create a little bit more space uh between them just a bit more so we don't accidentally click the the wrong icon and we're going to Center uh these items here I'm also going to take the width of the column overall and um have it fit to content I don't need it to be wide so I can actually control right the widths independently uh for all of those columns okay so the deletion will be pretty easy when this is clicked here uh this is going to create a workflow another data action to delete a record all right so this is going to delete the current Rose client that's it it's going to be gone from the database we can develop this further to you know maybe offer a confirmation window first so that they don't accidentally delete um lots of things that you can do there but I'm just going to have it delete immediately as soon as as I click on that icon now I'm going to do something different here with the edit icon what I'm actually going to do is have the group up above populate um the the data from the cells or you know from the row uh client here uh this way this this form can actually serve a dual purpose both for creating a new client and editing an existing one okay so in order to accomplish that this group needs to receive information needs to receive information so the group is also going to act as a data source here in the case of editing so I'm going to set the type of content to client the data source here will be empty because the data source is actually going to be um defined in the workflow you know I could have a default here but in this case I need to change the data source anytime I click on the edit icon because that's going to mean sending a different client to that group so when this icon is clicked I'm going to define the data source with this action here display data for that group that's the group create client the data display right or the data source that we're giving it is going to be the current row client okay now why am I doing this why am I providing a data source at that group level well now each of these inputs can have an initial content um that's going to mean that it'll prepopulate uh with a value and because the group now is pointing to a specific record I'm going to reference the group create client's client right this is the data source and I'm going to go to the first name from there you're going to find that there's actually many different Pathways that you can create to access the data that you need uh you know data sources from inputs from your from your uh plugins from your database um and you can pass data around to different elements to create a highly interactive experience so what I've done here in the input is I'm having it reference this outer group the group create client to find that client record that we sent from this icon here and have it pre-populate with that record's first name I'm going to copy this expression okay little bit of a shortcut over here come into the last name field right click paste and switch this over to the last name's value okay same thing for the email address okay remember when the client is first being created you're not going to see any values in here because we're going to make sure that they're empty to start um we'll look at resetting things in just a moment so let's fill the rest of this in so we can see this in action here okay and this is going to be the phone number okay so let's see where we're at right now I'm going to refresh the page okay so I have my table of three clients we don't have any values in the input because I haven't sent any data to the outer group if I click on this icon here now you see all of those details fill in okay now there's a couple of things that I want to do I want to change this button to say update or save right this button is also going to serve dual purpose so let's do that now um I'm going to add a condition to the button I don't have to create two buttons I can just change the conditions around uh this button's appearance and also in the workflows so when the parent group's client this is referencing the data source of the outer group when that client is not empty right when we're referencing something as long as it's not empty we know that we're in an edit mode so I'm going to change the label to save changes how about we do that make it very clear to the user all right and I think just for another visual cue I think I want to change the color of the uh button let's change it to a green color okay and I can preview what that's going to look like that's very bright I'm going to darken that green just a bit okay so I can preview what that'll look like here when the condition kicks in all right so just that one conditional change to help the user visually see all right so I'm going to click edit right now we can see the button changes now that doesn't mean that the workflow is going to do anything different I do have to Define that as well so let's head over to this workflow here I only want to create my client right when I click on this button when the parent group's client is empty right because that tells me that the inputs are all going to be empty and the user will have filled them in themselves versus let's copy and paste this here if the parent group's client is not empty then I know I want to modify the existing client record so rather than a create client um action I'm instead going to have a make a change to a client action make a change to a thing the thing we're changing is the parent group's client just like with the create action I do need to define the fields that I have for this form again we're not going to be working with the projects quite yet so I'll map all of these fields as well input email address we're going to do the first name first name here as well as the last name okay and the phone number and this is going to update the the record okay now I do instead of the reset relevant inputs what I'm going to swap this out for is a reset data group now that the group for the form um is acting as a data source I need to make sure that anytime I create or edit I'm fully resetting it back to its default state so that I don't run into any conflicts uh with those initial contents because I could go back and forth between creating and editing I just need to make sure that it's always reliable to uh display that those initial contents in the inputs so I'm going to do a reset data on the entire group here I'm going to copy this I'm also going to do this for the creation flow as well okay res setting the groups ensures that you know there's a lot more consistency when you're uh moving back and forth between you know a create versus edit uh situation so let's go into this client Smith that we had here edit okay let's say I changed the the name to um Jane do okay just the first and last name we'll leave the email and the phone number so I'll click on Save changes right you see how I've reverted back to the initial kind of Point here where the form is clear I have my blue button again and we can see that the name has changed to Jane Doe I can also confirm that further by going into my database view from the editor right the name has changed here right let's do this one more time let's say uh Alex Hamilton turns into Alex uh Ander Alexander Hamilton and we'll say Alex at uh test.com and let's get rid of Alex's phone number he doesn't have a phone number here okay save changes we can see those have been modified ified just a direct update now if I wanted to delete you know this client for example let's click on the delete icon and it's gone my table has adapted a little bit I can also control the height of this uh header so that it's not jumping around you know I can fix it to a um a more stable height let's take a look at that real quick here let's go to the row zero and let's have the height be a fixed uh height rather than a dynamic one and uh we can change it to maybe 50 pixels right that way it doesn't move around on us but here we go here we have the ability to manage um all of our clients with every single data change every single data manipulation uh that we can do in the workflows creating viewing right or reading updating and deleting all right so I've gone ahead and copied everything I did on the client's page and pasted it into the Project's page because the management is going to be very similar I have a form to create a new project set up the name deadline select the client I'll go over some of the differences here with these different elements as well as the status and I have a table to display these uh these values I've you can see that I've also added some borders around my table I've uh compress the heights of things a bit just to clean it up so I'm going to show you just creating another project here Project B um let's set the deadline to Something in the past because I want to show you how to uh show a create a condition to change the coloring right to kind of help alert the user hey you're overdue for this particular project um we're going to choose another client here George Washington and let's set this one to active and create project all right so we have our second item in place but this works exactly the same as the client management I can edit and uh you know change let's say archive save changes we can see that updates there I'm going take change this back to active right and I can also delete so going into the editor just a couple of differences here the first one is the deadline I'm actually using a datetime picker um in order to choose the date so this is a different element it's not a regular um input okay it's its own thing and when you select it it'll pull open a calendar uh which is really helpful you can also modify different things about the coloring you can choose the year um in a drop down if you enable that feature things like that the other difference is within our client and Status Fields here we have drop downs instead because I want the user to be able to select certain values um so here this drop down is going to be configured very much like the data source for the table right the dropdown is going to be working with a dynamic list of choices in this case a list of clients we have to tell it where the clients live that we want to display here so we're searching for clients um we can sort we can add constraints if we want and the caption for the dropdown um is customizable as well right I could display the client email an ID something else right so I'm displaying the first name next to the last name so it's uh more user friendly for my user here so I can see the current options first name space current options last name I just built that out in the expression ex right default value so that it prepopulates when we're editing is going to be the projects related client very similar here with this drop down for the status because this is a predetermined list of choices I want to pull from my option set of project statuses so my type of choices as you can see OS Project status The Source bubble has this kind of buil-in here I can default it to all statuses I can of course manipulate this further I mean you're going to see as I'm creating these Expressions there are a lot of options a lot of operators modifiers to really you know reformat and and manipulate and change and convert and calculate uh based off of your raw data your raw data values and option set values um in your structure you are not just limited to how things are saved directly in the database here you can really manipulate things in real time in your design so that they you know display exactly how you want it all right so now down below we have um you know all the texts just like I did with the clients this deadline here I want to point this one out because this is one where I did format um the deadline to display specifically with a sort of abbreviated uh month day year with the slash in between you have lots of formats you can choose from you can also go fully custom um and display your date and time however you need now if I wanted to add a condition to the deadline so that it changes the color let me know if we're past it um we're going to do something like this we're going to say when the current date and time this is a default data source that bubble has available to us when the current date and time is greater than the current rows projects deadline okay then I'm going to change the color of this text let's change it to this bright red make it very uh noticeable for the user okay um we'll preview this in just a second over here with the client uh uh text notice that I'm going to the related record right the row is a project this is a table of projects but in order to display some information about the client I have to actually pass through the project to get to the related client's record to display client information so I'm going to the let me build this again from scratch the current rows projects related client this is why I named them this way related client now I have access to the client Fields so I can display the client's email address their name whatever I want to do from there so that's precisely why I don't need to save client information again to the project record as long as I have this relationship that's really all I need to do I don't have to create the redundancies um and you know potentially create mistakes all right so let's refresh the page and we're going to see one of our projects we are past the deadline here this one has not yet come up so the the formatting of that text is going to be uh it's the default formatting now I do want to show you you know if I wanted to give the user the ability to filter this table um by client by deadline by anything really right be able to search through their own work you can create that capability it it it's just a matter of you set setting up those inputs um and modifying the data source so just as a sneak peek for that sort of thing what I'm going to do is I'm going to uh add a constraint to my search for projects okay this is just an example I would probably want to build out a more formal area for filtering but I'm actually going to have the project filter on the client dropdown that we see right here um just as an example okay so I'm going to filter my search for projects related client has to equal whatever is in that dropdown right I'm creating a constraint I only want projects where the related client equals whatever is in this value so we're going to see Dynamic behavior um where uh the table changes based on what I select here and actually I'm also going to select this box here so that if there is no client selected I still want to see everybody I don't want it to show me nothing so if this is empty it's going to ignore the constraint therefore it's going to show me all projects so let's refresh the page and I'm actually going to create a few more projects here so we can really see effect of this project c um let's do another deadline in the past let's do Alexander um draft create and let's do Project D here uh deadline in the future George and archived create okay so uh you saw it moving around there a little bit so if I only wanted to see projects for Alex Hamilton you see how it filters that it's changing the data source of the table in real time switch it over to George now I only see those records remove that selection now I see everyone okay again I would probably not want the drop down within the form affecting the filtered table I'd probably want to have a separate set of filters for this and design it a little bit better for the user to do that but uh that's just an example of how you can make you know these these table designs much more interactive so we're going to get rid of that for now now before we move into setting up our time sheet functionality where we're going to have more calculations and things um I'm going to show you how privacy rules affect uh these table designs or really anytime you need to search through data and you know display things back to the user uh at the moment I've removed all of my privacy rules everything is pretty much open um so I'm going to add a rule here uh again the owner rule that we created earlier all right and this is going to say only when the Project's Creator is the current user will we be able to see everything okay so if I refresh the page I should be able to see all four records because I've been logged in as a user and I'm able to see all four records I'm currently logged in as let's double check here I think this is the only user my Jane my Jane user okay so let's quickly set up a new user that has their own projects I'm going to log out of Jane um let's sign up as a new user uh let's do edword test.com test and test is going to be their password sign up all right and I don't have a navigation function in here so I'm just going to manually head over to the projects page right so now you can see how my table is empty I'm not looking at Jane's projects I'm going to create a new project for myself we'll call this website design something like that this is going to be end of November and this is going to be now notice these are Jane's clients I should not be seeing these people and it's because I don't have a Privacy Rule on this if I go back to the Privacy Rule for clients and do the same thing okay we'll say owner again here and this is going to be the same expression this client's Creator is the current user then they have access and I'm going to remove access for anybody else who falls outside of those rules okay I'll refresh the page I'll have to fill this in again but notice now I do not see Jane's clients in fact I should probably go into my client's table create a new client for myself okay so we'll create Ross Geller Ross friends.co and Ross will have a phone number okay this is Edwards only client all right so if I go back over to my projects and set this up again website um design and a deadline here now this is my client that I can see I'm not mixing data with uh other users and we'll set this as a draft project right this is the only project that I have access to okay I'm just going to jump into my editor in the app data um so you can see now I have two users now as an admin of your application you can actually kind of bypass the entire login f flow going through it in the front end and run as any one of your users without having to uh uh type in their passwords uh that's actually helpful uh you know for testing but be very mindful you know anybody you give access to your editor will be able to run this operation if they have admin access so if you're inviting collaborators just be mindful of that in terms of security okay so I'm going to rerun my application now as Jane so it's going to log me out of Edward run log me back in as Jane so here I see Jane's projects again I only see Jane's clients right I don't see Ross in there that is Edward's client that person is gone same thing if I go back to the client table these are only James clients right so that's where those privacy rules can really make a huge difference and I set up the rule in one location in the editor here I actually didn't need to modify the uh constraints within the searches now you can and in a lot of cases you should in a lot of cases you probably still need additional constraints sometimes the privacy rules aren't going to be enough sometimes to have more specific logic that needs to um go into these searches to display the right information okay so you don't want to rely on just one a lot of times it's a combination of things all right so now what I've done is I've brought some of those elements over uh to the time sheet section we're going to do a few different things here I don't have the same edit kind of group up at the top of course you can do that you know I do want to point out that the approach that I've taken for managing the editing of a record you know this is just one way to do it you can set set up inputs inside of your table to edit things in line you could take the user to a totally different page if you have many more things to edit uh or show a popup uh to display things that way you know you can hide the table show the form after that many different approaches that you can take for this so for the time sheet I'm going to be more focused on doing calculations so what the user will do is uh they'll select a project so let's say project C start their time entry it will create a new time entry record you know just like we did before with the other items and now we have this in the table so I created a new time entry a little bit earlier here so we have project a and we only have the start time um I don't have an end time yet because it's still active I'm currently working on that particular task um and I also don't have a calculated duration because I don't have an end and therefore I don't have a calculated cost so I'm going to um fill in some of these areas here so that we can then stop the time entry and then do these calculations and save them to the record from there the user can then add these entries to an invoice for example to send it over to the client so jumping into the editor here first thing I want to touch on is this end area right now this is empty but I want to give the user a way to stop the time entry right put in the end time so I'm going to take this text and I'm actually going to hide it by default and collapse it when hidden because if we're not going to see a text yet we should see a button for the user to click so the condition for this will be only when the current rows time entry end time is not empty right if there is a value there then then we do want to see this text so if it's not empty then we're going to make it visible right so we're we're uh conditionally changing that property by default it is not visible but under this circumstance it will become visible okay so I'm going to uh copy this button so that we have a button here and let me also hide this text for now we're going to turn that off there okay so this button and let's make this centered here and we're also going to change this to the outline just to make it a bit more subtle this is going to be our end entry button okay and this is going to have the opposite condition it'll still be hidden by default and will also collapse it when hidden so it doesn't take up any extra space but the condition is going to be when the current rows time entry end time is empty is empty then we're going to make this visible because that's the scenario in which we want to click the button to give it a value okay you see how with these conditions with uh you know the the labels and um you know in the text elements I'm creating Expressions to give bubble instructions for what I want to see these all these Dynamic values are coming from different sources um and you're going to find that these these uh the list of sources are also quite context sensitive it depends on the type of element you're in what container you're inside of what other elements are available around you right whether inputs and things like that so these options will definitely change based on uh what what the scenario is around uh the element in question here all right so let's uh take a look at the preview here just to see where we're at with this Dynamic change okay so both of these are active projects so I want to create a workflow to end the entry let's start a workflow from clicking the button so this is going to modify the time entry remember I already created it I created it when I clicked on the start time entry up at the top so I'm not going to create a new record I'm just going to modify the existing one make a change to the current rows time entry um and we're going to do several things here the first is to record the time so so the end time is the current date and time okay now that I have the the end time in here I can calculate the duration so I'm going to actually do this as a uh actually I think it'll be better if I do this in the same action here the duration in minutes is going to be the current date and time minus this entry so oops the current rows not the index the current rows time entries start time and because bubble can tell that this is a a difference in two date and time values it gives me the option to format that difference in different units so I want to do this in terms of minutes okay so current date and time minus the start time uh in in terms of minutes okay now what I'm going to do is in a second action I'm going to calculate the cost and I'm doing this as a second action so that I can kind of work off of the result of the previous one this is also going to speak to workflow strategy a bit here the timing of your actions can make a big difference in whether you get accurate results or not right if you have have dependencies also this can affect the performance of your workload consumption right if you have multiple actions asking bubble to make multiple changes to the record over and over and over again you're going to be using more workload units so if you can consolidate things like I did with these two here um that's going to help you use less units in theory I could actually calculate the cost in a single action but I do just want to show you that you know you can have these dependent actions on one another okay but there's a lot of strategy that goes into creating really efficient but always you know accurate and reliable uh workflows by uh controlling how you split things up the timing of your your steps and everything and there's lots of different tools to help you with that as well so for step two here I'm also going to make a change to the same record and we're going to say result of step one because that will tell bubble to wait for step one to happen first um you know as I add these actions here you know we're going to see step one step two but technically they're not always going to run in that order step two is not always going to wait for step one until I explicitly say so here bubble is going to try to help you move through your workflows or execute your workflows as quickly as possible in some cases that means some actions may run simultaneously so if we need to force an order we're going to take advantage of these uh these Expressions that help us do that so I want the result of step one to be the thing I change and in this case we're updating the calculated cost now if you recall when we were setting up the data structure I have that rate rate Sav to the user so I'm going to take the current users rate um and I'm going to multiply it by the calculated uh minutes that we have actually you know what I'm going to do is I'm first going to convert the minutes to hours because we're going to assume that the rate is an hourly rate so I'm going to take the result of step one uh result of Step one's where is it the calculated duration in minutes and I'm going to divide this by 60 okay so that's going to give me the the value in hours and then I'm going to multiply that value by the current users uh let's see here the rate just like that okay so a little bit of a calculation there to get that cost in place all right so once that cost is there then we'll be able to see uh actually for both duration and cost we'll be able to see values here for these text now you probably notice that we're seeing an empty value but the word Min or the abbreviation Min there and that's because I do have the expression but if there's no value then it's just going to be empty but I do have that static text here so this is another situation where we could add a condition we could say you know hide this by default and in the condition we'll say when the current Row's time entry duration is not empty then we can make it visible just to make it a little cleaner there all right so I'm going to refresh the page and let's go ahead and end the entry for this project a which has been running for a little while so end entry there we go 16 minutes and notice that the cost is zero that is probably because I don't have a rate saved to my user so let's correct that real quick here go to the user uh I believe I'm running as Jane let's give Jane a rate of uh $75 an hour okay so we'll hit save and I'm just going to reset myself here a bit uh we're going to delete the um let's delete the values from that time entry that I just updated okay so we're going to remove the calculated duration we're going to remove the cost as well as the end time okay so just to reset myself here now that I've made that correction given Jane a rate so again end entry there we go so now we have end time it's calculated a difference of 17 minutes which gives me a cost of $21.25 okay uh let's do the same thing here for project C okay 8 minutes that's been running we have $10 even for that one the currency sort of display here is another type of formatting that you can add to um uh numbers okay so if you do a formatted as operation I'll show you from scratch here right once we have our number and I click on more I have the option to well I can do a lot of math here but I can also reformat that number uh in terms of currency and bubble will allow me to define the decimal places um I can do the Thousand separator you know depending on the country you're in you might want to customize this all sorts of currency symbols here and so that's how I was able to display it that way okay now what if I wanted to display the total amount of time that I've spent um across all projects or again if I wanted to filter on projects I could add one of those filters that I showed you earlier uh but just to show you how to aggregate on things let's add a group below our table um let's pull from this group element here and I'm going to copy and paste this um let's have it below I believe this needs to be inside of our main group it's probably sitting outside of it let me collapse all of this down here all right this group here uh let's go into the main group and let's position this to the end okay so this group is going to be a summary group just like that all right and I'm going to have I'm going to pull out these texts here let's move remove these items okay I just wanted the group for the for the sizing and everything so this text is going to display the aggregated the sum of uh the duration right so I'm going to take the tables um time sheet right this is the full list of time entries from the table element okay and I'm going to reference the duration which is giving me a list of durations right I have a list of time entries therefore I have a list of erations each one in in the row there so because I have a list of numbers I can perform a sum so this is the total number of minutes now I do want to see this in terms of hours because it's likely going to be over an hour when I add them all up together so again I'm going to divide this by 60 and uh let's round this to maybe one decimal place so rounding it to one just like that and uh let's see here that will give me the the the duration in terms of hours let's give this a placeholder for duration sum now now I do want this text to be moved over to the right here so it's aligned with the table a bit more so at the group level I'm going to have this right aligned um and I'm also going to add another text whoops didn't mean to pull that out I'm going to have another text here for the cost so I'm just going to copy and paste so that we have a duplicate over here okay and this is going to be the very similar expression so the list of time entries each items cost and then do a sum now I don't have to do any more math on that but I do want to format it so that it's displayed as a currency so same thing currency two decimal places going to do the comma for the thousands separator and my dollar uh symbol here okay um I can of course adjust the the spacing a bit more so that it's more aligned with the table but for now I'm going to leave it there as is so we'll do the cost sum here okay so if I refresh the page I should have a total we should have about 30 something yeah there we go um looks like we have something off here with our our duration amount though so oh this is because it's in terms of hours of course we haven't reached an hour um if you know what we can do is we can add a condition on this text so that if it's less than an hour to instead show it as minutes uh so in the condition I can say when the table let's go to the same expression table time sheets list of entries duration sum if that sum is less than 60 minutes then we're going to instead just show the minute sumon rather than converting it into hours so again table time sheets list of time entries uh duration some like this and uh we're going to put in the abbreviation here minute and I'm also going to add the abbreviation over here to hours like that okay so again you can see how we're manipulating these raw values uh so that it makes sense for the user there's our total time and minutes and our total cost and again there is a lot you can add to this design to essentially create a report rep in system where you're filtering on maybe a date range filtering on clients um you know to do sums based on a specific uh selected client right What's the total cost for one client or What's the total cost for the last month or the last quarter uh it's just a matter of adding the inputs you need and then manipulating the table from there um so that these values update in real time now let's say that you wanted to visualize this information I'm going to start a new uh time entry there for now let's say you wanted to visualize this information in a in a chart or graph so you're going to look at plugins for that so I'm going to add uh bubble's own charting plugin so we're going to search chart here there it is um there are many different plugins for this there's a lot of fancy ones uh that are highly interactive um some paid ones some free ones so it's just a matter of sort of exploring uh the type of chart that you're interested in uh we're going to go with this basic one this one by Bubble uh will be enough to kind of demonstrate some visualizations here so I'm going to add an instance of a chart element to this group all right and let's make this maybe 100 pixels tall let's have it expand the rest of the width there all right okay and let's have this be let's see what do we want to use for this one let's do a bar chart for this um and let's say we want to aggregate the data based on uh time so you can see the kind of placeholder here is by month now uh I'm going to manually manipulate some uh time entries in the database so that we can actually see an example of how things would look over a bigger span of time rather than within the last several minutes here that I've been uh demonstrating this um so to set this up we're going to do type of data is time entry and I'm going to uh reference the time sheet table that we have down below okay and I'm going to kind of side note here let's do time sheets time entry side note here is the only time I've performed a search in this entire demonstration for this page here is within this table search for time entries and a search is you know a heavier activity compared to many others it does uh use more workload units compared to others so you do want to be uh very efficient when you do searches um I have other areas in this design where I'm referencing a list of time entries but I'm not having to do a search all over again uh the first here is in the duration uh for the sum right the duration sum I'm not doing a search I could could and I could get the exact same result but I don't need to because I've already got a reference on my page that is already found those time entries so I'm just going to that element right so I'm piggybacking off of that same thing here for the cost okay so you want to be mindful of any areas that you can um you know take advantage of to reference instead of do over uh and and end up using an excess number of workload units all right so back to our chart here again I'm referencing the table and what I'm going to do here here is I'm going to group the entries I'm going to group by the uh let's say the start time yes the start time okay and so this is going to allow me to create these different buckets of um of data where all of the time sheets are now organized by their start time and I'm going to group them at the month level okay so if there is a month that contains five entries that is a bucket of five items and this grouping function has some built-in aggregation details and this is perfect for a chart okay so I want to group every every uh month right so it's a monthly grouping I'm not going to skip a month or do every quarter or anything like that now for the starting date I'm just going to grab the earliest uh time entry we have in our list so again reference the table go to the list and I'm going to uh go to the where is it here the start time and uh we're going to grab the Min this is going to give me the earliest start time from that list of times for each of the entries all right and I'm also going to to I don't want to skip any groups so if there were no time entries for let's say February I still want to see the month there even if there's not going to be a bar and then the ending date is just going to be the current date and time okay so this is going to set up my grouping now for the aggregation I'm going to some uh let's see we could do the total time right for that month okay calculated duration um I can also have multiple aggregations if I wanted okay so now the value uh for this chart is going to be the summed time for each bucket in this case each month the label expression is going to be the month itself so I'm going to grab this from the start time reformat this so that we're only displaying the month and the year I'm going to go to custom we're going to replace this here with a month and year uh formatting this way it gets rid of the precise date and time because again I'm grouping this by month I only care about the month and the year here now before I preview this I am going to add in a few more time entries uh so that it spans several different months so we can actually uh get a better representation of this chart all right so I've added in a few more examples here just some easy calculations uh but spanning some different uh points in time um I've also increased the height of the chart just a little bit to give us a bit more room and I've abbreviated the month just a touch I had previewed it here and uh these adjustments are going to make it uh look a little bit better so here's our chart we've got some more data here in June um totaling a duration of 120 Minutes here we have 60 minutes and then here's November um if I go to end entry you can see that jump jumped up just a little bit so there was that sight change okay and now that I'm noticing this button kind of being off-centered I think what I want to do is actually move it inside of this group here with the project dropdown so we're going to put that there and place it at the end um let's also remove this fit width to content I think that's going to be a cleaner uh design here there we go I think that's a bit better okay so you know just based off of the table we're able to do a lot of things in real time on the page calculating these sums and actually visualizing some data in these charts here now this is a very basic chart element um you can still customize a few things further with the colors and the formatting but um again if you explore the plug-in Marketplace a bit more you'll find that there are a vast amount of Premium plug-in and chart options that you can work with all right so now we're going to move into the invoices side of things to really close the loop for the user right they've come in to manage their clients their projects they've been entering in their uh their time sheets and now it's time to set up an invoice so that they can send it to the client and get paid now we're not actually going to go through the uh point of integrating with the payment Gateway and generating invoices and checkout pages and things like that right payment links all of that is absolutely possible um you know with an integration with some sort of a payment Gateway we love recommending stripe uh for taking payments for creating invoices there are many different plugins uh that you can check out to work with that you can always use the API connector as well if you wanted to create a custom integration but um there's a lot you can do there to generate uh really easy ways to accept payments okay what I want to go through really here is the data management side of things so that all of your internal records are updated according to your custom features so um what I've got here on the invoices is the user will first choose a client that they want to invoice so let's say Alexander Hamilton um we're going to choose one of Alex's projects here so these are two projects tied to this client we've got some filters on the drop down I'll choose project a and I'm going to create an invoice and what's going to happen is it's going to create an invoice that is associated with any time entries for project a that have not yet been invoiced okay so I'm going to click on this now right so there's the there's the invoice and we can see that there were two time entries it calculated the total amount for that entry we have a number here uh it's by default in draft we haven't sent it to the client we have a reference here so we know who the client is and I have a way to review the time entry so let's say I don't actually want to include one of these entries in the invoice let's say I delete this June entry at the moment it's totaling to 9625 so I'm going to hit the X icon and you'll see that it actually recalculated it uh now it's just the amount for this one time entry I can do the same thing for the invoice that's up above here it's totaling to 16125 for the three let's say I remove the uh November entry okay so it brings it down so we've got some workflows there to do these recalculations uh so now let's say I'm ready to send Alex here the invoice I'm going to click on this button we can see the stat St is changed I also have a change to the button I can't click on it again it's actually disabled and with an integration with the payment Gateway you'd want to have some sort of uh API connection or a web hook an appto app notification so that you get immediately notified to automatically update the status behind the scenes right when that payment comes through so that would be the idea there um I can also choose to delete the invoices if I want um obviously we have uh some uh visualizations here I believe I have this set up to the creation date of the record which was all uh today so it's going to be in one month right now but you can have this visualize you know the amount of uh paid invoices right how much you've earned uh throughout the month you can also break this down on a daily basis weekly however you want to visualize that there so let's take a look at the logic behind the scenes to get us to this point here and also the design you'll notice that we have this sort of inner list within the outer row here of the table okay so jumping over to the design I have uh the obviously I have that same bar chart element um with a reference to the invoices from my table and I'm also grouping by specific dates this is very similar to the previous example now here I have my drop down of clients so it's going to dynamically show me list of clients sorted first and last name there and here I have only the projects that are tied to the client so notice I'm actually not doing a search I'm referencing the other dropdown I'm going to the drop- down clients values related project right whichever client I selected I'm going to that client records related projects we didn't go over this earlier so let's jump over to the uh client's uh page here real quick whenever a uh sorry the pro the projects page whenever a project is created not only should we be saving the client to the project but we're also going to do that relationship on the other end if you think back to the beginning when we set up the data structure right remember the project has a one to one relationship but the client has a one to many relationship with one or more projects okay so project is created we assign the uh selected client to that project there's the one: one what we would also want to do here is make a change to that selected client so we can find this two ways I can say the result of Step one's client I can also just go directly to the dropdown I get the exact same result there okay so you have multiple Pathways um here I want to add the new project um to the client's list of projects right this is the list field here so I have different operators for that I want to add a single project to the client's existing list of projects we're going to add the result of Step One our brand new project now we have this shortcut to identify projects that belong to a specific client rather than having to ask bubble to do a whole search and filtering that search query this is a more efficient uh Pathway to get that uh you know that segmented list that list of projects so going back over to our invoices I've already pre-created some invoices manually that's why we're able to see items here um in that drop- down uh this is the exact field that we're referencing that I just walked through right it's the drop- down clients values related projects um that way it changes you know for Alex it's a and C for George here it's going to be B and D it's dynamically updating based on the selection of the first drop down all right so clicking on this button here we're going to create our new invoice we're going to save the new client that was selected um and we're also going to locate all of the time entries um that are appropriate for this invoice and save it to the invoices list of time entri so this is again another list field and we're using a list operator here to save uh a list not just one item but multiple items so I'm going to use this set list operator I'm going to search for time entries where the project is the selected project from the dropdown and specifically time entries that do not have a related invoice yet right this tells me that this is an uninvoiced entry I'm only looking for time entries for this project that have not yet been invoiced okay the time entry I've added a relationship here when I notice that you know this is going to be helpful to have uh to locate the right entries a relationship to the invoice that they will eventually end up on when they start out we're not going to have an invoice value here but now I can make a change to a list of all of those time entries okay now that we're creating the invoice this is going to be the result of Step One 's time entries and uh okay and then we're going to update the field for related invoice to save the brand new invoice from step one okay so the value the fact that the entries have this value here is going to help us know which time entries have already been invoiced and which ones have yet to be invoiced this way we don't you know double invoice the the same entry now the next thing I'm doing here is I'm going to be calculating uh certain values for the invoice if we go back to the data structure uh we have a total cost and a total duration so the total cost is the sum of each time entries cost right this is sort of the subtotal each item there and this is our grand total for the invoice same thing for the duration I'm summing all the time um uh durations for each of these individual entries and what I'm doing in the workflow is I'm actually triggering what's called a custom event over here uh let me change the color so that you can actually see and color code these ENT these uh events to identify them a little bit more easily this is a workflow that I'm going to funnel into from multiple trigger points there's actually multiple places in my design here where I want to recalculate uh the invoices cost and duration and so rather than setting up the exact same workflow action with the same calculation in multiple places I'm going to have all of those trigger points feed into One Singular event this is going to save me time it's going to make sure that my calculations are consistent no matter what the tri trigger point was and reduces uh you know any potential for error so from the creation of the invoice once I create it I've identified the entries I need to calculate those totals so I'm triggering the custom event this is an action you can find here under custom events trigger and the custom event itself was created by uh just Standalone here under custom I can set up a new event so custom events are always triggered by other workflows all right so I gave it this custom name and I created a parameter for this event so that it could receive information okay this is like creating a sort of a field for the custom event specifically this is not a field in the database a parameter is a way for me to pass information to the event so from this workflow when I go to trigger it I'm sending my new invoice to that event so that it actually knows which invoice to calculate on so once this triggers we're going to make a change to that invoice right this is the value of our uh our parameter here and now I can retrieve detail from that invoice to calculate the totals this invoices time entries costs right the list of costs and summing them up same thing for this invoices related time entries durations from those entries and summing those up okay the other place where we would trigger this calculation is right here on the X icon if I remove an entry I need to recalculate those values so on the trash icon here sorry not the trash the close icon that X we're going to do several things to sort of remove that entry make sure that everything is synced across all related records we're first going to update the time entry itself and clear out that reference to the invoice if we're removing it we want to leave that empty again so that it can later be added to another invoice and we're going to update the invoice so that the time entry is removed from its list just because we have these two-way relationships in the structure does not tell bubble to assume anything that they are always going to be synced we specifically have to go to both sides and make these adjustments just like when we create them I specifically have to Define on both sides this invoice is tied to this uh these entries and all of these entries are tied to this invoice bubble will not assume that for me and do any of that saving automatically for me right those those links okay so back to our close icon we've now undone those relationships when we get rid of the time entry note that we're not deleting the time entry we're just clearing those values to sort of remove those connections and then from here I'm also going to trigger that recalculation because now that we've removed the entry that means there was less time involved so the cost needs to be lowered so both the creation and the removal of an individual entry filter into or not filter into but funnel into this custom event to do that recalculation this way I only need to manage this piece of the logic once so this is kind of like you know the equivalent of a reusable element with our design this is kind of like a reusable workflow event that you can trigger from multiple places um our trash can icon just doing a simple deletion as well um just like we have with all of our other uh our other sections now I do want to call out here within the time entries the Design's a little bit different from what we've seen with the other sections what I've created inside of this particular cell is a repeating group now we haven't seen repeating groups in our examples up to this point um we've been using tables for all of our Dynamic um our Dynamic list displays a repeating group can also work with Dynamic lists but it doesn't have to be structured as a you know a formal table here it's a little bit more flexible so repeating group is uh also going to take a type of content and a data source just like a table and it will generate as many rows as it needs to to uh populate you know from this list here so for this particular invoice this first row there are two items so the repeating group is generating two rows then finally I also have this button that's got a condition on it um to let me know that an invoice has been sent so when the current row invoice status is my sent status right this is my option set here then we're going to change the label to say invoice sent I'm going to change the coloring a little bit and I'm going to make it not clickable this prevents me from actually triggering the workflow again the workflow itself is going to do the following it's going to make a change to the invoice it's going to save the sent Tim stamp and it's going to update the status obviously I would have other things too I would likely be sending an email I would be uh triggering my payment uh integration to actually generate an invoice with a payment link there there would likely be many other things that are happening here but internally for the invoice record these are the updates that I want to uh trigger as well okay so all throughout development and even after you started releasing versions to your users you need to be mindful of your app's workload every app is different and so every app is going to consume workload differently workload is bubble's measure of your app's activity and this is ultimately going to dictate the cost of your app as well as how performant it is for your users and the main area that's going to help you understand your application's workload consumption is the metric tab let's take a look this app metric section is essentially a report of your app's workload consumption so remember that you know most of the activity that you're running in your app making changes to the database loading Pages uploading files it's all going to cost you a certain number of workload units and not all activity is made equal you know some may be just a fraction of a unit or let's say you have a workflow with a lot of actions so there's going to be a combination of activities and those units will Stack Up and basically bubble is going to tally all of that up for you um and here we're seeing a visualization of that so that you understand your exact usage um over different periods of time and the most important period of time you want to pay attention to is the month because you are allocated a certain number of units you can use on a monthly basis at the end of the month that number resets for you okay and this is where the app plans come in um every plan is going to give you a certain number of units that you're allowed to use the higher the plan the more units right so you just want to make sure that your usage isn't going anywhere near that limit otherwise you risk going into overages where you're paying more uh or your potentially your app being taken offline okay now this uh area here will also help you drill down to the week level to the day even down to the hour uh because in some cases you may need to find where your inefficiencies are if they're not already obvious to you understanding where the higher areas of consumption are um are going to be the best opportunities for optimizing things now this isn't to say that you know the more workload units you consume the the worst your app is going to perform that that's not the case at all it's not a onetoone uh correlation like that you know some applications are simply more complex some applications simply have thousands and thousands of users or high frequency uh in activities okay so more units is not necessarily A Bad Thing the key is that you want to be efficient with that consumption you want to make make sure that you're not using more units than you really need uh if you can perform uh the same activities right get the same outcomes in less units then you're building a lot smarter you're building more efficiently and that's what we were trying to get after so use these charts to help you understand where the heavier parts of your app are because those are likely going to be the areas where you can make bigger impacts in uh creating more efficiencies okay so the chart down below this pie chart here is actually going to help you drill down into the exact expressions and elements uh you know in your actual designs and your workflows uh following these different categories right so this particular app within the live version It's using about 40,000 workload units um this next app I have over here about 20,000 workload units for the live version um I can see that there was a day where there was maybe some unusual extra activity going on but you know this is the kind of thing that's going to help you understand what what usage is looking like in your app especially if your app users are uh less predictable right if it's it's not necessarily an internal tool where you have employees clocking in clocking out basically doing the same thing every day uh this will ensure that you're always on top of you know any unexpected spikes making sure that you have given your application the breathing room it needs for the units right and then uh down below we have a chart that's going to help you break down uh that actual activity into the Expressions the actual logic that you've created so that you truly understand what exactly is contributing to um that activity I'm actually going to switch back over to our time sheet application um let me come back in here into the logs let me reset this here real quick okay so this was again this was a brand new application so we don't have a lot of activity here just 157 units being used and down below um I can see that I have three categories that I've I've been using fetching data um running workflows and loading pages so the biggest slice of the pie here was fetching data right we had all those tables doing searches for our records So within fetching data I have these subcategories different uh ways of searching in okay this is the biggest slice of the pie here uh just our normal search and I have several different search Expressions throughout my application so these are the different uh slices that we're going to see there let me click on this first one for time entries that's the one that I happen to load up the most uh throughout these demos and so you see how it took me exactly to this element and actually highlighted the expression I'm going to do that one more time I'm going to click on this slice of the pie here it'll take me to the page and actually highlight it even if I was on a different page bubble would change it over for me so this can really help me understand all right if I'm seeing massive usage um within a particular category or a particular expression I know exactly where to go to then investigate see if I can you know uh uh make it more efficient in some way maybe I can reference a different data source where the search has already been done U maybe I can add constraints to reduce the number of Records being returned there could be many reasons for why a single expression uh could be uh taking up more room on the chart here so obviously you know it's going to depend on your application or what you're doing but you have all the information you need here to learn and understand what your app is doing um and point out potentially any areas of inefficiencies now jumping over to a different application this is just to illustrate you know every app is different so you're going to see different pictures um with these charts this application has incredible consistency in its usage um this app uh happens to be uh quite connected to apis in fact most of its data is is driven by external um uh sources uh and so that's going to be the primary category here compared to many other apps we typically search is going to be the primary category um but I can also see that this application's um uh primary usage is within its development environment so they haven't really gone live with uh you know real users in uh full production quite yet they're still very much testing everything out um so we can see kind of that breakup between development and live here's another application with a different picture here this is kind of telling me that you know the applications typically used during the week rather than on the weekends right we have no activity over these two sometimes three- day time spans um this is also an application that uh uses more units just in general uh right within these four to five day weekday spans uh right the live usage is 84,000 right this is still a 30-day time frame so again I want to reiterate that more units is not necessarily a bad thing sometimes applications happen to be more complex they may have more users more frequency and activity uh right more connections to third party systems more units is not a bad thing but you just want to make sure that you're efficient with the units that you are using no matter what type of app You're Building managing workload comes down to three things complexity volume and repetition you want to find the right balance between these three because that's going to lead to a more optimized app uh for your users as well as more cost-effective one for you so complexity speaks to how involved an activity is let's say that you have um a complicated search with a lot of filters maybe some conditions on it uh maybe it's doing some data manipulations within the search okay so that's much more complex than let's say loading a blank page right you don't need a lot of a complex activity to consume a high number of workload units okay so you want to make sure that if you're if you're seeing things that are more complex in nature if you can simplify them if you can break them down maybe restructure your database so that uh you have easier Pathways to information uh these are all ways that can help you uh reduce complexity and therefore reduce workload unit consumption volume speaks to the amount of data that you're asking bubble to return from the server and send it over to the browser the more data that's getting sent to the browser the more workload units you're consuming so you may want to make sure that you're only asking for what you're going to use and no more than that right you don't want to go into excess and repetition speaks to the frequency of your activity if you're just constantly running workflows in the background for example that are updating records in the database or performing searches it's really easy to rack up those workload units so be very mindful about when you are triggering your activity because the timing can make a huge difference in your workload consumption now if managing workload sounds a little overwhelming a bit intimidating I understand but don't worry because when you're creating your app for the first time you're not going to have a lot going on there's not going to be very much to manage at first right you're not going to have thousands of Records right out of the gate or overly complex logic immediately in your workflows or hundreds of visual elements in your design now I will say that your app could get to that point but it's going to be an evolution it'll be a process you're going to start with very simple design simple logic and you want to make it a habit to check in on your workload consumption by reviewing your metrics tab learn from it understand what's working and what's not what's efficient and what's not and make corrections as you go the more your app evolves the more you're going to get comfortable with finding patterns and identifying you know efficiencies and and even anticipating those things so that you know you don't become inefficient so this is very much an evolution but you have to be mindful of this from the very beginning so that you don't run into you know reworking things later on or running into bigger headaches later on with that said there are many areas of the bubble editor that are really meant to help you stay efficient so if you can take advantage of these wherever you can do so because they're going to put you in a much stronger position from the start starting with the data structure um you want to take advantage of option sets as much as possible uh these are not technically a part of the data base so they're more lightweight for bubble to reference which can lead to better performance you also want to take advantage of relationship Fields between your data types um that leads to more Dynamic logic uh definitely more scalable logic you can reduce redundancies this way um maybe even reduce errors uh in your work as well so connecting data types together through relationship Fields is a good way to go now in your designs take the time to set up styles you know the styles are essentially a centralized uh location for uh visual properties and and settings and configurations and it's much easier for bubble to reference one single location where all of those are organized compared to referencing every single independent element in your pages it's just a lot more work for it also with designs take advantage of reusable elements uh this is the kind of thing that's going to help uh save you from mistakes it's going to help you stay consistent and definitely save you a lot of time uh you know building the same thing over and over use a reusable element for common things that will show up on multiple Pages such as your menus your your your navigation systems your headers Footers things like that custom states are another fantastic capability that you can take advantage of uh this is how you can store temporary values they're not actually being saved to your database unless you want it to unless you say so in a workflow um but they're very commonly used to reduce the number of searches you're performing on a page right because you can consolidate the results and kind of store them hold them in a custom State rather than asking bubble to perform the same search over and over right this goes back to the repetition thing uh which could lead to more workload unit consumption now for workflows custom events and conditions can help you control the timing of your activities and bad timing can easily lead to uh you know an overc consumption of workload units so by leveraging conditions for example you can prevent activity from running if it's just not necessary now you've probably heard me mention a few times throughout this video that your workload consumption can also affect the cost of your application so let's take a look at bubble's subscription planner to understand this a little bit better this is bubble's subscription planner this is a calculator that's going to help you understand your app's monthly cost according to the plan you want to place it on and the estimated number of workload units you need in a month okay so the first thing you'll want to do is choose your billing cycle whichever you prefer just keep in mind that the annual option does give you a little bit of a discount compared to monthly um I am going to go ahead and select monthly here for the demo though then you'll want to choose the plan that you want your app to be on now I will say that most new applications will be just fine on the starter plan but keep in mind that these plans are not just about the number of workload units you get right you can see that each plan comes with a certain amount and the higher tier you are the more units you get but that's not all that you need to think about if you go over to the pricing uh page for bubble uh you can review all of the different features um and access to different capabilities in some cases some features uh will just you know some limits will be lifted in other cases certain features are locked off until you're at a higher tier okay so you want to make sure that you actually choose the plan that your app actually needs regardless of the workload units right you may need the growth at minimum because of features that only start at growth even if you don't need this many workload units all right so we're going to start with uh just we're going to go through some different scenarios here I'm going to start with the monthly starter um that's what I want my app to be on is the the lowest paid plan and I'm going to estimate 100,000 workload units okay so I'm going to calculate this now bubble is recommending that I just use a starter plan and nothing else to cover my workload needs right I've asked for 100,000 or I'm estimating 100,000 that is more than enough being covered uh by the plan itself so there's nothing extra here all right so that's a very consistent predictable bill that I would have there uh as long as my my monthly usage uh stays at this amount here now let's say that I'm estimating 200,000 workload units okay so this is actually between these two plans I can see that it's 25,000 units more than the starter plan so what is bubble going to recommend here well with the starter plan I can expect to pay $7.50 extra right this is in overages uh in order to cover that Gap in order to cover that 25,000 additional workload units all right and so my total for the month would be 3950 now 3950 is much better than jumping up to the growth plan right just to get that extra workload unit allowance okay so it's very helpful to be able to see you know what is going to be the most costeffective combination given the plan that you need and your expected units right so that extra is going to be covered with a lower uh overage uh payment compared to jumping up to a higher tier plan all right now let's jump up to uh let's say uh 500,000 okay I still want to be on the starter plan but my application happens to use a lot of workload units right I don't need the features of the higher tier plans but I do need a lot of workload units let's calculate this all right so here we have a new component called the workload tier all right so given I want to be on the starter plan which is only going to give me 175,000 units bubble is recommending that I add what's called a workload tier to add an additional 200,000 workload units this is on top of the 175 so this would give me a total of 375 workload units that I can use in the month so this is an additional subscription that you're adding to your base subscription and it says tier one here because bubble actually has multiple tiers of different um workload amounts I think they go into the millions uh so you're just going to want to choose uh you know the the one that's most appropriate this subscription planner will actually let you know what the best tier is okay now 375 is still not enough to cover my estimated 500,000 so in addition to that extra workload tier I can also expect to pay $18.75 sense um to fill in the rest of that Gap right between that 375 and the 500,000 and if you look at the total right for this month with all of these things combined I'm looking at $79. 75 a month to cover my 500,000 with this combination here that 7975 is still less than jumping up to the growth plan which doesn't even cover the 500,000 and it is even more so much more uh affordable compared to the team plan which is where we start at you know an included 500,000 okay again this is a very helpful tool to help you understand the most costeffective combination and remember if you need to start on the um uh on a higher tier plan uh let's see what happens here right with that 500,000 okay so the growth plan is going to give me 250 I'm still on tier one for an additional 200 so now I have a combination of 450 units so I have an extra 50,000 that needs to be covered by over is so the $7.50 um is going to cover that and so my monthly bill here is going to be1 17050 right uh that's just a little bit more than the standard growth plan significantly less uh than going to the team plan all right so definitely take a look at that this is something that you're going to need to um uh that you're going to want to use as your usage increases you know when you're first getting started with your application you're not going to use a lot of units do not stress about this until you are ready to go live you know when you're under construction and things are everything is new things are going to be moving around quite a bit uh the metrics tab is not going to be very accurate for you until you find stability with your application until you start locking things down and you're not making as many major changes let's talk about testing your app as you build your application you'll be able to preview the page just as a user would you're also going to get access to a special troubleshooting tool called the debugger debugger helps you inspect everything you've done on this page everything from the visual properties conditions to your workflows that you can actually break down you can think of this as kind of looking under the hood um from the frontend perspective to uncover mistakes to uncover any issues that might not be as obvious from within the editor so you'll definitely want to get comfortable with the debugger so that you can get really good at troubleshooting your own app once you're ready to go live with your application there are a few things to be mindful of first is you're going to need to be on a paid plan in order to access the live environment of your app and this is the version that you want to share with real users another thing to be mindful of is once you're on a paid plan you're going to be able to connect your app to a custom domain um so that you can wh label the URL you can send email from your own domain name now okay the other thing is be mindful of security and privacy you know once you go live and now it's out there with real users need to make sure that everything is locked down go through the editor settings and make sure that you've configured all of your privacy settings uh appropriately this goes for privacy rules for users access to data um as well as uh access to the application itself you know review any uh settings you have for collaborators review any privacy settings around apis okay when you go live you need to make sure that those things have been addressed make sure that you test those things as well run your application from uh different user perspectives to make sure you're not missing anything also you won't be able to deploy your application until you've addressed and resolved all of the issues in your issue Checker so a very good habit to get into is to address issues isues as you go it's very normal to carry issues as things are under construction right as you're actually building things out um but issues are there for a reason they're speaking to misconfigured items in your work so if you're testing your application while you have you know 50 plus issues you're likely not testing an accurate uh representation of your work right you want to address those things so that everything is correct um not to mention the last thing you want to do when you're ready to go live is to sit for hours addressing 100 plus issues I've seen it it is not fun don't get into that habit of just letting them build up on you you know what you can do is after every development session take a look at your issues address as many as you can you don't have to clear them all um but address as many as you can so that uh you keep that number down and remember that you won't be able to deploy until you've addressed all issues um the items in the issue Checker will typically carry a message to help you resolve it'll usually give you a tip on what the problem is and how to fix it now that you have a more well-rounded understanding on what you can do on this platform I do want to take a moment and address some of the more advanced capabilities so that you know what to expect in the future you probably won't need a lot of these right now um but it is helpful to know that you can really extend your app's reach to the outside world this can help you create more robust systems um automations right Communications with uh third-party tools as well so the first thing is that your app can actually expose two different apis a workflow API and a data API this allows third part party systems to make a request to your app server to server to trigger workflows as well as to retrieve data from your application and all of this can be protected you have various privacy settings that you can configure to make sure that only the right systems are able to access these things um but this is a huge help for creating uh Integrations with thirdparty systems and creating automated flows uh this is a basically the system that zapier uses uh to connect applications to one another okay now you also have uh the plug-in Marketplace we touched on this a little earlier but it Bears repeating that you know this plug-in Marketplace is huge and there are many different tools uh that you can add to your app to uh have more variety in your visual elements um have more options for different workflow triggers and actions again you do want to find a good balance of what you actually need you don't want to be overly dependent on a whole bunch of plugins um but there's a lot to explore there that can uh really change you know what your app does based on you know your specific features and just customizing things further one of the most popular plugins is the API connector uh this is a special tool that allows you to create custom API connections with thirdparty systems that offer an API if you're comfortable with API I love this tool I highly recommend it because it keeps you in control over your Integrations and another feature I want to call out real quick here which is going to be useful for SAS apps or anything that's multi-tenant in structure especially for enterp prize um level Productions is the sub app Feature um this is accessible on the higher tier paid plans and essentially it lets you create copies of an application so that each tenant or each customer typically um is onboarded onto its own application this is really helpful if you need to meet certain industry requirements to keep that data completely separate um you can wh label each app a little bit more so they can all be on their own custom domain um it can also help you control the amount of data that any single customer or tenant is producing your next step from here is to take what you've learned today and combine it with a strategic development methodology because it's one thing to know how to use a tool right Bubble at the end of the day is just a tool but it's a completely different story to build and launch an application successfully you have to come at this with a programmer's mindset even though there's no code involved so head over to coaching nood apps.com slork we've got a free additional training there where we're going to guide you through our four-phased approach to go from idea to Launch an application we'll show you how to identify your priorities how to roadmap your features on a timeline how to work with user stories and actually apply this all to your development so you're not wasting any time at all and you're building a real functioning application properly from the start for scale again coaching nood apps.com Workshop is going to have that free additional training for you we can't wait to see you there [Music]