Transcript for:
Building a Custom CRM with Bubble

in this video I'm going to teach you how to build your own custom CRM just like Salesforce without writing a single line of code using a tool called Bubble before I say another word though let's dive in and take a preview of what we're going to be building today once I've registered an account within my application today I'm going to be sent through to my account settings page now at this point in time I've created an account not only as an individual but I've registered as an organization so what you'll see here is I have the ability to update all of my own personal details as well as the details of the company that I've registered so I can choose to update things like the employee account or if I'd like I can even choose to invite additional team members to my sales organization which I'm just going to jump ahead and add in the details of a new team member I'd like to invite a few moments later then from here if I select to invite this team member behind the scenes that's going to register an account for that person and then it's also going to send them an email with an Access Link then back in my own personal settings page because I'm an admin of this particular company I of course have the ability to view all of my own team members as well as update any of their permissions or even remove someone from my account then if I was to jump over to my main CRM page here this is going to display a list of all of the customers that belong to my sales organization and of course if I'd like I can choose to add a new customer to my team so in order to do that all I'd need to do is fill out the simple form here and add in all of the customers details I can also choose to filter through this existing list so if I open up my filter here I can choose to filter this down by a company name or if I'd like I could filter this by the customer status so let's say I want to find all of my leads and if I wanted to further refine that I could also find all of the leads who are qualified customers and so now you'll see I have a more specific list here if I also want it I could choose to just jump into a customer's count so let's say I'm interested in learning more details about this Batman account here for Bruce Wayne I'm going to click on this customer it's going to redirect me through to a dedicated customer page and on this page I'll see all of the details for this company if I wanted of course I can choose to edit these details so once again I just need to update all of the information within this simple form but let's say I just want a snapshot of where this customer is within their sales Journey what I can do below this is see a list of all of the activity that's occurred on this account and if I'd like to add in a note I can choose to add this button here and submit an entry which is going to display in this list below then finally we've also created this dashboard page which just gives us a visual snapshot of where our sales organization is so I can see a list of how many leads we have how many customers we've closed and how many customers we've lost I can also visualize these within a pie chart here and finally I can see what the total value is of all of the sales one will lost and what's currently sitting in our sales Pipeline and of course your boy didn't just stop there we've also added these date filters so that way we can filter these values here by a particular date range so let's say if I want to filter all of these sales by the first week in February here what you'll see is that these figures are going to update in real time and now this is just a sample of everything I've created within our application today of course there's so many additional things happening behind the scenes so I can't wait to show you everything I've put together within this build if you're a non-technical person like this guy I'm sure you'll know firsthand how complicated they can be to bring your app idea to life I'm sure you've probably tried to Source a technical co-founder who could build the product or perhaps you've even tried to learn how to code yourself well I can tell you right now anytime I've ever tried to learn how to code it did not end well and that was of course until I found a bubble bubble is what's known as a no code tool which in simple terms just means that it allows you you to create fully functional applications without writing a single line of code when it comes to Noco tools bubble is by far my favorite not only does it allow you to structure your own custom database but it gives you complete control over the interface you create as well as the ability to make your app functional using visual workflows and of course the ability to integrate with third-party tools and services look if you were trying to compare bubble to any other no code tool what you'll find is that each one of those features would be a standalone product so it truly just blows my mind that bubble includes all of this in one single platform and look if I can be real who on Earth would want to pay for four different tools when you could just do it with one smart I appreciate that look I feel like I've rambled on for long enough because there is so much that I want to cover within this tutorial today so let's grab our bubble editor and we can start walking through the process within our tutorial today the very first thing I wanted to cover isn't actually how we can build a core user-facing feature instead I wanted to take the time to set up and configure our own custom database which will be used to power the rest of our Salesforce build now in order to streamline the process of structuring our own custom database what I've done today is I've gone ahead and I've created an overview of all of the different data types and Fields we're going to add into our application and inside of this document I've also gone ahead and I've created a list of all of the features I'd like to cover throughout this tutorial as you can see there is quite a few in my list today and I'm super excited to walk through all of these now if you'd like to follow along with this list I'll be sure to include a link to this in the description of this video so that way you can make a copy of this and of course you can check items off as we add them into our bubble editor but what you'll see at the top of my list is as I mentioned I have a series of what's known as data types and data fields which we're about to add into our own bubble database and look if you are new to creating database cases in bubble I know the whole process can seem quite overwhelming but don't worry it's my job today to make things as simple as possible so that way you can create your own powerful application without writing a single line of code now when it comes to understanding how you can create and structure a database in bubble there's two Core Concepts you'll need to understand there's what's known as your data types and also your data fields now inside bubble your data types are the overarching things that will be created inside of your database so you'll see here all of my headings that sit above a checklist they're going to be my data types and so a data type as I mentioned is almost like an overall entity within your database so whenever a user needs to create a thing that should be a data type and so you'll see in my checklist here that we've got a data type for our users and that's because of course a user will need to register an account within our database so a user is going to create an account which means that will need to be a data type I also have a data type for a company because within our Salesforce clone today I want users to be able to create a company that they work for and of course invite team members into that company we also have a data type for our customers because inside of each company account team members will need to add customers or also known as leads and then finally I have another data type which is known as customer activity and so whenever a team member wants to add a note to a customer's account they're going to be creating that note within our database and I'm just going to refer to that as our customer activity but what you'll also see is within each overall data type we have this series of checklists and these are what's known as our data fields so every single time a data type is created we're going to need to store some information within that so if I jump back up to my user data type let's say someone registers a user account within our database inside of that we're of course going to need to register some information about that user so things like their name their profile photo their account type and even the company that they work for and so are all of this information is going to be what's known as our data fields these are all the particular fields we want to register for every single data type and of course your boy here is always trying to make things as simple as possible for you and so that's why today I've created a list of all of the data fields you need to add into your database so that way you can just copy and paste these along but I'll even go one step further and I'll walk you through the process of each data field we add and I'll explain why we're adding that particular field and how it's going to be used within our application so what we should do is jump over to a brand new bubble editor and within this editor I've currently made no changes to this application the first thing I'll need to do though is of course set up our database so if we head over to this data tab here we're going to open up our database and one thing you might notice straight away is that by default we already have this user data type pre-created for us and that is because in order for someone to actually use your application they're going to need to register an account so bubble creates this data field by default because it's inevitable that you're going to need to create users inside of your database and another thing I should point out is that on the left hand side here this is where our overall user data type is listed but if I select on this on the right hand side here you'll see a list of all of the data fields that sit inside that user data type and by default bubbles already going to pre-create a series of fields under our user data type because of course in order for someone to register an account they're going to need to store some information like an email and a password and so that's why bubbles already taken the time to create an email data field for us and in fact they also have created a password data field for us as well we just can't see that for privacy reasons but it certainly is there so we won't need to create that within our own database now when it comes to creating our database the very first thing I'd like to do is add in all of our different data types before we then go and build out our data fields and the reason I like to create our data types first is because what you'll notice in bubble is that you have have the ability to create what's known as a relational database and look I'm not going to overwhelm you with jargon right now but essentially in simple terms that just means that your data fields can link out to your different data types and I think that perhaps the best way to illustrate that is just by showing you a real example so let's go ahead and just build out our database and I'll point that out when we need to reference that particular link between our data fields and our data types so if I was following my checklist within my notion doc here I can see that our user data type has already been pre-created by default so the next data type I'll need to add in is our company so I'm going to jump back into bubble here and I'm going to create a data type known as company now just a hot tip when it comes to creating a particular data type please please please under no circumstances should you add a plural onto your data types name so I get that in your database you're going to have a series of companies so sometimes I find that people add a plural onto the name of their data type so they would call this for an instance companies but a user will only create one company at a time which means that later on when you build out your workflow to actually power your application it can get a little bit confusing if you think a user is going to create a series of companies when in fact they're only going to create one at a time now of course a user could create multiple companies in our database but again without sounding like a broken record a user will only create one company at a time and that goes for all of our different data types not just our company data type and so you'll never see me use a plural when it comes to the overall name of our data types in bubble from here though I'm just going to jump back into our notion checklist and I can see that the next data type is our customer and then we also have our customer activity so I'm going to jump back into bubble here I'm going to type in the word customer I'll create a new data type and then finally I'll do the exact same thing for our customer activity I'll choose to create this and that is all of the overarching data lot of times we'll need to add into our database another thing I should quickly point out is that under our user data type you may notice here that there's a default Privacy Rule that's been added onto this particular data and if we were to click on that what you'll see is that bubble has pre-created what's known as a Privacy Rule and in simple terms this just limits who can actually see other users data inside of your application and under this default Privacy Rule a user can only see the information and data that they create inside of your application and now while that might be great for things like internal tools or even things like to-do list applications where only one person will create an account for themselves and they'll be the sole user within that account when it comes to creating an application where multiple users are going to interact with each other we want every user to be able to see the data and information that other users create so for example let's say we work within the same sales organization so the company that that we work for is the same value inside of our database if I was to create a new customer within our company's account technically I want you to also be able to see that I don't want myself to be the only person who can create and interact with that account I want you to be able to see that information inside of our overall company so this Privacy Rule here is something we actually don't want inside of our Bubble app so we're just going to scroll on over to this little Trash Can icon and we're going to click this and we're going to remove that and what you'll now see is that our user data type is publicly visible just like all of our remaining data types we've also created now if we jump back over to our data types tab here typically the next thing I would do in our database is just build out all of the additional data fields that sit under each data type but today just when you thought things couldn't be any more confusing I'm going to throw another spanner in the works but don't worry I'm going to be sure to explain everything you need to know in as much detail as I can here so if I jump back into my notion checklist you may remember that I'd mentioned when it comes to data types we should create a new data type for every particular entity that a user creates within our app so whenever a user needs to create something that should be a data type but what happens when we want to create data in our database that we as the admins create not our users and a great example for this could be if we wanted to create some sort of permission structure within our application so let's say I create a Salesforce account for my own company and I select that I am the admin of that company and then if I was to invite you to join my company as an additional team member I might like you to just be a sales member not an admin so that means that we would have different permissions on our own accounts but how can we determine in our database how those different permissions should be structured and I know that example might not be entirely clear but I'll be sure to explain this in more detail when we add what I'm about to mention into our database case but essentially if I was to scroll on down this list here bubble also has a feature in your database known as option sets now if you're relatively new to Bubble you might not be familiar with option sets and that is completely fine this is a slightly more advanced feature and it just helps you take your database to the next level but just based off my example I gave before so the different account permissions let's say if I was to register an account I'll want my account to be listed as an admin and yours would be a sales rep so just a standard salesperson now instead of allowing your users to type in whatever permission they think they should have inside of their account I want them to actually select from a predetermined list of two options so they should be an admin or a sales rep so as the creator of this application what I'm going to do is create two predetermined options and these are the only two options that people can select from and now why would I want to take the time to create two predetermined options well well if you allowed your users to type in what type of account permission they wanted there's no telling how they would actually spell this so let's say some users might spell admin as administrator or they might spell admin without a capital A and then you'll start to have an obscured database because all of the values are completely different so then when you go to build features for users who should be an admin if someone spell admin differently within their own account you can't actually factor in for that user and so this is the power of option sets option sets are kind of like a fixed value that only you as the admin of your whole application can create so your users can't actually create option sets like data types you're the only person who can create these options and more often than not if I'm ever using a drop down with a list of predetermined items I'll typically create an options at list so that way users can select from the exact spelling or options that I've listed out for them here and of course when we build out our application today particularly our user registration page you'll see a real world example of this in practice but what I'd like to do is add this list of option sets into my database before we add our data fields because what you'll see here is that some data fields actually link to our option sets and perhaps a great example is within our user data type so you'll see here there's a data field known as the account type and to my example before I only want users to select from two predetermined options so you'll see that's why I've linked this field to our list of option sets which is known as our account types so what we're going to do is scroll on down to our option sets here and we're going to add in an option set known as an account type so if we jump into bubble open up your data tab what you'll see is that in the top menu here you have an option known as option sets I'm just going to skip this tutorial if you do want a little bit more of an overview of how option sets can be used I would actually recommend watching this video and don't worry I'm not going to be offended but if you want to follow me right now what we're going to do is create a new Option set list known as account type and once that's created what you'll actually see is that the process of creating our option sets is kind of similar to the process of creating a data type and data fields and so on the left hand side here you'll create the actual name of the option set and then on the right hand side you'll create a series of all of the predetermined items within that list so you can kind of think of those items almost like the data fields for this predetermined data and So within my account type option set list I'm going to add two options there's going to be the admin option and then there'll be the sales rep option and so now when a user selects to create an account they're only going to be able to select from this predetermined list and that's just going to help us ensure some consistency across all of our accounts I'm also then just going to jump back into our notion checklist I'm going to tick off that we've finished adding in this list of option sets and I'd like to add three additional ones so there's going to be one here known as our customer status so let's say in our database today for our Salesforce clone if we work for a company and we create a new customer or a lead inside of that company what I'd like to do is just determine what type of customer that account is so are they a lead are they an existing customer or are they an expired opportunity and so by creating a series of option sets it just allows me to create three fixed options so that way later on when we filter through a list of all of the customers who are currently leads if the customer's status is all spelled the same so it's spelled exactly like this we can then easily display a list of all of the leads and we can present all of the information about those leads so things like the deal size as well as the names on the accounts so I'm going to jump back into bubble here and I'm going to create another option set and I'll be calling this customer status I'll choose to create this and and as you saw in my notion checklist there's just going to be three options that sit inside of this so a customer could be a lead they could be an existing customer or they could be an expired opportunity and that's all we'll need to add here so we're going to jump back into bubble we're going to tick these three options off and then we'll move to our next list of option sets and so similar to the list we've just created what I'd like to do is also create a way to determine at what point in the sales life cycle is a customer so do they need analysis are they a qualified lead do we have to follow up with them has the deal been closed in one or perhaps it's been closed and lost and once again I want to create this as a list of option sets because I want to be able to determine what options a user can select from and that's just going to ensure some consistency throughout our sales for CRM today so I'm going to add this list of options into my database so I'm going to create a new Option called customer stage I'll then add in my four options so there's the needs analysis analysis there's the qualified there's the follow up and then finally there's the closed one and closed lost and when we go to build out the actual CRM itself today I'm going to explain how we can create some filters that allow us to filter out all of the customers who are let's say qualified leads or all of the customer accounts who have been closed in one and these option sets are going to be essential throughout that experience and they're going to jump back into our notion checklist tick off all of these option sets and then finally I have one last option set list here which is known as our account activity and so the purpose of this option set list here is to actually work in sync with our existing customer activity data type so let's say on a customer's account so if I'm working for a sales organization and I've created a customer who is a potential lead if I was to click into that customer's account what I'd like to do is be able to add notes to that account as that deal progresses through the sales lifestyle cycle so let's say I ring the customer and they give me some important information I need to note on this account what I'd like to do is create a new customer activity and so of course because as a user I'm going to be creating something which is a data type so that's our customer activity but within this what I'd like to do is determine what type of activity has occurred so have I just contacted the customer or is the deal actually progressing and so if I scrolling down to my option set list here I've just created two predetermined options that will allow our users to select what type of customer activity is occurring so if the person has just contacted the customer they can easily just select this option or if the deal has progressed so let's say I win that account we can select the deal progression option and again for our example today I only want to create these two options and I as the admin want to determine what those two options are I don't want our users just willy-nilly typing in whatever account activity they would like I want it to be structured as these two options and so if I jump into issue my bubble editor I'm going to create another option set list called account activity I'll choose to create this and for the two options in this list there'll be one called customer contact and another called deal progression and that is the very last options that we'll need to add at this point in time so I'm going to tick these off and then if I scroll on up to the top of my notion checklist here it's finally at this point that we can start adding in all of our data fields under each data type so the first list of data fields we're going to add is going to be under our user data type so as I mentioned before whenever a user creates an account inside of our database I'm going to want to store some information in our database about that person and so if I jump into our bubble editor I'm going to head back to our data types tab I'm going to select our user data type and now we can create a series of data fields within this and if I select this the very first field I'd like to register is just going to be the name of the user so I'm going to call this the name field and then for every field you create you'll just need to determine how you're going to structure that particular data so if I open up this drop down menu you'll see we have a whole Suite of different options we can select from so do we want to store this as text a number a date an image a file or even an address thankfully in this case this is going to be super straightforward I just want to store this as text in my database and I'm going to choose to create this then whenever a user registers an account I'd also like to store a profile photo for that person so I'm going to create another field I'm going to call this profile photo now one thing I should point out is that when I create my data fields what you'll see is that if I have two separate words I'll actually connect these with a dash and the reason I do that is because if I connect my data fields with a dash but leave any data types with two words as a space so similar to what I've done with my customer activity later on when we're actually building our application we can easily determine what's a data type and what is a data field based on how those two words are structured so that's just a little tip I thought I'd mentioned that I personally use for this field type though as you probably guessed a profile photo is just going to be an image I'm going to choose to create this then when it comes to the next data field what I'd like to do is link any user to a particular company so that's going to be the company that they work for within our Salesforce clone and so I'm going to create a data field known as the company and now this field type is actually going to link to our existing company data type so if I was to scroll down this list here what you'll see is the option to link this data field to our company which is of course our separate data type so if you remember before I mentioned the words relational database this is where you'll start to see that in action so in short a relational database means that we just created a relation between our two separate data types so if I was to just create this what you'll see is that within our user data type it now has a relation to our company data type and that's because we're linking the data of a company through to a user so if we ever wanted to reference the name of the company that the user works for because this data field is linked to a company which will be storing that information we can easily pull and display any information about the company that this particular user works for and of course you're going to see that in action quite a bit throughout our application today this is where you'll really start to see the power of bubble come to life unlike most no code tools it truly is almost Limitless when it comes to the possibilities you can create and so at this point we're creating a full-on database which I can completely understand why it seems so overwhelming if you're brand new to the tool but trust me it only gets easier the more you practice it now if I just jump back to my notion checklist I can see that we have one last data field we'll need to add under our user data type and that is the account type for this particular user so as I mentioned in my example before for every user that creates an account within my my database I'd like to determine if they're either an admin or a sales rep and of course we're predetermined those two options within an option set list so if I jump into bubble I'm going to create a new field here and I'm going to call this account type for the type of field here what I'd actually like to do is link that to my existing options at list so if I was to scroll on down to the account type option here that's going to link to the two options that we've created so if I was to even open up this drop down menu you'll now see those two options that were predetermined so someone can either be an admin or a sales rep and when we build out the page to register a user in a moment I'm going to cover how a user can determine which option they would like to be but for now that is all of the data fields we'll need to add under our user data type so I'm going to jump back into my notion checklist I'm going to highlight all of these data fields and tick those off we'll then move on down to our company data type so within our application today users will be able to create a company that they work for and so we're going to be storing some basic information about each company so things like the name the logo and the employee account so if I jump back into bubble I'm going to open up our company data type and the first field I'm going to create is just going to be called the name of this company of course as you've probably guessed this field type is just going to be a plain text field because we're going to be storing a text entry we're going to create another field which is known as the logo so this is kind of like the profile photo for this particular company and of course when we're working with images the field type will need to be an image as well I'll choose to create that and then finally I'm going to create another field known as the employee count and contrary to what you might think I'm actually going to select that this should be a text field not a number the only reason you should ever select a number in bubble is if you ever want to perform calculations on things whereas in this case I only just want to store the employee count as text because I just like to display that within a text field I'm not going to be performing calculations on that number so we can just be text I'll choose to create this and that is all of the fields we'll need to create within our company data type Now by all means I'm just keeping things pretty basic when it comes to the data we're storing under each data type for our tutorial today but of course if you ever wanted to store any additional information for any of these data types please feel free to pause this tutorial and add those in as we work through them you can truly store as much information as you would like but I'm going to keep things pretty straightforward we're then going to jump back into our notion checklist here and we're going to head to our company data type and tick off all of those data fields then below this I'd like to store quite a few data fields under our customer data type so within each company account for our Salesforce clone today team members are going to be able to create customers so these can also be known as leads and for each customer a user creates in our database I'd like them to store quite a bit of information so this can include things like the name of the company that customer works for the content attack's name of the customer their number their email as well as things like the total deal size and even the customer stage of that account and of course I'm going to be sure to explain all of these data fields when I add them into my database so if we jump over into our bubble editor we're going to open up our customer data type and the very first data field we're going to create is known as the company name so for every customer we create I'm going to want to store two particular names there's going to be the name of the company that this customer works for so if we're doing B2B sales or Enterprise sales we need to know who that person works for and of course because we're storing a name this is just going to be a plain text field but when it also comes to the names I'd like to store I'd like to make reference of the person who is the point of contact within that company so I'm going to create a field here and I'm going to call this the contact name I can just see I have a small typo there that I'm going to fix and so let's say you were working for a sales organization and I was a potential customer customer or a lead for you the contact name would be Lachlan Kirkwood because I am the person you're speaking to at my company so for the field type of course when we're working with names this is just going to be a plain text field I'll choose to create this and also for each customer I'd like to store some additional contact information so I'd like to know the customers best email and also phone number so I'm going to create two Fields here the first will be known as the contact number so this is going to be a phone number for this field type this is once again just going to be text because I'm only going to display this as a text field I'll choose to create this then there's going to be the contact email and this will be once again a text field type it's nice and straightforward then for every customer account what I'd like to do is recognize who within my sales organization is responsible for that account so I want a user within my company to be the account owner for this customer so if I create a new field here I'm going to call this the account owner field and because I want a team member within my own sales organization to be the account owner I'm actually going to link this field type to our user data type because of course a user should be the person who controls this account so I'm going to choose to create this and of course while this customer is active within our sales force CRM what I'd like to do is determine the status of this customer so are they a lead are they an existing customer or are they an expired opportunity and if you remember we've already created a predetermined list that has all of those options in it so what we can do is create a data field that links to our list of option sets so if I create a new field here I'm going to create a field which is known as the customer status and for this field type this is going to link to our customer status option set list so if I create this what you'll see is that for the options available we can obviously associate the value of a lead customer or expired it to any particular customer in our database and of course later on I'll be explaining how users can update this status for any particular customer what I'd also like to determine though is the actual customer stage within our sales lifecycle so do they currently need analysis should we follow up with them or is the account closed and so I'm going to create another data field here known as the customer stage and of course if you remember we've already created a predetermined list of option sets that someone can select from so I'm going to open up our drop down menu and reference the customer stage I'll choose to create this data field and of course this was the list that just displayed words like needs analysis closed one qualified follow-up enclosed lost that's all we'll need to create for these two Fields though what I'd also like to determine for every customer is the total deal size of this opportunity so if we're going to be cashing checks and snapping next we of course need to know the value of every single sales opportunity within our database so I'm going to create a field here known as deal size now this field type is in fact going to be a number because in our Salesforce application today I'm going to create a dashboard page which allows us to view the full dollar amount of all of the potential customers that sit in our sales Pipeline and of course we're also going to be able to filter those out by the different sales stages and so I am going to set this as a number so that way we can perform calculations on this field I'll choose to create this and at this point we're almost there for our customer data type there's just two remaining Fields I'd like to create one is going to be the date in which this customer account closes so if a team member ever updates the customer stage to either closed one or closed lost what I'd like to do is pinpoint the exact date and time that that occurred so that way later on on our dashboard page we can filter out and display a list of how many sales had been won within a particular time period so I'm going to create a field here and I'm going to call this the closed date and of course for this field type I'm going to reference this as a date I'll choose to create that and then finally the very last thing I'll need to do for each customer account is determine which company in our database this customer belongs to so let's say you and I both work for two different companies inside of Salesforce if with both created customers within our own company I should obviously only see the customers that belong to my company and you should only see the customers that belong to yours I should never be able to see the customers you've created because of course that would be a breach of privacy and so what I'm going to do is just determine which company each customer belongs to and then within our CRM today I'm only going to display a list of all of the relevant customers that belong to the same company that someone works for so I'm going to create one last field here which is known as the created company and this field type is going to be linked to our company data type so I'm going to scroll on down select this option and choose to create create this field and thankfully that is all of the data fields we'll need to add into our customer data type it is quite an extensive list but I just wanted to be sure that I broke down the importance of every single field as we were adding it into our database so we're going to jump back into notion we're going to highlight this list and we're going to check off all of these data fields here and thankfully there's just three remaining data fields we'll need to add in and that is within our customer activity data type so as I mentioned within every single customer account team members should be able to create an activity event so if they've spoken to the customer on the phone or an email they should be able to update the account with relevant information or if potentially that account has progressed team members should also be able to make note of that on the customer's account and so if we jump into bubble here and open up our customer activity data type we're going to choose to create a new field and the very first thing I'd like to do for every single custom activity event that is created is link that to a particular customer's account so let's say if I was a customer for you so you had a customer that was Lachlan from building with bubble and then you've been putting in the work you closed me as a client and then you take the time to update my customer account within your own Salesforce portal you obviously only want to display the details of my account on my page you don't want to see the customer activity that occurs for another potential account so what we're going to do is create a field here and we're going to call this field the customer field so this is the customer that this activity will be linked to so for this field type I'm going to scroll on down and select that this should be linked to our customer data type in our database and I'll choose to create this then for the next field I'd also just like to determine what type of activity event has occurred and of course that's going to be linked to the list of option sets I've already created and if you remember within that list there's two options there was the customer contact and then there was the deal progression so if I create a field here I'm going to call this the activity type and and this field type is going to be linked to our account activity which is our predetermined list of option sets in our database so if we open up this drop down menu you'll be able to see from the two options we can select from and then finally the very last field I'd like to add is just a way for a team member to add some additional comments to each customer activity so let's say they just want to add some remarks about what the customers mentioned so that way any other team members that view that customer's account can easily just see what has happened so we're going to create a field here and we're just going to call this the comment for the customer activity and of course because we're storing a comment this is just going to be stored as text we'll create that and thankfully that is the very last data field we'll need to create so we're going to jump back into notion I'm going to check off all of our remaining data fields here and honestly this was a huge database that we had to create today I'm sorry this dragged out but I really just wanted to take the time to explain this in as much detail as I possibly could just because I'm remember when I first started using bubble databases were the thing that I struggled with the most and so I know this has taken up a large chunk of our tutorial today but I definitely think it's essential to create the right framework and structure for your database in order to power the rest of your Salesforce application now that we've finished setting up our database for our Salesforce clone what I'd like to do is start moving through the list of features I've set out for us in our checklist today and for the sake of this tutorial I actually want to jump ahead to this feature here where we're going to start building out the main CRM page so this is going to be the page that looks like a database for each sales team so of course each sales team will eventually be able to add in their own customers and this is where we'll be displaying all of the details for each of those customers so we'll display information like who the point of contact is as well as what deal stage this particular customer is in and when it comes to this CRM page you can kind of think of this as the main page within our overall application so this is going to display all of the information that each sales team will need to know and so what I'd like to do is start by jumping over into my bubble editor and within my editor the first thing I'd like to do is create a brand new page within my application now we're not going to use the index page we're going to save this for another page later on in in our tutorial today but instead what I'd like to do is create a brand new page and I'm just going to call this the CRM I'm going to choose to create this then on my new CRM page what I'd like to do is just double click on the page itself and open up my property editor and of course when I'm creating a new page there's a few configurations I'm going to need to change in the beginning and the first one is going to be our background color I'd like to update this to be a shade of blue so if you'd like that color code it's once again double zero nine EDB and when it comes to this color I'm also going to update the opacity here to be 10 so that way it's just a light shade of blue it's not as bold or tough on the eyes then once we've updated the color we can jump over to our layout tab and we'll need to set a container layout on the overall page now like I've mentioned in previous modules when it comes to the actual page itself not the groups that sit inside of it nine times out of ten you're going to need to set the container layout to be a column because you'll be stacking elements from top to bottom on your page each and now it's at this point that we can start building out the actual elements that are going to create the page itself now I thought it would be helpful to show you just a quick example of what we're going to be building today so over in a separate browser here this is just an example of what our CRM page will look like and of course this is color coded to show where all of my groups are So eventually within our tutorial today we're going to create this navigation menu at the top of our page then below that I'd like to create this white Group which is going to contain a series of headings as well as a button and even an option to later on filter out our CRM but below that you'll notice we have this repeating Group which just displays a list of all of our sales data and so right now we're going to focus on building out this white group that contains all of the information of our customers so we're going to jump back into our new bottle editor here and the first thing we're going to do is add a group element onto the page and when it comes to this group I'm going to first of all jump to our appearance Tab and just remove the style of this because what I'd like to do is add a flat background color and I'm going to keep that as white I'm also then going to update the roundness of this group's borders to be 20. I'll then jump over into my layout term and when it comes to the layout of this group I'll be stacking elements in this from top to bottom so I'm going to set the container layout to be a column then while we're working on this group I'm going to just quickly update the width settings so I'm going to unselect that this should be a fixed width I'm going to set the minimum width to be zero and leave the maximum width is infinite and now this group is going to take up as little or as much space as it possibly can on my page now if I was to just jump back into my existing bubble editor here the first element you'll notice we have in our white group is another blue group and this contains a text element as well as two buttons and because these elements are positioned horizontally across our page in order to create this experience I'm going to need to add an existing group into my y group and I'll need to set its container layout to be a row so in my new bubble editor I'm going to scroll on down to my containers menu once again and I'm going to add a new group inside of my existing group here now when it comes to this group the first thing I'll do once again is head over to my appearance tab because I'm going to choose to remove the default style of this group I'm going to give it a flat background color and I could set this to be let's say just a light shade of red it doesn't really matter because later on when you preview or publish your application you'll want to remove this background style I'm then going to jump to my layout tab and I'm going to choose to update the container layout to be a row because as I mentioned inside of this group we're going to be stacking elements side by side so that means horizontally and of course a row is the correct container layout to bring that to life I'm also then going to just unselect that this should be a fixed width like always I'll be setting the minimum width is 0 and leaving the maximum width as infinite and now as you can see this group here is taking up all of the space within our existing white group but we're going to come back in a moment and update our height and margin settings to fix that later on but inside of this group the first thing I'd like to do is just add a text element so I'm going to head to my visual elements here I'm I'll choose to add a text element into our red group and when it comes to this particular text element what I'd like to do is first of all display an icon inside of this followed by the word leads so of course in order to display an icon if you remember from our previous modules we're just going to add in a little bit of custom HTML so I'm going to start by adding in an open square bracket followed by the letters f a and then a closed square bracket then following this I'm going to add in the name of the icon I would like to display within this text and in this case it's just going to be called user now I know that because I've gone into my icon Library already and I found out what the name of that icon was then finally I can choose to close off the HTML brackets so I'm going to add another open square bracket followed by a forward slash then the lettuce F A and then a closed square bracket and you'll now see that that will format that as a user icon I'll then add in space and just type in the word leads when it comes to the style of this text I'm also going to remove this style because I'd like to update the font size to be 18. I'm also going to choose to bold this font and then from here I'll need to update the responsive settings of this within a layout tab so for the width of this text element I'm going to unselect that this should be a fixed width I will set the minimum with a zero leaving the maximum width is infinite and I'm also going to update the minimum height to be zero and of course that just means it's going to collapse the element itself around the text inside of it while we're here I'm also going to vertically align this text in the center of my red group and then finally I'll just add in 20 pixels of margin on the right and that is because I'm going to be adding some additional elements on the right hand side of my red group now when it comes to the red group itself as I've shown you in my existing bubble editor on the right hand side of this group I'd like to display two buttons and in order to create an experience where I can position this text element on the left hand side of my red group and two buttons together on the right hand side of my group I'm going to need to add in yet another a group inside of my existing group and I'll show you why I do that in a moment but the first thing I'd like to do is just add a group element into my existing red group and when it comes to this group I'm just going to quickly jump to the appearance tab I'm going to remove the default style of this and I'm just going to give it a flat background color if I would like I could make this something like a shade of yellow or even green if that's what it looks like to you and then I'm going to jump to my layout tab here and just move this to the next position within my group now by default what you'll notice is that my new group has been moved to the right hand side however if I was to select in my text element here and take this option to fit the width of this element to the content inside of it what you'll now notice is that our new group sits directly beside our existing text element and that is because of the way in which our red group here has been structured so if I click on my overall red group you may notice that under our container layout which is set to be a row we have this option here to update the container alignment now the container alignment just determines in which section of this group our elements will be positioned so by default they're all positioned to the left hand corner however if I wanted to Center these they would be positioned in the center where if I wanted them all to be positioned to the right they would all move across accordingly but what I'm interested in showing you is this option here known as space between so if I click this last option here what you'll now notice is that bubble has added an even amount of space between both of these two elements inside of our red group so they're both being pushed directly to each side of the group itself now if for instance on our text element we hadn't selected this option to fit the width of this element to the content inside of it you might not need to actually update the container alignment but I just wanted to take the time to explain this to you in case you ever want to build your own responsive experience and when we build out a navigation menu later on in our tutorial I am going to reference this setting once again but for the time being what I'd like to do is just click on my new group here and update its container layout to be a row because inside of this group I'm going to display two buttons side by side now for the width and height settings of this group I'm actually not going to make any changes to these right now instead I am going to come back and update these in a moment once I've finished adding my buttons into this group so in order to do that I'm going to head to my visual elements and I'm going to choose to add my very first button into this group and this button is just going to display the word new so when this is clicked later on we're going to display a pop-up which will allow someone to add in a new customer into their CRM when it comes to the layout of this button I'm just going to jump to my layout tab here what I'd like to do is just update the width of this element and in this case I'll be setting the width to be 100 pixels and I'm going to keep that as a fixed width because I'm only ever going to want it to be 100 pixels at any given point in time I'd also just like to update the minimum height to be 40 so that way it condenses the actual height of this element and then finally I'm just going to vertically align find this button in the center of our second group here now beside this what I'd like to do is add in another button which if I jump over into my existing bubble editor here you might have remembered but this button here just contains a little icon which looks like a filter so when this is clicked later on it's going to open up a series of filter options that someone can select in order to filter their CRM data but one thing I should point out is that when it comes to working with button elements inside a bubble you're actually unable to add an icon into the button as text so unlike our existing text element here you can't just add a little string of HTML and format an icon inside of this button in fact in order to create a button with an icon in it we're actually going to need to create that from scratch ourselves and the way in which you can create a button of your own is by using a group element so if I scrolling down to my containers menu I'm going to add in yet another group inside of my existing green group and the first thing I'll do for this group is actually update the title of this just because this is going to be a button in my application today so I'm going to need to reference it in a workflow later on so I'm going to call this group filter button I'm then going to jump over to my appearance tab here I'm going to choose to remove the style of this group and I'm going to give it a flat background color and when it comes to this color I'm going to set this to be the same shade of blue as my existing button here so if you'd like that color code it's double zero nine EDB while we're here I'm also just going to set the roundness of this group's borders to be five just so that way it has some slightly curved edges like my existing button and then finally I'll jump over into my layout tab here and update my container layer now because I'm only adding one element inside of this group it doesn't really matter if I select a row or a column I do like to personally select the row option because it's going to provide me with a series of additional settings here that I can change in order to get the alignment of that icon perfect in the center of my group then if I scroll on down to the width of this group I'm going to set this to be 40 pixels as a fixed width then I'm going to select that the height should also be affixed width and I'll be setting that at 40 pixels as well so that way it is now 40 pixels by 40 pixels I can also choose to vertically align this group in the center of my existing green group and then finally I'm just going to add in 10 pixels of margin on the left so that way this group here doesn't touch my existing button beside it now from here what we can do is scrolling up to our visual elements and we can choose to add an icon element into this blue button and for the icon I'm just going to search for the word filter and I'll select this filter icon here I'm then going to choose to remove the default style for this icon and I'm going to set the icon color to be white I'll then jump over into my layout tab and inside of this layout tab I'm just going to vertically align this icon in the center of my blue group and I'm actually quite happy with the existing dimensions of this icon so I'm going to leave it at 30 pixels by 30 pixels the last thing I'll need to do though and I can see I've just forgotten to configure this setting is just select on my blue group once again and update the container alignment here to also be in the center so that means it's going to Center any element inside of this group horizontally in the middle so now if I was to click away you'll see that that icon is going to be perfectly centered both vertically and horizontally and look that is all of the elements I'll need to add inside of my green group so I'm going to select on the green group I am then going to head to my layout tab and first of all unselect that this should be a fixed width I'm going to set the minimum width is zero but I'm not going to leave the maximum width is infinite instead I'm going to select this option here to fit the width of this element to the content inside of it and now that just means that the maximum width will be the total width of these two buttons combined and now you can really start to see that our menu is coming together nicely I'm also going to need to update our height of this group so I'm going to set the minimum height to be zero and then finally I will select a vertically align this green group in the center of my red group here and that is every single element I'd like to add into my menu you so to conclude this I'm going to select on my red group I'm going to head to my layout tab here and I'm going to update the height of this element to be zero and of course because we have this default option selected here to fit the height of this element to the content inside of it it will collapse nicely around all of our existing elements within it there and then finally the very last thing I'll need to do for this red group is just add in some margin around its borders so I'm going to add in 20 pixels of margin at the top I won't add any on the bottom but I'll also add in 20 on the left and 20 on the right and that's now going to ensure that this group won't touch the borders of my existing white group and now I know that seems like a lot of effort to just build a horizontal menu but of course this is going to help us create a truly responsive experience within our application today and so everything's going to be looking A-Okay when we run a preview of our application now below this heading what I'd like to do is actually add in yet another group and this is going to contain a series of headings of its own so if I was to jump over into my existing bubble editor here what you'll see is that I have a red group that sits above a repeating group here and that just displays a series of headings to notify the user of what data they're looking at within each column of our repeating group and so in order to create this red group we're going to jump back into our new bubble editor we're going to head to our containers menu and add yet another group within our existing group the first thing we'll do is jump to our appearance tab I'm going to choose to remove the style of this group I will set the background star to be a flat color and for this color we could make this whatever we want I'm going to make this a light shade of purple just so I can easily see where it actually sits inside of our white group I'm then going to jump to my layout tab here and I'm going to update the container layout of this group to be a row because as you saw we're going to be stacking a series of headings horizontally within this group I'm then going to unselect that there should be a fixed width I will set the minimum with the zero leaving the maximum width is infinite of course so that way this group can become as small or as large as it possibly needs to be on this page and now inside of this group I'd like to add in a series of text elements that are going to act as our headings so I'm going to scroll on up to our visual elements I'm going to select to add a text element into our purple group and within our first heading I'm going to have this display the words contact name because below this I'm going to display the name of the sales contact so when we're working on this element I'm also going to remove the style of this and I'll update the font size here to be 16 I'll also choose to bold this I'll then need to make this element fully responsive so I'm going to jump to my layout tab here when it comes to the width as you probably guessed I'm going to unselect that this should be a fixed width I will be setting the minimum with a zero and of course leave the maximum width is infinite I'm also then going to set the minimum height to be zero and then finally I'm going to vertically align this in the center of our purple group and now from here all I'll need to do is just make a series of copies of this text element and you'll see that when I paste in a new version these are going to continually collapse and give an equal amount of space to each other and for our next text element I'm going to have this display the word company because that's going to display the company in which someone works for I'll make another copy of that and then for this new copy I'm going to have this display the word mobile so that way below this I will display the phone number that belongs to the sales lead I'll make another copy of that and I'll have this heading display the word email so that way we can display the email address of a customer I'll make another copy yet again and for this text I'd like to display the words deal stage so that way we can display whether or not this is a lead an existing customer or something that needs to be followed up with and then finally I'm going to make one last copy here and this is going to display the word owner So within our CRM we'll be able to see who the actual person is that's managing this account it's nice and straightforward and that's all of these text elements I'd like to add in as you'll see these will all have an even amount of distribution within my purple group all I'll need to do now though is just select on the purple group itself open up our layout tab here and the first thing I'll do is update the height so if I set the minimum height to be zero because we have this option selected by default to fit the height of this element to the content within it it's going to snap nicely around all of the text elements but finally I'd also just like to add in a top margin of 20 a left margin of 20 and a right margin of 20. so that way just ensures that this purple group doesn't touch any of my existing elements within my overall white group here now below this this is where we can start to build out the actual CRM itself so this is where we're going to display a list of customer information and of course whenever we're displaying a list of items we're going to need to add in a repeating group so if I scroll on down to my containers menu we're going to add a repeating group element onto our page and of course repeating groups allow you to pull and display a list of information from your database and in this case we're going to be displaying a list of customers so the first thing I'll need to do for this repeating group is jump over to my appearance tab here and we're going to need to configure a data source so that way bubble knows what type of information I want to display in this list and in this case I'd like to display a list of customers and of course that's going to be linked to our customer data type then once we've determined that we want to display a list of customers we're going to need to set a data source for this repeating group so that way bubble knows which specific customers in our database we need to show to this user so for the data source I'm going to perform a search in our database for all of the customers where the company that they belong to so in a moment I'm going to show you how we can actually create a new customer in our database and when we walk through that process we're actually going to link a customer to a company so let's say you were logged in to our company Salesforce account and you create a new customer because you're talking to someone who's interested in product you're selling when you go to create that customer in our database I would like to link that customer to our company so that way when you go to view your CRM you'll only see customers related to your company not customers related to anyone else's company and so what I'm going to do is reference the field here which is known as the created company so this is the company who has created this customer and again later on when we actually build out the workflow to create a new customer in our database I'm going to explain this in more detail but for the time being what I'd like to do is just reference that I want to display only the customers where the created company equals the same value as the company that the person who's logged in belongs to so if you were logged into your account you obviously only want to see the customers related to your company so I'm just going to reference the current user the company that they work for I can then choose to close my data source here and the next thing I'll need to configure before we touch our layout settings is just the number of rows so at this point in time it this repeating group has a fixed number of rows at four so it's only going to display four customers whereas what I'd like to do is have this repeating group either expand or contract based on how many customers it needs to display so if it needs to display only one customer I only want there to be one row whereas if it needs to display a hundred I want this to expand out and display all of the 100 and so in order to do that I'm going to need to unselect that this should be a fixed number of rows I will however keep the number of columns fixed at one because I only want to display One customer per line what I will need to do though is also jump over to my layout tab because I'm going to need to update the container layout for this repeating group now without trying to confuse you straight away I am going to add a group into this repeating group so it doesn't really matter if I select a row or a column I am just going to select the row option for now though so if you're following along I'd also recommend selecting that I'm then going to need to unselect that my repeating group should be a fixed width and of course I'm going to set the minimum width is 0 and leave the maximum width is infinite so that way it can take up as little or as much space as it needs within our overall white group and then finally we can start to display all of the information we want inside of this repeating group for each individual customer now as I'd mentioned I'd like to actually add a group into our repeating group before I display any customer information and the reason I'd like to do that is because if I jump over to my separate browser once again and run a preview of my existing application that I just shown you before what you'll notice is that when we're viewing our customer data here if we were to hover over a individual's details you can see that the background becomes highlighted so that way I easily know who I'm going to be selecting at any given point in time and in order to create that experience we're going to need to add a group element into our repeating group and then inside of that group we can add in all of the customers details so if we just jump back into our main bubble editor here we're going to scroll on down to our containers menu and we're going to choose to add a group into our repeating group now once I've added this group in the first thing I'm going to do is update the name of this I'm going to call this group Customer because this is where we're displaying our customers details before I update the container layout I'm also going to jump over to my appearance Tab and I'm just going to remove the default style of this group I'm going to give it a flat background color I'm going to leave this at white but if you did want to just be able to see where this group sits inside of your repeating group you can always update this to be a custom color in fact throughout this tutorial I might actually just make this a light shade of red so that way you can easily follow along but when I do go to preview my application I'm just going to set the background style to be none so that way it removes that color but for now what I'd like to do is just leave that as a shade of red I'll then jump over into my layout tab here because I'll need to update the container layout of this group and when it comes to this group I'm going to set the container layout to be a row because similar to the group above I'm going to want to Stack the customers data horizontally within this group I can then jump on down to my with settings and I will unselect that this group should be a fixed width I will of course set the minimum width is 0 and leave the maximum width is infinite so that way this group is going to take up as little or as much space as it can within my repeating group cell and now I will come back in a moment and also update the height but before I do that what I'd like to do is actually now display our customers details and in order to display a customer's details in our red group we're going to scrolling up to our visual elements and we're going to add a text element into the group itself now one thing I should just point out is that in order to display a customer's details here if I was to start inserting Dynamic data you'll see that I'm unable to actually reference the information stored in our repeating group cell and the reason for that is because this text element itself doesn't actually sit directly within our repeating group instead it sits within our red group that then sits within our repeating group so in order to pull the data from the current sales customer in our repeating group what I'm going to need to do is actually pass some data along the chain of elements here so from our overall repeating group I'd like to pass the data of the current sales customer into our red group so if I just quickly Sidetrack here and click on my red group I'm going to select that I'll need to store a type of content into this group and the type of content will of course be our customer then for the data source I'd like to pull the data from the current sales customer so that is the customer within each individual cell of our repeating group then from here if I was to click back into my text element you'll see that I can now reference the parent groups customer and so because this text element sits within our red group the red group is kind of taking care of it so you can think of the red group as the parent to this text element which is why it is referenced as the parent group and because we're storing the value of a customer inside of it I can easily reference any data I would like from that customer and in this instance I'd like to reference the customer's contact name because that's going to sit directly below our relevant heading here then when it comes to the layout of this text element I'm just going to open up our layout tab and what I'll need to do is unselect that this should be a fixed width like always with any text element I'll be setting the minimum width is zero leaving the maximum width is infinite so that way it takes up as little or as much space as it possibly can within this group I'm also going to set the minimum height to be zero and that way it will collapse around this text nicely then while I'm here I'm also going to vertically align this text element in the center of my red group before I then go ahead and add in 10 pixels of margin at the top and 10 pixels of margin on the bottom and that is all of the margin settings I'll need to update for this particular text element in order to display all of the remaining information similar to our headings above I'm just going to make a copy of this text element within our red group then all I'll need to change in our appearance tab is the data field I'd like to reference so in this case instead of displaying the parent group's customer their name I'd like to display the name of the company that they work for then I'll make yet another copy of this text element and in this case I'd like to display the phone number of this person so this is going to be their contact number it's nice and straightforward I'll just move this property out of the way for now though I'm going to make another copy of that text element and in this case I'll be displaying the contact email it's nice and straightforward once again I will make another copy here and for this text element I'm going to display the customer stage so this is going to be where they are within the deal lifecycle and because this field is linked to an option set so if I just jump over into my data tab here and if I was to open up our customer data type what you'll see is that under our customer stage here this is of course linked to our customer stage option set list so within our option sets we had the customer stage and this included some options like needs analysis qualified follow-up and then closed and so because that text element on our page is referencing our option sets we'll just need to choose to display the display text of that option set so I'm just going to select the current stage it's display text and then finally I'm going to make one last copy of this text field here and in this case I'd like to display the owner of this account and so in order to do that I'm just going to display the parent groups customer the account owner and that's going to link to a user which then means I'm going to need to select that I want to display the user's name it's nice and straightforward and that is how we can display all of the information for a particular customer in our database but one thing I have noticed here is that all of my text elements are currently touching side by side and so that just means that if these text elements were quite long they're just going to be touching in our overall CRM dashboard and so to avoid that from happening what I'm actually going to do is select on my second text element here I'm going to jump to my layout tab and I'm just going to add in 10 pixels of margin on the left then I'm going to do the the exact same thing for my third text element I'll add 10 pixels of margin on its left I'll do the same thing for my fourth as well as my Fifth Element I'm going to add in 10 pixels of margin on the left there and then finally I can do the exact same thing for my last element there so it will also have 10 pixels of margin now because I want these text elements to sit directly below the relevant title above I'm also going to need to reflect the exact same margins I added to the left hand side of each text element to the relevant heading Above So if I select on my company heading here I'm going to jump to my layout tab and I'm just going to add in 10 pixels margin to its left I'll then do the exact same thing for my mobile heading my email heading my deal stage heading as well as my owner heading and that's just going to ensure that when this page reduces in size these headings aren't going to be touching directly as well but that's all I want to change on my headings there after I finished adding in all of the information I want to display inside of our red group I can now choose to collapse the overall height of this group so I'm going to select on my red group open up my layout tab and within our layout tab I'm just going to first of all remove the minimum width of this group I'm going to set that to be zero of course leaving the maximum width is infinite I will also update the minimum height to be zero here which now you'll see it will collapse nicely around all of the text elements inside of it there and when it comes to this group I'm not going to need to add any margin in this group specifically instead I'm going to add that onto our repeating group in a moment but there is one last thing I'll need to add to this group and that is just a condition that allows us to create that feature that changes the background color of the group whenever we hover over it so you may remember in my example before when I'd shown you a preview of our CRM when we had hovered over a particular user it just changed the color of the background so I kind of highlighted it now thankfully that is a relatively easy experience to create all we'll need to do is select our red group jump over to our conditional tab here and we can just choose to define a condition that recognizes when this group is hovered so that means when a user is hovering over it with their Mouse and in this case the behavior I'd like to change is just going to be the background color of this group so I'm just going to type in the word color and I'll update the background color and instead of this being the shade of red I'm going to set this to just be a shade of gray if you'd like that color code it's f8 f8 f8 and of course when I go to preview my application in a moment I'm going to remove that red background color but if you really wanted to see what this condition is going to look like what I love about Bubble is that you can select this option here to toggle this on and off so you can see that this is going to be the shade of gray that's going to display whenever this condition is true now that's actually everything I wanted to change for that group the last thing we'll need to do on this page is select the overall repeating group here we'll then need to jump into our layout tab and it's at this point that we can update the minimum height of this repeating group to be zero which means that it's going to collapse nicely around our very first cell now of course just because you only see one cell in our repeating group doesn't mean that it is only going to display One customer in fact this repeating group is going to continually expand out and display as many customers as it needs to for that company now while I'm in my layout tab for our repeating group I'd also just like to add in 20 pixels of margin at the bottom 20 on the left and 20 on the right and that's going to ensure it aligns nicely with our existing purple group above it but finally the very very last thing I'll need to do for this repeating group is head over to my appearance Tab and just update the minimum height of each row so although in our layout tab here we've updated the minimum height of the overall repeating group element so that is what you see here around all of the borders of our repeating group I'm also going to need to update the height of each row inside of that repeating group and in this case it's nice and easy I'm just going to set that to be zero so that way it collapses nicely around the red group inside side of it there and just like that that is how we can display all of our customer information within our own custom CRM the very last thing we'll need to do from here is just select on our overall white group so we're kind of having a full circle moment we're finally coming back to the main group we've added onto this page and at this point I just want to add some margins around this group so we're going to jump to our layout tab and for the margins on this group I'm just going to add in 20 pixels of margin at the top 20 on the left and 20 on the right I am also going to update the minimum height to now be zero and because we have this option selected by default to fit the height of this element to the content inside of it what you'll see is that it's going to collapse nicely around the repeating group inside of it so if I just close this property editor you can finally see that our page has started to come together quite nicely now unfortunately at this point if I was to run a preview of this page it'd actually be quite pointless you wouldn't see any data and that is because we haven't yet created the feature to add a new custom to my into our CRM that definitely is coming up within our tutorial but I'm not going to run a preview of this now because if you were to look at this page unfortunately there just wouldn't be any customer data to show you within our CRM what I am going to do though is just jump back into my notion checklist and finally tick off that we finished building out the feature to display a list of customers within our CRM and moving forward within the next few modules in our course here we're really going to start to make this CRM quite powerful by layering on some additional features foreign working our way through the list of features in our checklist today the next thing I want to cover is how we can build out the feature to create a new customer within our CRM and thankfully this is a relatively straightforward process to work through so what we're going to do is we're just going to jump right into our bubble editor and open up our existing CRM page so this is the page that's going to display all of the customer details that belong to a particular company and you may remember that on this page we had added a button in the top right hand corner that just displays the word new today with the experience I want to create I want to display a pop-up whenever this button is clicked and on that pop-up we're going to have a series of input fields which will allow someone to add in all of the details of a customer and then of course once they choose to create that customer it's going to run a workflow and it's going to create a new entry in our database so the first thing we'll need to do is add a pop-up element onto our page so if we scroll on down to our containers menu we're going to add a pop-up you can add it anywhere on the page because it's actually going to display over the top of your page now when I'm working with pop-ups the very first thing I traditionally do is just update the title of these just so that way whenever I need to reference the pop-up I know exactly which element it is within my overall elements tree so I'm going to update the name of this to be called pop-up create customer then from here we're going to jump to our layout tab and we're going to set a container layout for this pop-up because of course pop-ups are like a group that displays over the top of your page so as you can see here it adds a layer of opacity across the rest of your page so that way the user's focus is on the pop-up element itself now because this acts like a group what we're going to need to do is set a container layout and when it comes to this pop-up I'm going to be stacking elements in this from top to bottom so that means I'm going to set the container layout as a column because that will allow me to stack elements vertically while we're here I'm also just going to update the width of this pop-up I'm going to unselect that this should be a fixed width I'm now going to set the minimum width here to be zero but when it comes to the maximum width I'm going to leave this as 600 pixels and the reason for that is because if I was to leave that as an infinite Max width as you just saw it's going to take up the entire width of our page and that's not the experience I want to create and the reason why I've selected 600 pixels is purely just a personal preference of mine there's no scientific approach behind it but with a minimum width of zero that just means that this group is going to be fully responsive as it's going to continually expand down as our page shrinks in size now I will come back later on and update the height of this particular pop-up but before I do that I'm going to need to add in all of the elements I'd like to display inside of this pop-up and the very first element I'd like to add into my pop-up is just going to be a heading at the top in the center so if I head to my visual elements I'm going to add a text element into our pop-up and this is just going to display the words new customer now I'd like to customize the style of this particular text so I'm going to remove the style here I'm going to set the font size to be 18. I'm also going to align this text in the center and then finally I'm going to choose to bold this text now from here I'll also need to update the responsive settings of this text element so in order to do that I'm going to jump to my layout tab and of course when I'm working with any text element I will unselect that it should be a fixed width I will set the minimum width is zero leaving the maximum width is infinite so that way it will take up as little or as much space as it possibly can on my page I'll also set the minimum height to be zero and because we have this option selected here to fit the height of the element to the content inside of it it's going to collapse nicely around that text but finally the last thing I'd like to change within my layout tab is just the margin around this text I'm going to add in 20 pixels of margin at the top 20 pixels on the left and 20 pixels on the right and that of course is just going to ensure that this text element doesn't touch the borders of my pop-up now below this text element I actually want to display another text element and in order to streamline that whole process I'm just going to make a copy of our first heading select on my pop-up and paste in another version of this and now for this text element I'm going to jump to my appearance Tab and I'm going to have this display the words company contact name and the reason for that is because below this text element I'm going to start to add in the series of input fields which will allow a user of our Salesforce application to add in the details of a customer or a lead so this is just going to indicate what information someone will need to add into what field when it comes to this text element I'm going to update the font size to be 14 so I'm just going to shrink this down a bit I'm also going to align this to the left so that way it's no longer in the center then below this I can add in an input field where of course someone can add in the contact name of the person they're speaking to at a company so I'm going to scroll on down to my input forms and I'm going to add a stand input field into my pop-up and the first thing I'll need to do is just update the name of this input field so that way when I build up my workflow in a moment to create a new customer I know what data to reference on my page and for the name of this input field I'm going to call this input new customer name and that's all I'll need to change here for now I'll also jump into my layout tab and of course I'm going to make this element fully responsive which means that I'm going to need to unselect that this element should be affixed with I will set the minimum width as zero leaving the maximum width is infinite I am going to keep the height fixed at 48 pixels though I won't need to change that but the other thing I'll need to do is just add in a left margin of 20 and a right margin of 20. now below this I'm going to continue adding in a series of input fields and in order to save time having to build those from scratch I'm just going to make a copy of my existing heading and my input field here so I'm going to select both of these click back into my pop-up and paste in another version although then move my heading down here I'll then jump to the appearance tab of my text element and I'm going to have this display the words company name so this is where a user can store the actual name of a company itself and perhaps to help differentiate between these two input Fields I might actually just update the text in our first heading I'm going to have this display the word customer contact name instead of company contact name a user might just get confused between the two but of course what I'll also need to do is just select on my new input field and I'll need to update the name of this and I'm going to call this input new customer company name so now I can clearly interpret that this is where we're going to store the actual company name itself then from here I'm going to add in another input field so I'm going to select both my text element and my input field once again I'll make a copy of those I will similar to before move my text heading down and I'm going to update this text to display the words customer email and as you probably guessed this is where we're going to store the email address for a customer or a lead so I'm also going to need to select on the input element itself and I'm going to update the title of this to be called new customer email and now contrary to what you might think I'm not going to set the content format here to be an email instead I'm just going to leave this as a text field and the reason for that is because you only need to store this as an email field when you're creating a new account because in that case you'll need to make sure it is a valid email address whereas I'm actually going to be storing this data as text in my database so I can just leave that as the text option then from here I'm going to do the exact same thing once again so I'm going to select both my heading and my input field I will select in my pop-up paste in another version of this I'll drag my heading down and this is going to display the words customer number I'll then select on my new input field I will update the title of this to be called input new customer number and once again I will leave the content format as text I'm not going to update this to be a number or an integer I'm just going to keep this as it is then from here we're going to make another copy of this input field and a heading so I'm just going to copy those select my pop-up paste in a new version I'll then drag my heading down once again I'm going to update this to display the words deal size now when it comes to this input field the first thing I'm going to do is update the title of course I'm going to call this new customer deal size but when it comes to the content format of this field I am actually going to update this I'm going to set this to be a currency and I'm going to leave the currency prefix as dollars just because I'm currently based in a country where we use dollars but by setting this to a currency that's going to format this as a number which if you remember in our database we were storing the deal size as a number field and the reason we were doing that is because when you're storing numbers you can actually perform calculations so later on when we build out our sales dashboard I'll be able to calculate how much is in our sales Pipeline and to do that I can just add up all of the customer deal size values together but that's all I'll need to change for this moving down our list I'm going to need to add in another input field only this time instead of adding in a standard input field I'm going to use a drop down menu I am still going to need to just make a copy of my heading element here so I'm going to select on my deal size make a copy of that click on my pop-up and choose to paste in a new version of this I'll move that down on the actual pop-up itself and for this text I'm going to update the title here to be called status so that way this is where someone can add in the status of this customer now if I scrolling down to my input forms I'm going to choose to add in a drop down menu for this field and first of all I'll be updating the title of this to be called drop down new customer status and for this drop down menu I'd like to reference the list of option sets we had previously created in our database so if we were to just quickly Sidetrack and jump over to our data tab here what we can do is open up our option sets and you may remember that we had this option set list called customer status so this just determines if a customer is a lead an actual customer or if they've actually expired and so what I want to do is reference these three options within that drop down menu and I can easily do that by just jumping back into my design Tab and for the type of choices that I want to display in this drop down menu I'm just going to display a list of dynamic choices which means I'm going to reference a list of choices that already exist in my database and of course they are my option sets so for the type of choices I'm just going to reference my customer status option set then from here I'd like to reference all of the options inside of that list so I'm going to select the all customer status and in terms of the text that's going to display I'd like this to just be the current options display text so that's now just going to display the actual name of each customer status finally I can then jump over to my layout tab because I'll need to update the responsive settings of this input field before I do that though I'm just going to move this to the next position within my overall pop-up so that way it sits below the relevant heading I'm then going to unselect that there should be a fixed width of course I'm also then going to set the minimum width to zero leaving the maximum width is infinite for the height I'm happy to leave that as a fixed value at 48 pixels but I'll also just need to add in 20 pixels of margin on the left and at 20 pixels of margin on the right so that way this drop down menu fits in line with all of my existing input fields that sit above it there and now below this drop down menu there is just one last input field I'd like to add onto my pop-up and it is also going to be a drop down menu so to streamline that whole process I'm going to select both my heading and my drop down menu here I'm going to make a copy of those I'll then select on my pop-up and paste in a new version of those I'll move my heading down here and I'm going to update the text here to display the words deal stage and at this point in time within my drop down menu I'd like to reference my separate options at least which was known as my deal stage so if I jump over to my database once again you'll remember that we have this a customer stage option set list so this just determines at what point in the sales life cycle this customer is in so do they need some additional scoping are they a qualified lead do we need to follow up with them or are they closed and so of course in order to reference this option set list I'm going to update the type of choices I'm going to display for this drop down menu I'm going to have this be my customer stage option set list when it comes to the options I'd like to display from this list it's going to be all the customer stages and then finally I'll just set the caption to be the current options display it's as simple as that and that is all of the input Fields I'll need to add onto this pop-up the very last thing I'd like to include is just a button which when clicked is going to trigger a workflow to create a new customer in our database so if I scroll on up to our visual elements I'm going to add in a button into my pop-up and I'm going to have this button display the words create customer I'll then jump to my layout tab because I'd like to move this button to the last position within my pop-up I'm then going to also unselect that this should be a fixed width and for this button I'm going to set the minimum width as zero but I'm going to leave the maximum width as 200 pixels and so that just means that this button will reduce in size however it will never be larger than 200 pixels in width which is enough to fit both of my words inside of it when it comes to the height though I am going to leave that at 45 pixels I'm quite happy with that I would also like to horizontally align this button in the center of my pop-up before I then add in 20 pixels of margin at the top 20 on the bottom 20 on the left and 20 on the right and that concludes everything I'd like to add into this pop-up so from here what I'm going to need to do is actually click on my pop-up head to my layout tab and it's at this point that I can Now set the minimum height to zero and because we have this option selected here to fit the height of this element to the content inside of it it's going to collapse nicely around all of my elements that sit directly within it and that is everything we'll need to configure for this pop-up of course what I'd now like to do is create a workflow that's going to run whenever this create customer button is clicked and when that workflow runs I'd like to create a new entry in our database before I do that though I'm going to need to create an additional workflow that actually displays this pop-up on our page so if I just click away from this pop-up here one thing I should point out is that by default pop-ups are not visible on your page they'll only be displayed whenever you call them within a workflow so in order to show that pop-up I'm going to need to click my new button here I'll open up our property editor and I'm going to choose to start a workflow whenever this button is clicked and thankfully this is a super straightforward process all I'm going to do is head to my element actions and I'm going to choose to show an element and that element is of course might pop up create customer now because this workflow is related to the feature that allows us to create a customer in our database what I'm going to do is click on my workflow trigger and I'm going to update the event color here to be blue so that way later on on this page if I ever need to adjust any workflow related to this specific feature I know that that workflow color is blue so that way I can easily interpret which workflows I need to work with then after building this workflow we can now go on to build out the main workflow which creates a customer in our database so we're going to jump to our design tab here we're going to need to show our pop-up once again so in order to do that we're going to head to our elements tree we're going to select on our pop-up create customer and that's now going to display this pop-up I'll then select on the create customer button and choose to start a workflow whenever this is clicked and within this workflow I'd like to add in a couple of different steps the first thing I'd like to do is of course create a new customer in our database so I'm going to choose to add in an action and I'm going to select from the data events and in this case I'd like create a brand new thing the type of thing I'd like to create is of course going to be a customer and then from here I'll need to match all of the relevant data fields in our database with the relevant input fields on our pop-up so to streamline the process of adding all of those in I'm just going to tick this option to add in all of the necessary Fields here and now of course I'll just need to match these with the relevant fields on our page so for the very first field I'll need to customize this is going to be the account owner so this is the person who is responsible for this customer and in this case this is going to be the person who's creating this customer at this point in time and so that is nice and easy it's just going to be the person who is the current user so that is the person who is logged in and is creating this new customer now for the next field this is known as the closed date and of course if we're adding a customer as a new lead into our database this field might not actually be relevant at this point in time so I'm personally just going to delete this later on I will show you though how we can update the close date of a customer so that way we can easily reference it within our sales dashboard the next field though is the name of the company that this person works for so this is the company that we're going to be storing on this customer account and so this company itself is just going to be the value of our input company name so this is our input new customer company name here it's value nice and easy for the contact email of this customer I'm just going to type in the word email and then I'll be able to reference the relevant input field so our input new customer email I'll then do the exact same thing for our contact name so this is the name of our contact for this customer account this is just going to be the input new customer name I'll select its value for the number I'm just going to type in the word number here and I can reference the relevant input field for the created company so this is where I'm going to link the customer back to the company that's actually managing this account I'm going to have this be the current user so once again the person who is logged in creating this customer their company so that is the company that they work for then for the customer stage I'm just going to type in the word drop down and I'll be able to reference the drop down now what I can see here is that I had forgotten to update the title of that drop down menu and so what I'm actually going to do is just jump back into my design Tab and update that now just so that way I can follow best practice when I'm creating this workflow so if I jump into my design tab here I'm going to select on my deal stage drop down menu and if I head up to the title I'm going to update this to be called new customer stage I'll then jump back into my workflow editor and for the customer stage if I just type in drop down I'll now be able to select the drop down new customer stage its value then for our customer status this is also going to be a drop down menu this will be our drop down new customer status its value and then finally for our deal size I'm just going to type in the word deal and I'm going to reference the input new customer deal size its value there and now at this point in time this workflow would have run and it would create a brand new customer inside of our database but right now if we jump back to our design tab this pop-up would still be displayed on our page whereas what I actually want to do is create an experience that closes this pop-up and resets all of the values of this input field so that way if I was to add in a customer's details I would then close this pop-up and if I was to open this pop-up once again I want all of these values of our input fields to be blank so that way I can just jump right ahead and add in another customer I don't want to have to remove all of the existing details of the last customer that I just created and so in order to create this experience I'm going to do two additional things in my workflow the first thing I'm going to do is hide our pop-up so if I add an additional step into my workflow here I'm going to head to our element actions and I'm going to choose to hide an element that element will of course be our pop-up create customer and then finally I'm going to choose to reset the input fields on our pop-up so if I add an additional step again I'm just going to type in the word reset and I'm going to select this option to reset relevant inputs then finally in this workflow I'm going to click on the workflow trigger itself and just update the event color here to be blue so that way I can tell that these two workflows are related to the same feature of creating a new customer account and thankfully at this point in time that is everything we'll need to build out when it comes to bringing this feature to life what I'd now love to do is just log into my account and show you how this is going to function when it comes to creating a new customer in our database and of course once we create a new customer all of their information will be displayed within our own CRM over in a preview of my CRM page I'm logged in as the existing account that I've created now if I'd like to add a new customer I'm going to head up to our button here I'll click this and our pop-up will display and of course you'll see that we have the ability to add in all of the information into our relevant input Fields so I'm just going to quickly jump ahead and I'm going to add in all of the details here and after I jumped ahead and added in all of this customers details what I'm going to do is Select to create this new customer and that workflow is going to run and it's not only going to create a new customer in my database but of course it's also going to hide my pop-up and what you'll now see is that that customer's details are being displayed within our overall CRM and of course if I was to hover on their details it's going to highlight this row within our overall database jumping back into my notion checklist I'm going to tick off that we've finished building out the feature to create a new customer and thankfully this wasn't anything too difficult that we couldn't handle and it's at this point that you can really start to see our Salesforce clone come together quite nicely moving down through our list of features in my notion checklist the next thing I want to cover is how we can build a filter for a custom CRM and thankfully there's not too much involved in this process but of course I'm going to be sure to explain everything you need to know in as much detail as I possibly can so what we're going to do is we're going to jump over into our bubble editor here and we're going to open up our existing CRM page so this is the page that's going to display a list of all of the customers within a company account now you may remember that in the top right hand corner we created this little custom button using a group and this button will be used to display our own custom filters today so when someone clicks on this button I'd like to display almost like a group that sits over the top of my page and inside of that I'm going to allow someone to filter through a list of all of their customers by either the customer's name the customer's status or even the customers deal stage and so in order to actually design that experience as I mentioned we're going to use something like a group element only we're going to run into a problem if we were to add a regular group onto our page so if I was to add a standard group element below our filter button here what you'll see is that it's going to push our main group down on the page whereas in the experience I'd like to create today I actually want this group to hover over the top of any elements on my page so I'm just going to quickly delete this group here and instead of using a standard group I'm going to use what's known as a focus group so this is called the group Focus inside of your containers menu here the first thing you'll notice is that it's automatically positioned in the top left hand corner and that's because as the name would suggest a focus group actually is pinned and focused to one element on your page so focus groups are perfect for creating drop down menus that hover over the top of any other element So within the configurations here you'll see that we have the ability to update what's known as the reference element and in this case I'd like to pin this focus group to my filter button so for the reference element I'm just going to type in the word filter I'm going to pin this to my group filter button and now you'll see that my focus group will automatically sit directly below that button regardless of where that button is on my page so as the page decreases in size and the filter button moves in towards the left this focus group will follow the exact same position as the filter button itself and another thing you'll notice is that this focus group actually hovers over the top of any other element on our page so it truly just creates a nice drop down menu experience and when it comes to updating the additional settings for this focus group before I make any changes the first thing I'd like to do is actually just update the title of this I'm going to call this group Focus filter menu so that way if I ever need to build a workflow to display this group I know exactly which group to reference then if I was to move down into our appearance tab you'll also notice we have these options to set the offset of this group so the offset just refers to this group position on our page so right now you can see that this focus group is pinned directly to our filter button so if I was to just add in an offset of 10 pixels at the top it's just going to add a little bit of spacing which is purely just a personal preference of mine and then below this you'll also see the option to offset this to the left and now if I was to add in a positive number so something like 100 pixels you'll see that this is going to add in 100 pixels of almost like margin on the left hand side of this focus group and it's actually going to push this in the wrong direction I want so it's currently pushing it to the right hand side of my app whereas I'd actually like to position this further to the left hand side and so a great little trick if you're using a focus group is that you can add in almost like a negative margin so a negative left offset so if I was to set this offset to be something like minus 500 what you'll now see is that our focus group will be positioned further to the left of our page and of course this is still technically going to be pinned to our filter button so whenever that filter button moves this focus group will also move and now the reason why I've set the offset as 500 pixels today is because I'm just going to need to expand the overall width of this focus group to fit in all of my elements inside of it so in a moment we're going to jump to our layout tab and we're just going to update the width settings of this but before I do that I'd just like to quickly remove the default style of this focus group just while we're working with this element I'm going to set this to have a solid background color of something like a light shade of yellow and of course this is purely just a personal preference of mine whenever I'm working with groups I just like to color code them so that way I can see where they are on the page we're then going to jump to our layout tab here and because this focus group is technically a group as the name would suggest we're going to need to set a container layout inside of this group now when it comes to this group I'm going to display three input elements directly side by side so they're going to be positioned horizontally within this group and of course when we're displaying elements horizontally we'll need to set the container layout to be a row when it comes to the width I'm then going to unselect that there should be a fixed width I'm going to set the minimum width as zero and for the time being I am going to leave the maximum width is infinite but I will come back and show you how we can update this in a moment I'll also do the exact same thing for my height I'm just going to leave that as it is now for the elements inside of this focus group as I mentioned I'm going to add in three input Fields the first one is going to be a text input field which will allow us to filter a list of customers by a company's name then beside that I'm going to add in two drop down menus which is going to allow us to filter customers by things like their deal status and their deal stage so I'm just going to jump down to my input forms here and I'm going to add in a standard input field and before I make any changes to this input field the first thing I'd like to do is update the title of this so I'm going to select on this title and I'm actually going to call this filter account name so this is of course as I just mentioned the input that will allow us to filter customers by the company's name and when it comes to the settings I'd like to update for this input field I'm just going to quickly take the time to update what's known as the placeholder text so you'll see that by default every input field has this placeholder text that displays the words type here so unlike initial content placeholder text just temporarily display some text until a user actually clicks into that input field and then it automatically removes that text and allows someone to type something into it which is actually quite the opposite to something like initial content which allows someone to actually select the text and make changes to it so our placeholder text is as the name would suggest just a placeholder and in this case I'm just going to update this to display the words account name so that way a user knows that this is where they should type in the name of a company and they're going to choose to jump over to my layout tab because I'd now like to update the responsive settings for this input field the first thing I'm going to do is unselect that this element should be affixed with I'm going to set the minimum width zero but I would like to add a maximum width here of 200 pixels so that just means that with a minimum width of zero this input field will reduce to the smallest possible size but at its larger size it will be no greater than 200 pixels I'm also just going to keep the height settings as they are so I'm going to keep that fixed at 48 pixels I will also then vertically align this element in the center of my focus group and then finally add in 10 pixels of margin at the top 10 on the bottom and 10 on the left and of course that's just going to ensure that it won't touch any borders of the focus group itself now beside this I'd like to add in another input field and that's going to be a drop down menu so if we head to our input forms I'm going to grab a drop down menu I will add this in here and when it comes to this drop down menu I'm going to allow someone to select how they want to filter customers by the status of that customer's account and so the first thing I'm going to do is actually just update the name of this I'm going to call this drop down filter our customer status and within this drop down menu I'd like to display our list of option sets in our database which are based off our customer status so if I was to jump over into my data tab here and open up my option sets you may remember that we had created this option set list which is known as our customer status so this will just determine if the customer is a lead an existing customer or if they've expired and so in order to display these three options within this drop down menu what I'd like to do is update the choices style of this and I'm going to have this reference a list of dynamic choices so that just means it's going to pull a list of options from our database and for the type of choices I of course want this to be my customer status option set for the options I'd like to display within this list it's going to be all of my customer status option sets so that's every single option in that list and then finally for the actual caption which is just the text that's going to display inside of this drop down menu I'm going to have this be my option sets display tag which is just the name of each option I'll then jump over into my layout tab because once again I'll need to make this element fully responsive I'm going to unselect that this should be a fixed width I will then set the minimum width to zero only in this case I'm going to set the maximum width to be 150 just because I won't need as much space for this particular input field for the height though I'm going to keep that fixed at 48 pixels I'll also vertically align this in the center of my focus group and then finally add in 10 pixels of margin at the top 10 on the bottom and 10 on the left I can also see that I haven't taken the time to update the placeholder text so at this point in time a user wouldn't know what this filter will do so we just need to jump back to our appearance tab here and we're going to update the placeholder text to display the words customer status and that's all we'll need to change there and then finally I'm going to add in one last drop down menu only in this case it's going to allow someone to filter through accounts by the deal stage and in order to streamline that process I'm actually going to make a copy of my existing drop down menu here so I'm going to select this element I'll make a copy I'll then click in my yellow focus group and paste in a version of that and the first thing I'll do is just update the title of this input field I'm going to call this drop down filter customer stage not status I'm also going to update the placeholder text to display the words customer stage instead of customer status once again and then finally when it comes to the list of options I'd like to display within this drop down menu instead of displaying my customer status I'm going to display my list of customer stage option sets I'm also then just going to need to update the choices source so I'm going to reference all of the options within my custom stage option set list and I can keep the caption as it is it's just going to display the display text for each option set now the only thing I'll need to change within my layout tab here is that I just like to add a right margin of 10 pixels just because this is going to be the very last element that sits inside of this focus group so I don't want Its Right border touching the actual border of the group itself but that concludes everything I'd like to add into this focus group so now what I'm going to need to do is select on the focus group and update its layout settings so that way we can have this wrapped nicely around all of my input Fields inside of it so first of all when it comes to the height here I'm going to set the minimum height to be zero and because we have this option selected to fit the height of this element to the content inside of it it's going to collapse nicely around all of our input Fields but of course at this point in time we have all of this empty space on the right hand side and the reason for that is because we have a maximum width of infinite for this focus group so it's trying to take up as much space as it possibly can on our page whereas in fact all we really need is enough width to fit all of these three elements inside of it so in order to find out the exact number of pixels I need for my maximum width what I can do is just some basic maths so if I was to select on my very first input field here I I can see that its maximum width is 200 pixels so at its largest possible size it will only ever be 200. if I was to then select on my second drop down menu I can see that its maximum width is 150. so 200 plus 150 is 350. we also then have a third drop down menu with a maximum width of 150 and so if we were to add another 150 pixels onto the existing two elements that's going to equal 500 pixels in total but another thing we'll need to factor in is the margin we've added horizontally across this group so on our very first element we've got 10 pixels of margins on the left for our second element we've got 10 pixels of margin on the left as well so we're going to need to add an additional 20 pixels so far so that's 520 pixels but for our very last element we have two margins so there's two margins with 10 pixels each so we're going to need to add yet another 20 pixels to the total so the grand total right now is 540 pixels in maximum width so if I was to select on my yellow focus group here I could set its maximum width to be 540 pixels and that's going to collapse perfectly around all of my input fields that sit inside of it and that is all I will need to do when it comes to the design of this focus group here one thing I should point out is that by default a focus group will not be visible on your page so we're going to need to create a workflow to toggle this element on and off so in order to do that I'm going to select on my filter button here I'm going to head to my appearance Tab and I'm going to choose to start a new workflow whenever this button is clicked and within this workflow I'm just going to type in the word toggle and I'll choose to toggle an element and that element will of course be my focus group so I'm just going to type in the word focus and select my group Focus filter menu which really is as simple as that and the very last thing we'll need to do when it comes to creating this filter is build out a way to actually make this filter affect the customers that are displayed within our repeating group on the page age so let's say if someone was to come to this page and it was to load all of their existing customers for their company I obviously want to have the information selected within this focus group to impact which customers are being displayed and the way I can do that is by adding some additional constraints on the data source for my main repeating group so if I was to select on my red group here so this is my group customer which just contains all of my customers information now we'll just need to remember that this group sits inside of a repeating group so in order to access that repeating group I'm going to right click on my red group and select its first parent and now you'll see we have the ability to access our repeating group now what I'd like to do is Select my data source here and you'll see that at this point in time we only have one constraint on this data source so it's only displaying a list of customers where the company that they belong to equals the current users company so that is the company that someone works for whereas what I'd like to do is add an additional series of constraints that just displays customers based on the information of these input Fields so I'm going to choose to add a new constraint and the first constraint I'm going to select is going to be the company name of this customer so I'm going to select the company name data field and what I'd like to do is only display a list of companies where the company name contains the same value as the input account name here so I'm going to reference that input field I'm going to type in the word account and I'll reference our filter account name field its value then I'd also like to filter out all of the customers where the status so the customer status field where it equals the same value as the option selected within this drop down menu here so I'm going to type in the word status and I'm going to select from the drop down filter customer status its value and then finally I'm also going to add a constraint that just recognizes when the custom a stage when the value of this account equals the same value selected from the customer stage drop down here so I'm going to once again type in the word stage and I'm going to select the option for our drop down filter customer stage its value it's nice and straightforward now one thing I should point out at this point in time is that when this repeating group now loads it's only going to load customers that fit all of this criteria and of course if our focus group is hidden by default and there's no values Within These input Fields bubble's going to have a hard time finding customers because there's actually going to be no customers with blank values for these fields and so as it stands this search here would cause a bad user experience because no customers would actually load and so in order to make this fully functional what we need to do is simply just select this option here to ignore empty constraints and that just means that if any of these constraints are empty bubble's just going to ignore it as if it does not exist so if someone hasn't typed in a value into our account name each just going to ignore this whole field and likewise if someone hasn't selected a value from our drop down menus it's also just going to ignore these constraints as well and so that just means that by default our top constraint here where we're only displaying customers that belong to the current users company that is going to be the only constraint that loads until someone actually adds a value into these input Fields now that's actually everything we're going to need to build out for our filter here what I'd love to do is just run a preview of this and show you how it's going to function when I want to sort through all of the customers within my own Salesforce account over on a preview of my CRM page here I just jumped ahead and I've added in a few customers into my own account and so let's say I wanted to filter through all of these customers and find a specific person what I could do is head over to my filter button open this up here and I could start typing in the name of an account so let's say I want to search for my SpaceX account you'll see that my contact with Elon Musk is being displayed because we have him in our sales pipeline if I wanted I could also just remove that filter and filter customers by their status so if I wanted to filter out all of my leads so that way I know who I'm prospecting I could select that I could then choose to close my filter and I could look at all of that information and finally I could even add a layer onto my filter and filter out all of these people who are qualified which you can obviously see there's none or all of the people who need to be followed up with in which case you'll just see that the only account I had that meets this criteria is my my good old buddy of Bruce Wayne jumping back into my notion checklist I'm just going to tick off that we've finished building out our own custom filter for our CRM Now by all means today I've just shown you how you can filter through three Fields within your customer data type but you can choose to add in as many different custom filters as you would like following the exact same process that I've just shown you moving down through our list of features I have set up for us in our notion checklist today the next thing I'd like to cover is how we can build out a dedicated customer page just to display the full details of a specific customer within our own Salesforce account so if I was to jump over into my bubble editor and open up our CRM page you may remember that of course on this page we have the repeating group that's displaying all of the customer details in our database but as it stands this repeating group only just displays a quick snapshot of some of the most important fields for each customer it doesn't actually show the salesperson the full information about that account and of course also on this page users are unable to make changes to this customer's account so they're obviously going to need a dedicated space in our application where they can update things like the deal stage or even who the point of contact is for that customer account now what we're going to do today is build out a dedicated page to display all of this information and then later on we're also going to create a feature that allows us to update the details on that page so we're going to head over to our page drop down menu in the top left hand corner and we're going to choose to add a new page into our application and I'm going to call this the customer page I'll choose to create this from scratch then over on this page there's a few quick things I'm going to do before I start adding all of my elements onto it and the very first thing I'm going to do is just open up my property editor and update the background color for this page so I'm going to update this from the color white through to my color blue that I've had on my previous pages and if you'd like this color code once again it's double zero nine EDB I'm also just going to update the opacity of this color to be 10 so that way it's not as bold I'm also then going to need to jump over to my layout tab because in this instance I'll need to set the container layout of my page to be a column because of course like any page I'm going to be stacking elements from top to bottom so it's going to be stacked vertically I'm then going to also just jump back into my appearance tab tab one more time and the reason for this is because I'd actually like to take the time to set a type of content on this page so if this page is going to be used to display almost like a profile page for each customer I'm going to need to create some sort of way to send the data of a specific customer to this page and then of course I'd also like to display the data of that customer on the page and the way in which you can do this in bubble is by setting a type of content on your page so let's say for instance in my own Salesforce account I had 100 customers if I wanted to display the dedicated details of each individual customer every customer is going to need their own dedicated page but instead of having to design a hundred custom Pages what you can do in bubble is create what's known as Dynamic pages and by Dynamic that just means that you can send and display data that's stored in your database so if I was to set a type of content on this page to be a customer what this allows me to do in bubble is add in all of my elements I'd like to display for a particular customer and then if I was to jump back to my home page I can actually choose to send through the data of a specific customer that I would like to display on this page and so that's where the idea of a dynamic page comes into play essentially instead of having to build those 100 Pages you would only need to build one customer page and you just need to send the data of whatever customer you'd like to display on that page so once I've set the type of content to be a customer I'm actually going to backtrack here and jump back to my CRM page now if my new customer page is able to store the data of a customer on it I'm going to need to send data to that page of a particular customer and of course the customer is going to be the person that is selected from this CRM repeating group so what I'm going to do is select on this red group here so this is my group customer that houses all of my customers details and I'm actually going to choose to start a workflow whenever this group is clicked so that way if someone selects the group itself or any of the information within that group it's going to run this workflow and within this workflow I'd like to just add one simple step I'm going to choose from a navigation event because in this case I want to send someone through to that new customer page so I'm going to select the go to page action the destination page will be my customer page that we've just created and what you'll now notice is that because we have a type of content stored on that page bubble requires us to send a data type to that page and in this case I'd like to send through the data of the current sales user that I've just clicked so for the data I'll be sending this will be the current sales customer and because the data of a customer matches the data type I've set on my page this is going to be a perfect match now let's say someone has clicked on a customer that they want to view and they're being redirected through to our dedicated customer page and the data of that customer has been sent through in our workflow how can we now choose to display all of that information on our page for that specific customer what I'd like to do before I actually build out this page is to show you a quick preview of what we're going to be creating today so over in a separate bubble editor here this is just a bit of an overview of what we're going to be building so at the top of my page I'm going to be displaying the name of the company that this customer is so this is just the account name then below this I have almost like this card or a tile that displays all of the customers information followed by a series of buttons and eventually today we're going to go on to build out a way to add activity events to this customer's account just so that way we can log things like when we've contacted the customer or perhaps we could even update when we've closed the sale and so the very first element I'd like to add onto our new page is just going to be this heading so I'm going to jump back into my new bubble editor and I'm going to choose to add a text element at the top of my page and as you've just seen on our existing page the first thing I'd like to do is actually add an icon element in front of this text and of course when we're adding icon elements into our text element we'll just need to structure a small snippet of HTML so in order to do that I'm going to to add an open square bracket followed by the letters f a then a closed square bracket I'm then going to type in the name of the icon I'd like to display in this case mine's just going to be a user icon and in this case I just like to type in the word user just because I know that that is the name of the icon I'd like to reference I'll then add another open square bracket followed by a forward slash then the letters f a and then a closed square bracket and that will of course format to be a user icon then from here what I'd like to do is display the name of the company whose customer profile we're viewing so what I can do is choose to insert Dynamic data and what you'll now see is that because we've set a type of content on this page to be a customer we can reference this value known as the current page customer so if you remember in our workflow when we were sending someone through to this page we had actually sent the data of the current sales customer so the current page customer now is going to be that customer we've sent through to this page hence why it's called the current page age customer so I'm going to select this option here and then I'm going to choose to display the company name of that customer I'm then going to remove the style of this text just because I'd like to update the font size and in this case I'm going to set the font size to be 24 I'll also choose to bold this text and then finally I'm going to jump to my layout tab because I'd like to make this element fully responsive so I'm going to unselect that this should be a fixed width I'll set the minimum width is 0 leaving the maximum width is infinite so that way it's going to take up as little or as much space as it possibly can on my page I'm also going to update the minimum height to be zero and because we have the option selected here to fit the height of this element to the content inside of it it's going to collapse nicely around the text and then finally the very last change I'd like to make to this text element is that I want to add some margins around it so I'm going to add in 20 pixels of margin at the top I won't add any at the bottom but I'll also add in 20 on the left and 20 on the right here from here I'm then going to add a group element onto my page which is going to house all of the information about this customer so I'm going to scroll on down to my containers menu I'll choose to add a group onto my page and the very first thing I'd like to do with this group is jump over to my appearance tab I'm just going to choose to remove the style of this group I'm going to update the background style to be a flat color and I'm going to leave that as white I'll then update the roundness of this group's borders to be 20 so that way it has some curved edges and then finally we'll also jump over to our layout tab so we can update the width of this group so I'm going to open this up and before I do that of course I'll need to update the container layer now if you remember from my example in my other bubble editor everything in this group is going to be stacked from top to bottom so I'm going to set the container layout to be a column because we're stacking elements vertically I'm going to then scrolling down to our width and unselect that this should be a fixed width I'm going to set the minimum width to zero but when it comes to the maximum width I'm not going to leave that as infinite instead I'm going to set that as 600 pixels now the reason why I've selected 600 is purely just a personal preference there's no very specific reason why I've selected that by all means you could change that to whatever you would like just make sure that you have enough space to add in all of your elements and at this point that is all of the settings I just want to update I will come back and update my height and margins in a moment but before I do that I'm going to need to add all of my elements inside of this group and the very first element is just going to be a text element that's just going to display the contact name for this customer's account so I'm going to add a text element into my group now before this text I'd like to add in yet another icon I'm going to be adding in quite a few icons throughout this particular section in our tutorial so I'm just going to add an open square bracket the letters f a followed by a closed square bracket then I'll need to add in the name of the icon I'd like to display now if you wanted to find the name of a specific icon as I mentioned in a previous module all you need to do is head to your visual elements and add an icon element anywhere on your page and whenever you select an icon what you'll see is the name name of it here so that's where I'm going to be referencing the names of the icons that I'm going to add into this particular group I'm just going to delete this icon for now though because I'm going to add in an icon known as user Dash Circle I'm then going to add an open square bracket followed by a forward slash and the letters f a and then a closed square bracket and what you'll see is that it now displays a user icon within a circle now I just know the name of this icon because I'd previously gone through the icon library and source that out and by all means these icons I use aren't mandatory feel free to use whatever icon you would like but beside this icon I'm just going to add in the word contact followed by a semicolon I'm then going to insert in Dynamic data because I'd like to display the contact name of the person on this customer account so I'm going to choose to insert Dynamic data and I'm going to once again reference the current page customer so that is the customer whose profile we're viewing I'm going to select the contact name field here and that's just going to add in that text element now when it comes to this text what I'd like to do is actually just bold a small section of this text I'm only going to want to bold both the icon as well as the contact text I don't want to bold the dynamic data and so if I was to remove the style of this text and choose to bold this what you'll see is that it's automatically going to bold every bit of that text whereas as I mentioned I only want the first part to be in bold so I'm just going to undo a few steps here and in order to just bold a small section of our text I'm going to select this option to open up a rich text editor and that's now going to display the text we have here and we can customize the formatting of this so I'm going to highlight just the very first section of static text and I'm going to choose to bold the formatting I'll then choose to save this and what you'll then see is that within our text element here bubble has automatically added some HTML to this text so now it has successfully bolded just the very first word as well as the icon and that's the exact experience I want to create moving on from here I will just need to jump to my layout tab and of course update the responsive settings of this element so I'm going to unselect that this should be a fixed width I will set the minimum width is 0 and like any text element I'm also going to leave the maximum width is infinite so that way it can become as small or as large as it needs to be inside of this group I'll also just remove the height here I'm going to set the minimum height as zero and of course that will collapse nicely around the text inside of it and then finally I'm going to add in 20 pixels of margin at the top 20 on the left and 20 on the right and that is the very first text element I'd like to add into our group below the customer's contact name what I'd like to do is display their email address and in order to streamline that whole process I'm just going to make a copy of this existing text element I'm going to select in my white group and paste in a new version only when it comes to this text I'll just need to update a few quick things the first thing I'll need to change is of course the icon I'm displaying within this text field in this case I'm just just going to update the name of the icon so I'm going to keep all of the additional HTML formatting here instead I'm just going to backspace the user Circle text and I'm just going to add in the name of our inbox icon now again the reason why I know that this is called the inbox icon is because I've already taken the time to go through our icon Library so I just knew what I was going to be typing in I'm also then just going to scroll across to our static text so this is the word contact which is currently in bold and I'm just going to backspace that word and just type in the word email instead then from here when it comes to the dynamic data all I'll need to do is update the field I'm displaying for the current page user so I'm going to update the contact name to instead be the contact email and that's all I'll need to change here one small preference I might also like to update is that if I jump to my layout tab I'm just going to update the top margin to be 15 not 20 just because when it comes to these two text elements I might like to position these a little bit closer together but below this text element I'd like to add in yet another so to streamline that process I'm going to make a copy of our existing text I'm going to then select in our white group and paste a version of that in and for this text I'm going to jump to our appearance Tab and I'm going to have this display the customer's contact number only of course the first thing I'll need to do is just update the name of the icon I'm displaying and in this case I just like to display a phone icon so I'm just going to backspace the word inbox and I'm going to type in the word phone it will then update this icon to be a little phone icon and of course I'll need to update the word email I'm just going to have this display the word number and also from there I'll need to update the dynamic field I'm displaying and for this I'm going to show the current page customer their contact number it's nice and straightforward now because I've duplicated our second text element in our white group it has also copied across the top margin so it's currently set at 15 which means I don't need to to change this what I'd like to do though is just make another copy of this text element because within this group I'd also like to display the deal stage for this particular customer and so the first thing I'm going to update is the name of the icon I'm going to backspace the word phone and type in the word dollar and that's just going to display a little money icon and I apologize I previously just said that I want to add in the deal stage instead before I do that I'm going to have this display the words deal size so this is going to show what the potential account size is so this is the dollar value linked to this account I will be displaying the deal stage in a moment but I'm just going to quickly link this to be the deal size first and then in order to display that dollar amount I'm going to update the dynamic field here to of course be the deal size now in our database technically the deal size is saved as a number whereas I'd like to format this as a currency so I'm just going to select this more option here and choose to format this number as and I'm going to update this to be a currency I'm going to set the currency prefix to be dollars just because that is the currency used in my country and then I'm going to add a thousand separator on this and I'm going to leave that as a comma just so that way if the deal is quite large it's just going to structure this quite nicely I'm then going to choose to close this here because that's all I'll need to change and it's now below this that we can add in the fields for our deal stage and our deal status in fact I think first I'd like to add in the deal status field so I'm just going to make a copy of this text once again and of course once that has copied across I'm going to update the icon name I'm going to remove the word dollar and I'm going to type in the word check Dash square that will then update the icon to be a little check inside of a square as the name would suggest then I'm going to update the words deal size to just be the word status and then finally for the dynamic data I'm going to have this display the current page customer the customer status now if you remember this customer status field is linked to an option set so in order to display the customer status itself I'm going to need to reference the display text of that option set and that's just going to format that as text which is now looking good to me I'm now going to make another copy of this and this is where we're finally going to display the deal stage so I'm going to update the icon name I'm going to have this be the warning icon it will update that of course and then I'm going to update the award status to instead display the word stage and from here I'll update the dynamic data to display the current page customer their deal stage so the customer stage it's display text because once again that was linked to an option set list as well and now that is all of the information I'd like to display about this customers company the very last field I'd like to add into our group though is just who the account owner is for this customer so I'm going to make one last copy of our text element here I'll paste that in and when it comes to this text element I actually don't want to display any icon in front of it so what I'm going to do is choose to clear all of this text here so I'm going to right click on all of my Dynamic data and choose to clear that expression I'm now going to just hold in the backspace key and remove all of this text and instead I'm just going to start fresh by typing in the words account owner followed by a semicolon I'll then choose to insert Dynamic data and display the current page customer the account owner which of course is linked to a user so I'm going to display the user's name now when it comes to this text I would like to still bold the static text so the account owner so I'm going to open up my Rich Text Editor once again I'm going to highlight this text at the beginning and I'm going to choose to bold that I'll then choose to save this and I might just like to make this text slightly larger so I'm going to remove the default style and for this text I'm just going to set the font size here to be 16 and that is the very last element I'd like to add into this group which means that I'm just going to need to add in a bottom margin for this text element so I'm going to jump to my layout tab scrolling down to my margins I'm going to add in a bottom margin of 20 pixels and then from here I'm going to select on the Y group itself I'll head to its layout tab and I'd like to update its minimum height to now be zero and of course because the default option is selected here to fit the height of this element to the content inside of it it will collapse nicely around that last text element and while we're in the layout time for our group I'm just going to add in a top margin of 20. I'll leave the bottom margin but I'll also add in a left margin of 20 and a right margin of 20. and that is how we can display all of a customer's details here below this what I'd like to do is just add in two quick buttons which we're not going to create any workflows for right now but it's just going to give us a nice Head Start in our next module when we go to either edit the details of this customer or even delete this customer and when it comes to these two buttons I'd like to display them side by side which means that in order to display two elements how horizontally on our page I'm going to need to add a group and set its container layout to be a row so I'm going to scroll on down to our containers menu here I'm going to select a group element and I'm going to add this onto our page now before I make any changes to the layout settings I'm just going to quickly jump to my appearance tab I'm going to remove the style of this group and just give it a flat background color and I'm going to make this a light shade of red for the time being just so I can clearly determine where it sits on my page I'm also then just going to jump to my layout tab I'm going to update the container layout here to be a row because as I mentioned I'm going to want to position two elements side by side and when it comes to the width of this group I will update this in a moment but I'm just going to leave it at the current settings for the time being because right now I just want to add my two buttons into this before I do anything else so I'm going to scroll on up to my visual elements and I'm going to add a button element into my red group and this button is just going to display the word edit and that's all I'll need to change within my appearance tab I would just like to jump to my layout tab though because I'd like to update the width of this button I'm going to set the width of this button to be 100 pixels and look I am going to leave that as a fixed width because I'm only ever going to want it to be 100 pixels regardless of how small or large the page is then when it comes to the height I'm going to set the minimum height here to be 35 and that's just going to collapse the actual height itself and then finally I'm going to vertically align this in the center of my red group and that's all I'll need to add for this button I would just like to make a copy of this button though so I'm going to select that choose to make a copy then select in my red group and paste in another version and when it comes to this button I'm going to jump to my appearance Tab and I'm going to have this display the word delete now for this button here I actually want to update the style of this to be the inverse of my existing blue button so instead of having a blue background I'd like it to have a white background with a blue text inside of it so in order to change that I could just remove this existing style and create a one-off pattern but if I'm creating the inverse of the main button I might like to create that as a design style so that way I can easily reference that again at any point in my application that I would like so I'm just going to select this outline button style here and as you can see this is already kind of the similar style that I was looking to create only what I'm going to do is just choose to edit this style here and within this style what I would like to do is first of all update the font color I'm going to set this to be the same blue that I've been using throughout my existing application today so if you'd like that color it's double zero nine EDB I'm then going to leave the background style as it is but I'd also like to update the Border style here so for the Border I'm going to update the color once again to be the same blue color code as the text and finally the very last thing I will need to change is also just the line spacing here it's currently set at 1.4 whereas I need to set this as one now the reason I know that is because if I jump to my design tab here if I was to edit the existing style of our primary button what you'll also see is that the line spacing here is one so I want to make sure that these two buttons are the same size which I can now see that they are finally though I'd also just like to add in some space between these two buttons so I'm going to select on my delete button here I'm going to jump to my layout tab and I'm just going to add in 10 pixels of margin on the left that's all I'll need to change I'll then select on my overall red group here and this is where we can update all of the remaining settings in our layout tab so when it comes to the width of this group I am going to unselect that this should be a fixed width I'm going to set the minimum width as zero but instead of just leaving the maximum width is infinite I'm going to take this option to fit the width of this element to the content inside of it and that's going to collapse nicely around my buttons I'm also going to do the exact same thing for the height so I'm going to set the minimum height to be zero and now you'll see that that will snap perfectly around our two buttons as well and the very last thing I will need to change here is just the margins I'm going gonna add in 10 pixels of margin on the top 20 on the left and then 20 on the right and that actually concludes everything I wanted to add on this page at this point in time as I mentioned we're not going to actually build out the workflows to power these two buttons just yet I want to save those for the next module in our tutorial what I would love to do though is just run ahead and show you a preview of what this page is going to look like whenever I want to view the full details of a customer's account over in a preview of my page here let's say I want to go ahead and view the full details of John Smith's account I'm going to select anywhere inside of this group and it's going to run that workflow and send me through to my dedicated customer page and what you'll now see is that because our workflow has sent through the data of John I'm now successfully displaying all of his details on this page so I can see the potential deal size for this customer as well as the status and the deal stage I can also see that on the account owner for this customer as well and that is how simple it is to display a customer's details on a dynamic page what I'd love to do is just jump back into our notion checklist and tick off that we've finished bringing this feature to life and that is all I have time to include within this tutorial today as you can see we've been building for hours and there's still so many features that I want to walk through at this point we still need to build out the feature that allows us to edit the details of a customer as well as create a fully functional navigation menu within our app and of course we also need to build out our activity log feature on our dedicated customer page before we then go on and build out the sales dashboard to display all of our sales figures if you're interested in watching the rest of this course I'd recommend hitting the link in the description of this video that's going to take you through to my website where you can get access to the full course itself now while this full course is going to cost you money I'm confident that it's going to save you months of time having to learn how to rebuild all of these additional features from scratch so if you're new to Bubble I definitely think it's going to be worth your time in the meantime though if you wanted to stay up to date with any additional bubble courses I share be sure to hit that subscribe button so that way you can be the first to know whenever I drop a new tutorial but for now I just wanted to say a massive thank you for taking the time to watch this tutorial and I wish you all of the best on your own NOCO Journey [Music]