How To Build A Salesforce CRM Clone With No-Code Using Bubble

so over in my crm here i'd like to select that i'm going to view our bubble account here i'll click that it will redirect us through to our page and now you can see by default it's displaying all of the initial content and data i already have stored within our database [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a crm like salesforce entirely out of no code in bubble if you're not familiar with bubble it's by far one of my favorite no-code tools available right now as it gives you complete control over your own custom design the database to power your application the workflows and processes that run your application as well as the ability to integrate and connect with third-party services and plug-ins for those of you who don't know me i've spent the past year working with the bubble team to write their how to build blog series this series took a list of the top products out there on the market like airbnb uber and instagram and explained the step-by-step process to rebuilding them entirely out of no code within bubble while this blog series helped millions of makers across the world i had plenty of requests to recreate them as a series of videos within today's tutorial i'll be explaining how you can create your own custom crm like salesforce without writing a single line of code this will include features like registering team member accounts creating new entries for customers within your crm viewing and filtering through a list of all your customers in your crm being able to make changes to a customer's profile so things like updating their account status or any information you have stored about that customer being able to add any activity logs on that customer's account and then finally being able to create a dashboard that allows you to visualize any data stored within your crm so grab your bubble editor and let's get started the first feature we'll be building out today in our salesforce clone isn't actually a user-facing feature itself instead we'll be taking the time to set up and configure our database in order to build the correct framework and structure we need to then build out the rest of the features later on in our build now throughout our tutorial today i'm just going to be keeping track of things within a notion dock i've created here so this essentially just has a list of all of the data types and fields that i have as well as a list of all the features that i would like to create throughout our build if you're a notion user yourself i'd recommend creating a similar list as well as i find it's just a great way to check off features after i've added them in and just keep a tab on where i'm at within my build now one thing i'd also like to iterate is that if you find yourself getting lost at any point throughout this tutorial i'm going to be explaining everything in as much detail as i possibly can however of course if you're new to bubble you might find that the learning curve is a little bit steeper so i'd recommend that you take the time to pause the tutorial if you get lost and re-watch anything if you find yourself stuck on any particular feature but let's just dive straight into it and as i mentioned we're going to start by building out our own custom database within bubble so if i jump over into my bubble editor here i've just got a brand new editor i will select the data tab here and i can see that by default bubble itself has a user data type already created and within this it will also have a data field within our users for their email as well as their password you just won't be able to see the password field as it's not displayed in plain text one thing you might also notice is that over on the right hand side of our data type here you'll see that we have some privacy rules applied to this data type now if you're watching this tutorial after 2021 you'll find that by default bubble has added privacy rules to any data types you add to your application and if i select this privacy rule it'll take you through to the settings that it has added and essentially what this means is that a user within your database can only view their own data that they create so if you have someone else logged in as a user and they create something in your application another user won't be able to view this as they aren't the person who created it so what i'd recommend doing is actually deleting this privacy rule for now within our build just to make sure there is no defined privacy rules and you'll now see that this data type is publicly visible across our application if we then jump back over into our data types option here when we create a new data type here i would recommend just making sure that this box isn't selected or it will add the default privacy settings onto that data type now if you find that you view your application and it's not displaying any data i can almost guarantee that this is the reason why that's occurring so i'd recommend taking the time right now to just make sure that you properly configure this to avoid any of those scenarios later on throughout your build now before i build out the data fields of my user data type here i'm actually going to need to add in all of my additional data types and the reason is because within my user data type i would like to actually cross reference back to the additional data types which means that we can create a truly relational database within bubble and in order to reference those data types they first of course need to be created so i will start by selecting to add in my additional data types i can see here that i have my user which is already created in bubble by default then there is my customer then there is the customer activity and then there is a list of option sets which i'll get to in a moment but let's start by adding in our customer and the customer activity so if i jump back into bubble i'll add a new data type called customer i'll create this and then i'll add in another data type called customer activity i will create that and if you're wondering why i've created two separate data types here for the customer and the activity from their account that's just to actually increase the speed of our application so particularly as we're building a crm if we would like to display a list of customers within our database bubble would essentially load all of the information stored for every single customer whenever we need to display them which means that if we're storing our customer activity so like any notes that we add to their account it'll start to load any unnecessary data that we don't need for every single customer in our database which ultimately will slow the application down so what i like to do is split out any major data fields into a separate data type and of course as i mentioned earlier we can link these back to the other data type whenever we would like and i know this might sound a little confusing now but as i walk you through those actual modules in our tutorial today when i show you how to actually implement them into your application but for now i'm happy with just adding in my customer and my customer activity data types which means i can move on to my list of option sets that i would like to add here now if you haven't used option sets in the past this might seem a little bit confusing if you again relatively new to bubble but essentially what option sets are is they are similar to a data type within your application so they have their own dedicated menu over here under option sets and essentially what option sets allow you to do is to create a static entry within your database that you can reference at any given time so let's say if i was to create a data type in our database if i wanted to display something from that data type i would need to search through my database first and then dynamically display that whereas with an option set this is just a list of static choices that bubble can reference at any time which means that your application will load faster now i like to use option sets personally if i just jump back into my notion dock here i like to use option sets whenever i'd like to reference a list of choices so let's say on my registration page for example i want to add a drop down menu that allows a user signing up for our application to determine whether they'll have viewer access or editor access now i could manually type out all of the options within that drop down and then manually store those in my database as just a free text field or i could create an option set and then not only on my drop down page could i just reference this option list but anywhere else in my application where i want to create permissions so let's say i want someone who's an editor to be able to delete customers from our crm i can easily just reference our option set here and then create a condition or a workflow based on that so just to reiterate i tend to use option sets whenever i'm using a drop down element on a page so you can see here i've got quite a few for my team member account type the customer status of a lead the customer stage of a lead and then the different types of account activity we can add onto a customer's account and i'll walk you through these in more detail as i add them into my database now but essentially i'd like to add our complete list of option sets first as we will need to reference those under our different data types here so i'll go ahead and add in our account types option set to begin with so in our option sets menu here i'm going to create a new option set and i'm going to call this account type i will create this and this essentially works similar to a data type in fact this whole ui actually looks very much the same as when you create a data type and add fields to it so by default an option set will have a text field which is called its display so this is just essentially the name that you can add to a list of options underneath this option set category and that's all i'll be working with today i'm not going to complicate things by adding in different attributes so essentially i'm just going to add my list of options for my account types and as i mentioned before i would like to just identify if someone will have viewer access within their account or if someone will have editor access within their accounts and then i'll be able to reference this on our registration page or throughout our crm itself and just restrict certain features based on permissions for our option set list here if i then jump back into my notion dock i can check off that i've added the account types and the next option set i'd like to add is our customer status so i'll jump over into our database i will create another option set and i'll call this customer status i'll create this now our customer status as you can see in my notion doc here is just a way to register the opportunity associated with a customer's account so are they a lead are they a converted customer or has this opportunity expired so i'll add all of these options into my option set list now so once again i'll start under our customer status option here to add in our first option which will be a lead then there was our customer and then there was an option for expired again this one's pretty straightforward i can then jump into notion check that option list off and the next option set list will be our customer stage so this will just allow me to identify what particular stage of the life cycle this potential customer or lead is so do they need analysis are they a qualified lead does someone need to follow up with them has this deal closed and been won or has it closed and been lost so again i'll jump into bubble i will add another option set list and i'll call this customer stage i'll create that and then under this new option set i'm going to add the first option which was needs analysis then there was the qualified option then there was our follow-up option and then finally there was our closed one option as well as our close lost option and this is just a way to universally reference what stage of our pipeline each customer sits within across our crm then if i jump back into notion again i will check all of these option lists off and then i can see i have one last option set here which is the account activity type and this just be used for whenever i create our account activity here which is a separate data type i would like to just register what type of activity that was so did someone just make contact with the customer or was there even progression with the deal itself i also had an icon image here but i don't think i'll include that for the sake of our tutorial today as i don't want to add another attribute to our option set and complicate that too much i will of course be showing you another way we can integrate that within our database though but for now we're going to add in these two options here so back in my database i will add a new option set called account activity i'll create this and then under options the first one is customer contact i'll create that and then the second option was just deal progression i will also create that now i can check off that i finish adding in all of my option sets which of course means i can start building out my data types now and we will start by building out the data fields for our user data type here so in my database i will jump back over to our data types tab here and then under our user data type here i'm going to add a new field i'll just start by adding in the name of the user so the user itself is anyone within your team who registers to be a member of your crm and in this case i just like the field type for our name just to be a standard text field within our database i'll create this i'll then create another field called profile photo and this will just be an image field i'll create that and then i would like to create another field called account type and this is where we can start to reference the list of permission options that i've just added in my option sets so if i scroll on down to the bottom for our field type here i can select from the account type option set list which means that under our account type here in our database i will store one of the values from our option set list now you might also notice here that when i'm creating a new data field within my database i like to separate these with a dash whereas when i created option sets i separated them with a space this will just allow me later on in my build to differentiate between the two fields within my database just so i don't get too confused i'd recommend trying to create a similar experience yourself just so you don't over complicate things within your build but for now i'm just going to create that data field and that is actually all i'll need to add into my user data type essentially i just like to be able to reference who made changes in our crm and display a profile photo of them and of course with our option set permissions here i just like to later on be able to restrict certain features to those who are editors within our application so i will tick off that i've added in all of those data fields then if i scroll on down to our customer data type this is essentially the information i'll need to store for a new customer or prospect that i add within our crm so i will jump over to our database i will choose our customer data type and i will start by creating a field called account name so this is essentially the name of the account so if it's a business it will be the name of that business and i will select this to just be a text field type i'll create that then i will add another field which will be called contact name so this will be the name of the person who's the point of contact within this business so i will select this to be a text field again i'll create that then i will create another field called contact number so this will be the phone number for that person who's the point of contact and this will actually just be a text field here i won't need that to be a number i'll create that and then i will create a contact email field which again will just be a text field i'll generate that and then i would like to register an account owner so this is a team member so a user within our database who is the account manager or owner for this particular customer and this is where we can actually start to link our data fields to our data types so under our field type because i would like the account owner to be a team member who has registered an account i will scroll on down to the user option because the users are our team member and now i'll be able to store the value of an individual user as this account owner i will create that and then i will add another data field and i'll call this customer stage and if i select the field type this will be the option set which is our custom stage that i've just added so of course that means it will be the value of one of those options so i will then create that then there was another field called customer status and this again we'll need to reference one of our option sets that we created and that one is of course our customer status option set i will create that then i will add another field called deal size and this will actually need to be a number because i would like this to be displayed as a currency value so this is essentially just the total deal size of a customer within your crm i will choose to create this and then finally the last field i'd like to add is just the closed date of this customer so this will be a date value that you can update once the customer account has closed so i will select the field type here to be a date so we can actually register a date and a time within our database and that is all i'll need to add for our customer data type if i jump back over to our notion doc here i can highlight all of these data fields i'll check those off and now the last data type i'll need to add is our customer activity here so i can see here that i have a field that will require me to link this activity back to a customer just so i can display the relevant activity on the relevant customer profile and then i would like to of course identify what type of activity has happened on this account which was from our option set list and then i would also like to add a comment which our team members can add on that customer activity so i'll jump over into our bubble editor here i will choose our customer activity data type and the first thing i'd like to do is reference this custom activity back to a customer account so i'll create a data field called customer the field type here if i scroll on down will be a customer which is our separate data type there i'll then create this the next field i'd like to register is the type of activity so this will be called activity type and if you remember we had an option set for that called activity type and that was of course just registering if this activity was a customer contact or if the deal has progressed at all so i will create that and then finally there is the comments that i'll be adding on the customer activity so this will just be like the internal notes that any team members can add when they update an event on this customer's account so this of course would just be a standard text field i will create that and that is all we'll need to add for our customer activity which means i can jump back in my notion dock highlight these three data fields and check those off and in fact that's all we'll need to add for our database right now as you can see within bubble you can build your own powerful custom database however you would like i love that you have the full flexibility to add your own custom data types and fields as well as a list of option sets that you can reference and as i mentioned before if you found yourself getting confused at any point i'd recommend pausing the tutorial and then re-watching any of these steps that i've just walked you through i do understand that the option sets can be a little bit confusing to begin with but as i walk through the rest of the build this will make a lot more sense as i put them into a practical use case after building out our database we can then scroll on down to our list of features that i have for our tutorial today and you'll see that the first feature i'd like to add isn't actually a core feature that we'll use to add new customers or update their information instead i want to focus on building out the framework to first register our own team members so this will almost be like the process of creating your own workspace and then allowing members within your team to sign up for an account this module is fairly straightforward so let's jump on into our bubble editor and i'll show you how it's done over in my editor here the first thing i'll do is move over to the top left corner where our page drop down menu sits i will select to open that and choose to add a new page i will call this page register and then i will create that and now on our registration page i'm going to just double click the page and update the background color for the sake of our tutorial just to a light shade of gray i just prefer to do this because it allows me to see any white elements that i add to the page but of course you can always update the background color at a later time before you actually publish your application now on this page the first thing i'd like to do is add a heading at the top of the page so i will move on over to our visual elements here i will choose a text element and i will drag that out roughly in the center of our page i will update this heading to just be a bit of static text and i'll call this register account i would then also just like to update this style to be a h2star font now i won't be focusing too much on the design aspect of our build today so i'm just going to be selecting one of bubble's default fonts i definitely recommend though if you'd like to customize the actual application you're building to take the time to add your own custom styles of fonts as well but just for the sake of our tutorial i'm going to just use the default font to save us some time i'm not even going to center the font within its style but i will just reduce the size of that element and then center it within our page now below our heading i would like to add in some subheadings that allow us to identify which data fields we would like a user to register when they create an account in our application so i will select our heading we've just added i'll copy and paste this i will then just move this down a tad to the left and i will update the name of this heading to once again just be a static heading that says name and now below this i would like to add in our first input field on the page and i will drag this out and this input form will allow users to add in some information that will then store within our database when we run a workflow the other thing i'd like to do while i'm adding this input field in is update the name of it so i'll call this input name and the reason i'll be doing that is because when i create my workflow i'd like to know which input field i need to reference in order to store that value in our database and once we've updated the name i'm also just going to move both our heading and input form over just to the center of our page there i will then copy both of these elements i'll paste those in and i'll drag these down below so they're roughly in line and now i'd like to update the name of this heading to be called email because i'd like to register a user's email address at the same time so i will then of course need to update the name of this input field to be called email but i will also need to update the content format here so as it stands this is just a plain text input field what i'll need to do is update this to register an email input field so that way bubble will be able to validate if this is a genuine email address or not and then below this i'll be copying the heading and the input field once more i will drag it down and now for this input field i would like to first update the name of the text to be called password i will then select the input form itself and i will update the name to be input password and once again i will need to update the content format here to be a password so now bubble will hide the characters added within this input field now when we're registering a user's account there's two other things i would like to store within our database the first is a profile photo and the next is also the type of account the user has so i'd like to know what type of permissions i'll need to add to their account whether they're a viewer of our crm or whether they'll have access to actually edit the fields in our crm so what i'll be doing is just copying this heading here not the input form i will drag that down and i'll just update this to say photo i will then just need to stretch our page down a tad and i will then need to scroll on down to our input forms on our left hand side and i'll select the picture uploader element i will drag this out and i'd like to update the name of this to be called profile photo and once again i'll just be copying the heading that's beside this dragging this to the right hand side and i will update this text to say account type and now beside this i would like to add a drop down menu for my input forms here i will drag this out and this drop down menu will be registering the different type of account that this user can have so i will update the title here to be called drop down account type and then of course because we're storing our account types within our database as an option set so i have my account types here there's both our viewer and our editor what i can do is actually in our design tab here under our drop down menu choose to display both of those options dynamically so at the moment this drop down menu would display a list of static choices so i could just type in a list of options the only problem with typing these in as a list of static choices is that if you were to add another drop down menu anywhere else in your application you'd need to make sure that the list of static choices is identical to this one meaning that there couldn't be any typos or incorrect spacing if there was you'd find that the values wouldn't correlate between the two therefore if you were storing or updating information in your database these input fields wouldn't be synchronized with each other so this is the reason why i chose to do this through option sets so under my choice of style here i can update the choices from a list of static choices to now choose a list of dynamic choices and the dynamic choices i would like to display is of course our account types that we have stored within our option sets then i will need to define which particular account types i would like to display as options which is of course all of them we only have two stored now option sets so i'll choose the all account types option and then i'll need to add a caption that will actually display the account types so this will just be the display name i've given to each account type so they'll be viewer and they'll be editor so i'll select to display the current options display which was the name that i had given them in my option sets now our drop down will display both options that we previously added when we configured our database i'll be showing you this in a preview in a moment but before we do that we'll just need to create the workflow to now store all of the information of these input forms within our database so i will need to first add in a button element on our page under our visual elements tab here i will just drag that out now the button element is one of the only things i'm going to update the custom style for just so it can also match the branding of salesforce itself so if i select to edit the style i'm just going to update the color of the button here i have a color code here which is the same blue as salesforce which if you wanted that color code it's just 1798c1 then i'll jump back to my design tab here i will center this button horizontally and then i will update the name of this button to say register and now i can select to create a workflow when this button is selected so i'll choose start edit a workflow will then be directed into our workflow editor here and i'd like to add a new action into this workflow and i'll be choosing from our account actions here and i'll be choosing the first event so i'd like to sign the user up now what i'll need to do is match the data fields that we'll be storing in our database with the values of the input fields on our page so i'll first select that the email that we'll need to store for this user will be the value of our input email field then i will need to store the value of our password in our database and i'd like this to be the same value as the input password on our page and then when we're registering a user's account we obviously need to add an email and password by default but what we can do is update any other additional fields that we're storing under our user data type throughout this process and the way we can do this is by selecting to change another field on this new user's account and the first field i'd like to change is their name and i would of course like this to be the value of our input name field then there will be our profile photo for this user i'd like this to be the value of the picture uploaded element and then there will be the account type for this user i would like to update the value of this to be the same as the drop down account type and that's all we'll need to do for our event here when we register a user's account as you can see it's quite a simple process within bubble that should only take you a matter of minutes to do before we preview what this experience looks like however there is one last thing i'd like to do so at the moment if a user was to register their accounts they would add in all of their details here they would select the register button that workflow would run but once that workflow has finished and an account has been created there'll be no way for this user to know that as they would remain on this page and nothing would happen so what i would like to do is create a redirect in that workflow that not only registers the user's account but then sends them through to the home page of our crm so the way i can do this is by selecting back into our workflow editor i will add another step within our workflow i will choose from the navigation event and i'll select the go to page option in this case i'll need to choose a destination page which this page doesn't yet exist in our application so i'll choose to create a new page and i'll be calling this page our crm because this will just be the home page of our application where we can view a list of all of our customers so i'll choose to create that and now i can choose that page to be our destination page and i won't need to send any data through with it at this point although i'll be explaining how we can use that function later on in another module now let's jump over and preview what this whole experience looks like within our bubble development environment over on my registration page here i would like to start by adding in my name i will add in an email i will then also add in a password i will choose to upload a photo and then i would like to update my account type to be an editor i will then select to register my account that workflow will run and as you can see it has now redirected me through to our crm page here which means that my account has been successfully created now back in my notion dock i can check off that i have created a feature to register new team members and throughout this process i've been able to register different roles that i'll be using for permissions across our application before we jump ahead and build out the actual home page of our crm itself there is one quick feature i would like to add for this and this is a way to actually add new customers into our crm and the reason i'd like to prioritize this first is because before we can actually display any data in our crm we'll need a way to generate data for this so this page will essentially be used to add any details of new potential leads or customers within our crm let's jump over into our bubble editor and i'll show you how this is done over in our editor here i'll need to choose to create a new page within our application so i'll choose from our drop down menu on the left i will select to add a new page and i'll be calling this page new i'll create this and on this page i will be updating the background color to just be a light shade of gray and then similar to our registration page i will need to add in a text element at the top of the page and i'll update this text to display add a new customer i will then also update the style of this to be a h2 style heading i will just close the gap in that element and i will center that horizontally in my page now the way i'll be adding a customer into our database is very much the same process as when we registered a new user in our database so i'll essentially be adding a list of input fields on our page that will allow us to input data and then i'll create a workflow that stores the information of all of those fields in our database so the first thing i'll do is actually just copy this heading here i'll move this to the left hand side of our page and i will update this title to be called account name i will then need to select to add in an input field below this i'll drag that out and then i will need to update the name of this input field to be called account name and i'll just be leaving this as a standard text field then i will need to copy both the heading and the input field paste those i'll drag this out beside it and then i will update the title here to be called contact name which means of course i'll also need to update the name of the input field to be called contact name i'll then also just select to move all of these across just so they're roughly in line with the center of our page and then i'll once again be copying the title in the input field drag this down and i'll update the title to be called contact number again i'll be updating the name of the input field to be call contact number i will then copy this across again and i would like this to be the contact email i will update the name of this to be called contact email and in this instance i won't need to update the content format to email i'm just gonna leave it as a text field because we're not actually registering an email for the purpose of storing a user's account now database this is purely just a text field that we can reference as a way to identify the best point of contact for this customer now below our initial input fields i'm going to copy just the heading here i will drag this down i'll make it in line with the other headings that we have and i would like to update this heading to display account status and in this instance i won't be adding just an input field i'll be choosing to select from a drop down menu i will drag that out so it is the same size as our input field though and in this case what i'd like to do is display a list of options for the status of this new customer account we're adding which if you remember in our data tab here i had stored this as a list of option sets so under our customer status here there was the option of being a lead a customer or having this option expired and because these are stored as a list of option sets i can reference these at any time which will just save me typing these in manually as a list of static choices so i can update the choices style here to be a list of dynamic choices and the type of choices i would like to display is the customer status i would like to display the options of all of the customer status choices that i added so the three that i just shown you and then i will update the caption which will be the actual text that's displayed in our drop down menu should just be the name of all of the different choices that i had so this will be if they were a lead or a customer or even if they were expired i'm also just going to select a heading and the actual input field and just move that up a tad as well and then i will copy both of these fields i will drag this across make it roughly in line with the others here and this time i'll be updating the actual heading here to be called account stage so this will just be used as a reference point for the actual stage that this lead is within so are they a qualified lead do they need following up or has this account even closed and of course because i have this as a list of option sets again in my data tab here i can see that the customer stage i have my five options listed here so to save me typing those in again as a list of static choices i can just reference those by updating the dynamic choices i'm displaying so i will update the type of choices here to be called customer stage i would then like to display all of the customer stages that i've added in my option set list and then of course i'd like to just display the text heading for that option set i will also just update the name of our drop-down input form here to be called account stage and while we're here i'll also just update the name of our drop down here so i'll call this account status and now below our drop down elements i will be copying the heading here i'll drag this down so it's in line with the rest of our headings and i would like to update the name of this heading to be called account owner so essentially i'll be identifying which user who's registered for our crm so which team member is the actual manager or owner of this customer account and the way i'll be doing this is by actually integrating a search box input field not just a regular text input field so if i head on over to the left under our input forms i can see there's an option for the search box element i will drag this in under our heading there i'll make it roughly the same size as our other input fields just reduce the height a little bit and in this case what i'd like to do is create a way to search for all of the team members who have registered an account and then i would like to store the value of one of those team members so the way i'll be doing this is by dynamically searching through our database under our user data type so by default this search box will want to choose from a list of dynamic choices i can then define a list of options that this will search through so i'd like to search through all of the users within our database and then i would like to identify that i'll be searching through all the names of the users within our database and what you'll find is that once you start typing in this actual input field it will provide you with suggestions based on the characters that you're typing in that match the names of team members stored within our database i will then just move the heading and the actual input field up itself i'll drag this out so it's the same width as the other input fields and i'm just going to make that a little larger perfect and before i move on i'm also just going to update the name of this to be called search box account owner then beside this field i would like to register the actual size of this deal so in order to do this i'm just going to copy the text and input field here i'll drag this down i will then update the name of this to be called deal size and then i will also update the name of this input field to be called deal size and then i'll need to update the content format of this to be an actual currency because this will be a dollar value not just a standard text input field and now below this there's one last input field i'll need to add so i'll copy this heading i'll drag this down and i'll just update this heading to display close date so this will be the date that this deal would potentially close and we can always update that at a later point within our crm and in order to store a value for this i would like to choose from our date time picker element under our input forms option here i will drag this out and i will just update the name of this to be called close date and that is the final input field i will need to add for this process now what of course i'll need to do is create a workflow that not only creates a new customer but stores all of the information that we've added in our input fields here so i will just expand my page down a tad i will scroll on up to our visual elements i will select to add in a button drag that out in the center there i could even center that horizontally just to make sure it is truly centered and i will update the name of this button to display add customer and now i will select to start edit a workflow when this button is clicked now within this workflow what i'll need to do is choose from our first event under our data tab here i'd like to create a new thing because i'll be creating a new customer and that is because at this point our customer doesn't yet exist in our database so i will update the type of thing i'd like to create to be a customer and now i'll need to match all of the input fields on our page with the data fields we'll store within our database so i'll select the first field will be our account name i would like this to be the value of our input account name then the next field will be the account owner so the person who is responsible for managing this account this will be the value of our search box account owner then there was the close date and this will be the date time picker close date its value and below this there was the contact email which will be the input contact email then we will have the contact name so the person who will be the point of contact for this account that will be the contact name input its value then there was the contact number once again this will be the input contact numbers value below this we will then have the customer stage which will be the drop down value of our account stage which of course was the dynamic options from our option set its value then there will be the customer status and once again this will be the dynamic value of the drop down account status and then finally there will be the deal size here which will be the input value of our deal size which we were storing as a currency so a number but that is all we'll need to store within this particular customer so you can see how easy it is to create a new entry within our crm and before we actually test this experience there's one last thing i'd like to add to our workflow and that is a redirect through to the home page of our crm so at the moment a team member would actually add in all the details of the new customer they'd like to store within the crm but once that workflow has run nothing would happen so i would like to again create a redirect through to the home page of our crm where they can then view a list of all of the contacts stored within our database so i'll jump back into our workflow editor here i will choose to add a new step after our create customer event i'll choose from the navigation option and select the go to page choice and the destination page here will just be the crm page we created earlier and of course at this point it has nothing stored on that page it's just a blank page and i won't need to send any data through to this page at this point and that is the last step we'll need to add within this workflow let's jump on over into our bubble development environment and preview what this whole experience looks like so over in my page here that i've just created the one called new i would like to add the details of a customer in our crm so i will give the account a name i'm just going to call this bubble i'm just going to add the contact name as emmanuel the founder of bubble i'll add his contact number i'm just going to generate a string of numbers there here's contact email i'm just going to say test at bubble dot io then i would like his account status to be a lead i will update his account stage to be called qualified and then i would like to select from an account owner in our application so because i've already registered an account under my name i can start typing that in and you'll see that it will now actually index that entry stored within our database under my account so i'll select it i'm the owner of this account i'll say the deal size is ten thousand dollars and the expected close date is the 30th of june i will then choose to add this customer that workflow will run and now that customer has not only been created within our database but you can see we've also been redirected through to our crm page here which we'll be then building out within a later module in our tutorial back in my notion doc i'm going to tick off that i have created a feature that allows us to add new customers to our crm and throughout this process just a couple of notable features that i added was being able to assign a team member to the lead or the customer that we're creating which of course we used through our search functionality and then after our workflow had ran we just created that experience that redirected users through to the home page of our crm now that we've created a way to add new customer entries into our crm we can finally move on to the first major feature of our crm which is actually creating the view of all of the entries in our database which of course will display all the information we'll need to know about our leads and customers let's jump on over into our bubble editor and i'll walk you through the process over in my editor here i'm going to select our page drop down and choose from our crm page that we previously created i just like to reiterate at this point our page will be blank and there won't be any type of content stored on this page that will also need to be blank and from here what i would like to do as i have always done is just update the background color to be a light shade of gray just so i can identify where any white elements are on this page throughout this build and then the first thing i'd like to do within our page is add in a way to display a list of all of the customers stored in our crm database so the way i can do this is by using a repeating group element here so i will select to add a repeating group on our page and if you're not familiar with repeating groups these are a really powerful element in bubble that allow you to dynamically display a list of items stored within your database so in this case what i'd like to do is essentially just display a list of all of the users who are stored as customers so what i can do in my repeating group is actually search for all the customers in my database and then it will display them in any order i would like repeating groups are really popular for when you're creating things like social media feeds where you need to display a list of dynamic images but i'll walk you through the process of configuring our own repeating group here so the first thing we'll need to do is update the type of content and in this case of course i would like to search through a list of all the customers that we've registered in our database so i'll choose the customer type of content there and then i would like to update the data source so the repeating group knows which customers i would like to see in this case i would like to perform a search in my database and just display all of the customers so i will select the do a search for option and i will choose the customer data type and for the time being i'm just going to leave our constraints blank here but once we've configured our repeating group we'll now need to add in the actual dynamic elements that we'd like to display within it so the way repeating group works is that you add in your elements into the top cell of your repeating group and then it will duplicate that across all of the remaining cells in it and after configuring the data source i will update the layout style to also be extended vertical scrolling and now we can move on to actually adding the elements into the repeating group itself so the way repeating group works is that you can add in some elements into the top cell and it will then duplicate those across all of the remaining cells so if you'd like to display let's say the customer's name you would add that into your first cell and then it would pull out all of the other entries within your database and dynamically display the names of each of those customers but before i add in our elements i'm also going to update the style of our repeating group while we're editing it i can then also change this at any given time but i'm just going to edit this style of our repeating group to have a border just so i can see where the margins lie within it so i will select to update the border style here to have a solid border i will go back and change this in a moment but i'll jump into our design tab for now but now i can just see where the cells lie on our page so i know what room i have to work within now before i add in my dynamic elements what i would also like to do is add in a group element into our repeating group here and the reason i'll be doing this is because when someone's using our crm and they hover over a particular user's entry i would like to just change the color of this cell in our repeating group so the user knows that they can take an action in this cell so by adding in a group element here it will allow me to create that experience so i'll choose to add in a group element and also while we're building this group i can update the default style of it so i'll just select from the pre-built styles here and just choose the group border option and now i can see where that lies within our actual repeating group i will then also just move our group up into the top of our repeating group cell there now before i can add in the text elements into our group here i will just need to configure our group to be able to pull data from the repeating group cell it sits within so update the type of content of our group to also be a customer like we did for our repeating group but the data source of this group will be the current sales customer so the cell it sits within inside of our repeating group now after configuring both the repeating group and the group inside of it i can select to add in our first dynamic element so i'll be choosing from our text visual element here i'll drag this within our group here and in this case i would like to display the account name of this customer so i can choose to insert dynamic data and i'll choose to display the parent groups customer so the customer within our repeating group cell here their account name then i will duplicate that title there i'll move this across make sure it's in line with our other heading and to simplify this whole process i can just move along and actually update the dynamic field i would like to display so after displaying the account name i could choose to display the contact name for this account so i'll choose the contact name option so this will now need to display the parent groups customers contact name i will once again duplicate this heading i'll drag that across i'll make sure there's some spacing between both of my text elements there and in this case i would like to update the dynamic text to be the customer status and because this is an option set i will need to choose what information of that customer status i'd like to display so if you remember under our data tab here and our option sets within our customer status we had three options lead customer and expired i would like to just display the text of those option sets there so i will choose to display the parent groups customer their customer status the display text of that status then i will copy this across again i'll be making sure there is a little bit of spacing between those elements and in this case i would like to now display the customer stage of this customer so it will now choose to display the parent groups customers customer stage and because that was also an option set i'll need to display the display text for that entry then i will copy this element again i will move this across and in this case i would like to display the deal size for this customer so i'll choose to display the parent groups customer i'll choose the deal size option and because this will be a number in our database i would also like to add a dollar sign before this dynamic text so if i choose the rich text editor option here below our text field there i can then at the beginning of my text just add in a dollar sign and choose to save that and you'll now see that there is a dollar sign before our dynamic text and after adding this field there is just a couple more i'd like to add so i will need to in fact just expand my page out as well as my repeating group i'm just going to move this across i'll expand this out a little more and of course i'll also need to expand our group out as well with it i will copy that across and the last text element i would like to add is the closed date for this customer account so in this case i'll just need to backspace all the text so i can get rid of the dollar symbol i'll insert dynamic data and choose to display the parent groups customers close date now one thing i will do while i'm here is also just reduce the size of some of these text elements because they won't be very big to be honest so i'm just going to collapse those the closed date will be quite small and then i can just reduce the size of my group as well as the repeating group and of course the actual width of the page i will then center our repeating group horizontally and now above all of our dynamic text here i would like to also add in a heading just to display what the information is that we're looking at now crm so i will choose to add in a text element and this text element will just be displaying dynamic text so the first option here was our account name i will then just reduce the size of that element i'll copy that across in line with that was the contact name of the customer i'll copy that again move it across then this field was our customer status i'll copy that move it across and in this field here we were displaying the customer stage so just update the text to also display customer stage i'll copy our heading move it in line with our next field which of course was the deal size so update this to say deal size i will then reduce the actual width of that and then i'll copy it one last time and i'll choose to display close date i can then also just remove my repeating group avatar and then i would like to close the height of our group here and then also close the height of our repeating group just so that way there's not any blank space sitting underneath our group and if i really wanted i could just center our group vertically here just so it's in the middle of our repeating group perfect and that is how you can actually just build a very basic crm that allows you to see a list of all of the customer entries that we've stored in our database now before i show you how we can build out a feature that allows us to actually filter through our customers i would just like to add a few more little tweaks to our repeating group here and the first is that because our text elements are sitting within a group i would like to change the color of this group when we hover over this particular cell so that way as an end user it will allow me to see which particular customer i can select into and the way i can do this is by updating a condition within this group so select from our conditional tab once we've opened our group here and i'll define a new condition and i will select the option when this group is hovered and when this is true i would like to update the background color of this group and i'll just be pasting in a blue color code here if you wanted that color code it's just 8 b c 8 7 and what i love about bubbles conditions is that i can toggle this on and off so i can see what this will look like when this condition is true so i can see that when i hover this cell the color of that cell will change to this blue background the other thing i'd like to do within this group is actually create a redirect when this group is clicked so let's say a team member within our organization would like to just view more information about this customer account what they could do is select anywhere within this group and it would then redirect them through to a dedicated customer page where they could see a list of all of the customers information as well as a list of the activity on this account so in order to do this i'll need to create a workflow when our group is clicked so again when our group is selected i will choose to start edit a workflow and then within this workflow what i'd like to do is choose from a navigation event choose the go to page option and in this case what i'd like to do is actually send our current user through to a dedicated page to display a customer's full profile and at this point this destination page doesn't yet exist within our application so we'll need to select to create a new page and in this case i'll be calling our page customer account i'll choose to create this but before we actually select the customer account as our destination page there's one thing i'll need to do and that is update the type of content we'll be displaying on that page so if i select from my drop down menu here for our pages i will select our customer account page that we've just created i'll jump to the design tab and i'm going to leave the page blank at the moment but what i would like to do is update the type of content i'll be displaying on this page and the reason i'll need to do this is because from our home page of our crm i would like to send through the data of the particular customer that we'd like to view which means our page will need to be a customer data type here in order to display the dynamic information of a customer so once i've updated the type of content to be a customer i can then jump back into my crm page i will select the workflow tab i will then update the go to page navigation option to be our customer account and now you'll see that i'll need to send through some data to it and that data will of course need to be a customer and in this case i can just choose the current sales customer as the option so that will be the customer of the repeating group that this group element sits within so before i run you through the process of actually creating filters on our crm homepage here i'm just going to give you a quick demo as to what this experience now looks like where we can just view customer information within the home page of our crm before i do this i'm just going to change the style of our group here to be the default group so it doesn't have a background color and then if i also wanted i could update the style of our repeating group and just remove the solid border that i added before let's jump on over into our development environment and just take a quick peek at this over in my crm page here i've gone ahead and added in a couple of different entries within our database just for the sake of this demo i can see here that all of the information is displaying for our customers and i can see that when i hover over a particular customer the background of that group is changing one thing i have noticed though is that the closed date for our customers here the formatting will need to be updated because it's currently displaying the date with time this is an easy fix if i just jump back into my editor here i can choose that dynamic element i'm displaying so the parent group's customers closed date i can then choose the more option and format this as a particular date i'm just going to leave this as the default style but you can choose whatever different formatting you would like for that option the other thing i did notice was that the deal size so the dollar amount here isn't formatted with any decimals within that dollar figure so what i'll need to also do is just update the styling or formatting of this text so under our deal size i'll choose the parent groups customers deal size i'll select the more option and i'll choose to format this as a currency and then i will update the thousands separator to be a comma and then i can jump back over into my crm dashboard here refresh the page and i can now see that that formatting is updated and it's displaying all of that dynamic content with a little bit more structure to it i'm going to then close my preview and we can now move on to create a feature that allows us to actually filter through our crm so as it stands our list here is just displaying a list of all of the entries within our database but we'll also need to create a way for our team members to filter through deals by the actual customer status stage or even the account name itself and this is actually a pretty straightforward feature to build but before i do this i'm going to select our repeating group i'll hold down shift and i will select all of our heading elements here i will then move these down our page just so we have some space and at the top of our page now i would like to add in a button element and i will update this button to display filter customers i will just reduce the height of that and i can see i've just got a capitalized letter there and now below this button i'd like to create an experience that toggles on and off a group with a list of filters in it when this button is selected and using bubbles conditions i can easily create a way to hide and display a group itself so instead of just adding a list of filters that are always open i will choose to select a group element here i will add this below there i will update the style of this to be a group border for the meantime just so i can see where i'm adding elements into this group and now within this group what i'll need to do is actually add in the filters themselves that i would like to allow our team members to sort through so the first one that i'll be adding is an option to sort through a list of all these entries by the name of the account and the way i can do this is by not adding in a actual search box input field but instead i'll be choosing to create my own manual search box so i'll select just from the input forms i will add this in and i will update the placeholder text here so this is just the text that displays until someone types into the element i will call this account name and that will also update the name of that input at the same time then beside this what i'd like to do is add in a drop down option to allow our team members to search through a list of all of our customers by their customer status here so i will choose from a drop down input field i'll drag this out so it's roughly the same size as our other input field there just make sure it's the same height and in this instance i would like to display a list of our option sets for our customer status so because i've already entered these in as a list of option sets i can just once again choose from a list of dynamic choices the dynamic choices i would like to display from is our customer status i would like to display all of the customer status options that are available and i of course would like to just display the text display of each option and this is when you can start to see the real power of option sets instead of having to manually type in a list of static options every single time i add a drop down i can just reference the actual option set itself that i've added in our database i will also just update the name of this drop down to be called customer status and then finally i would like to add one last drop down field which is the customer stage so i'll need to move our group out to the side i will copy this drop down element i will drag it in line i'll make sure the distance apart is roughly the same as the other element i can also see that i haven't updated the name for our placeholder here so i'm just going to add this on our first drop down menu i'll call this customer status and then i will add a placeholder name here called customer stage and then i'm going to update the name of our second drop down menu here to also be called customer stage and in this case i would like to display the option sets of the customer stages that we've added so this will identify if they're a qualified lead if they need analysis or if they even need to be followed up so i can simply just update the type of option set that i'm indexing here so update the type of choices to be our customer stage i will then search to display all of the customer stages in our option sets and of course the option set caption will just be the current options display text and that is all of the filters i'm going to be adding in today if there are any additional filters you'd like to add throughout this process you can simply just add in any relevant input fields or drop downs and i'll be showing you in a moment how we can actually use these filters to update the data source of our repeating group here but before we do that i'm just going to close this group i'm just closing the width as well and one thing i would like to note is that this group on our page by default is actually displayed when the page is loaded of course though the experience i would like to create is that this group is hidden until someone selects the filter customers button in which case i would like this group to then display and this is actually quite a simple experience to create the first thing i'll need to do is select our group element which i already have and then i will need to uncheck the box here that's ticked by default which displays that this element is visible on page load so i would obviously like this element to be not visible when the page is loaded i would then also like to select the box down here that's now available that gives us the choice to collapse this element when it's hidden i can also select to animate this collapse as well if i would just like to create a much smoother user experience but now essentially what this means is that when this element is hidden if there's any other content or elements below this which there is there's our repeating group it will now move up accordingly so that way it closes the space that this group has and because this group is hidden any elements within it will also be hidden and then from here what i'll need to do is actually create a way for this group to be displayed and this is quite a straightforward process i will select to create a workflow when our filter customers button is selected and then within this i will scroll on down to our element actions option here and choose from the toggle event and from here i will need to select an element that i would like to toggle which is my group that i've just added and now this toggle will just close and display this group depending on if it's open or not now after i've added in that toggle i will just select all of my text elements and my repeating group here and i can now move these back up my page and the last thing i'll need to do to finish this process is just update the data source of this repeating group so essentially what i'd like to do is obviously in my database search through a list of all of our customers but what happens if a team member identifies that they'd like to search for a particular customer by the account name or perhaps even filter customers by the customer status so they could like to see who's potentially a lead right now that they could take action on the way we can do this is by adding a filter to our data source so if i select our data source here we'll still be searching for all of our customers in our database but i can select the more option here and i can scroll on down to the bottom where i'll see an option to filter out these customers and it's at this point that i would like to filter all of these customers by any values that are added into our input elements at the top of our page here so what i can do is add some constraints to our filters here and our first constraint will be the account name and in this case i'd like the account name of our customers to contain the same value of the account name input form here so i'll select that the account name will need to contain the input field of our account name in our group there then i will need to select to add another constraint and i will choose that the customer status will need to equal the same value as our drop down customer status and then finally there was the customer stage this will need to equal the same value as our drop down customer stage so now our repeating group is not only searching for all of the customers but it's filtering the customers it will display based on the input fields that are being filtered but one thing i would like to note is that there will be a case where a team member will only need to search through one input field here so let's say someone is just searching for an account by its name these other constraints won't be valid so a way we can work around this is by ticking the ignore empty constraints option here which means that if an input field doesn't have a value it will simply ignore that constraint and then this will now allow us to search and filter by any particular input fields we would like and that is all we'll need to do in terms of creating a filter experience in our application before we do go and test out the whole experience for our crm dashboard here there's one last thing i'd like to do and that is just add a button that redirects us through to the page where we can create a new customer and this is a really straightforward process so i'll start by just copying this button here i'll move this to the side i'll just move that across the tab as well and then i will update the text of this button to display add customer and then i will create a workflow when this button is clicked and in this case i would like to just choose from a navigation event i'll select the go to page option and the destination page will be our new page that allows us to add a new customer into our database and that is the last feature i would like to add to this page let's jump on over into our bubble development environment and preview what this whole experience now looks like so i'm now in my crm dashboard you can see that by default my filter isn't displayed so as i mentioned before that group element is collapsed and our repeating group has moved up on the page and if i would like to filter through my customers i can select that button it will now toggle that filter i could start by searching for the name of an account if i type in bubble that will show if i would like i could also filter through the status of our customers so if i'd like to search for customers who are leads you'll see it'll now filter those out if i wanted to search for those who are expired you'll see that there's no options in our database there i could also just select a null value and that will display them all again and if i'd like to search by a customer stage i could say closed one and it will also filter out our customer entries there as well once i'm done with our filters i can toggle that off and it will now close that group and of course i'd also just shown you before how we have created a redirect through to this dedicated customer account but i'd also just like to show you what happens when we select our add customer button that will now redirect us through to our ad customer page where we can now add a new entry in our database which of course will then redirect us back to our crm dashboard back in my notion doc i'm going to tick off that i have created a feature to display a list of all of the leads and customers in our database which of course in this module also included being able to filter through and refine our search for customers i had also shown you how to create a way to highlight each customer when they're hovered and then finally i also walked you through the process of creating a redirect to a full customers account and that is all i have time for in this tutorial today if you are interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey

Channel: Building With Bubble

Views: 3,289

Keywords: bubble, no-code, bubble.io, visual programming, Buildcamp, Makerpad, Adalo, Webflow, no-code tools, app development, minimum viable product, MVP, salesforce clone, CRM, no-code CRM, software development, bubble visual programming, bubble no-code

Id: gJZNL5uGl7I

Length: 82min 19sec (4939 seconds)

Published: Fri Jun 04 2021