Build An Appointment Booking App Like Zocdoc In Bubble With No-Code​

now on my search results page when i'm searching for eye doctors in my location i can select the 9 30 time slot here for dr tim i will then just confirm my details i'll book that appointment i'll receive a confirmation that this appointment has been booked and now you'll see that that time slot is no longer available on this date [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build an appointment scheduling app like zocdoc entirely out of no code using bubble bubble's by far my favorite no-code tool as it's a full stack experience that gives you complete control over your own custom design your own custom database the workflows and logic that power your application as well as the ability to integrate with third-party plugins and services 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 explain the step-by-step process to rebuilding them with no code in bubbles platform after hearing some great feedback from no code makers across the world i decided to recreate those blog posts as a series of video tutorials if you're anything like me i find using video content more engaging throughout any learning experience in today's tutorial i'll be walking you through the process to create your own appointment scheduling application just like zocdoc this will include features like registering user accounts allowing doctors on our platform to identify what appointment times they're available for creating a search page that allows users to discover doctors within the area then building out a search results page that displays a list of all of the relevant doctors based on a user's search creating a workflow that allows users to schedule and book appointments across our platform displaying the information of doctors on a profile page as well as including user-generated reviews about those doctors and then finally creating a dashboard that allows doctors to view a list of all of their available appointments that users have scheduled with them so grab your bubble editor and let's get started the first feature we'll be building out in our zoc.com today isn't actually a core feature that our users will engage with across our platform but instead i wanted to take the time to explain how we can properly set up and configure our own custom database within bubble because i know that if you're new to bubble this can be quite daunting to begin with now throughout our tutorial today i've just created a notion doc where i'll be keeping tabs on all of the different data types and data fields as well as the different features that we will be working on if you had a notion account i'd always recommend taking the time to build out your own task checklist just so it allows you to follow along and tick off all of the different items once you've added them into your application i would just like to note that throughout any given time in this tutorial if you find yourself getting confused or lost you should pause the tutorial and then watch back over that step before you decide to move on of course i'm going to be explaining everything in as much detail as i can so i'm hoping that you can follow along in real time with me as we build out our sockdoc clone let's jump on into our bubble editor and we can start building out our own custom database over in bubble i've created a brand new application here and i'm going to start by selecting my data tab here and if you're new to bubble the first thing you'll notice is that there is a user data type already created within bubble this of course is there by default because it's more likely than not that you'll be registering users to actually use your application and within this data type there will be some existing data fields one of those is an email address which is mandatory to register when someone creates an account the other is a password field but you won't be able to see this in plain text the other first thing i'd like to note as well is you might notice here there's some text that lists that there's privacy rules applied to this data type now in 2021 bubble added these to your database by default but what i'd recommend you do is take the time to select into these privacy rules and actually remove these to begin with so what these privacy rules mean is that anything that's created as a data type can currently only be visible by the person who's created it which if you're building applications where you need users to exchange content and information between accounts you'll find that when you view your application development environment the app itself will look fine but there won't be any data that's displayed within your application so i would recommend deleting this privacy rule here and then also in your data types when we create them unselect that you want to make that private i would also recommend that after you've created all your data types you double check that they are all listed as publicly visible now before i go and add all of my data fields into my user data type i'll first need to add in all of my additional data types and the reason i'll be doing this is because there will be data fields within our user type here that will need to link to different data types and this will help us create a truly relational database within our bible application so if i jump back into my notion doc here i can see that the data types i'll need to add are my user type which is already added then there will be a list of option sets which i'll explain in more detail in a moment then there will be our time slots appointments and also reviews so i'll start by adding in all of the additional data types from our time slot onwards so i'll add in our time slot appointment and review so i'll jump back into bubble i will select to add in a time slot i will then add in an appointment and then finally i will add in a review now after i've added in those data types i will also need to add in my option sets so if you're new to bubble and you haven't had the opportunity to use option sets yet option sets are similar to a data type within your database but they don't sit within your data type tab instead they have their own tab here under option sets and it replicates much the same experience as creating your own data type the only difference between a data type and an option set is that with a data type you would create something like a time slot and this would just be a field within your database without any value stored within it whereas with an option set if you were to create a time slot you could actually predetermine what values are stored in it and then call upon those later in your application now i know this might sound confusing at first but once i actually create my option sets it'll make a lot more sense to you as to why i'm choosing to use it this way so if i select my option sets what i would like to do if you remember in my notion doc is add a list of all of the available time slots that can be booked within our application and the reason i'm doing that is because if a doctor on our platform was to register an account and then select the time slots that they're available for if we use option sets we can display a list of pre-filled time slots that they can just choose from whereas if we were to use a data type the doctor would need to create a new entry for every single time slot that they'd like to be available for which in my opinion has two main downsides the first is that there's no way for us as the application owner to control the time slot entries that a doctor chooses and the second is that it would just be time consuming for every single doctor to have to onboard an account and then manually add all of the times that they're available for so option sets just allows us to create a much more intuitive user experience so if i head into my option sets here i can choose to add in a new option set and i'm going to call this appointment times i will create this and as you can see it looks much the same as a data type within our database it will also come with a pre-built attribute to it an attribute is almost like a data field in this case but the first attribute will allow us to display an input as text and the inputs i would like to add are a list of options that are the time slots that doctors can choose their availability for so i'm going to start by just manually typing these in so i'll start with 9 am i'll create that 9 30 a.m 10 a.m 10 30 a.m 11 a.m 11 30 a.m and i'll just continue adding these in to whatever end time slot i would like i've just jumped ahead and added in a few additional time slots here and just for the sake of our tutorial today i'm only going up to the 2pm mark and one thing i would like to note is that you don't have to add these time slots in half an hour increments you can add them in whatever periods you would like so it could be 9 a.m 9 15 9 30. the option is completely up to you another thing i will do though is that within each option here i would like to add another attribute and that attribute is what i'll be calling a session number so i would like the 9am session to be session number one within our option set i would like the 9 30 session to be session number two the 10 a.m session to be session number three and so on so in order to create this i'll need to select the create a new attribute option and i'll be calling this attribute session number and i will update this attribute to be a number i'll create that and now in order to add a session number with every time slot i can select the modify attribute button next to our time slot option and now you'll see a field here called session number and i'll just manually type in number one for our 9am session i'll save that for our 9 30 session i'll type in session two our 10 a.m session will be session number three and our 10 30 session session number four and so on to save us the time today i'm just going to skip ahead and add in all of the different session times that will match each option set entry and just like that that's all we'll need to create today for our option sets within our database the reason i wanted to create our option sets before we build out our data fields is because there will be data fields in our database that reference our option set list now we can take the time to start building out the relevant data fields within our database and i'll start by building out my user data type here so if i jump back to my notion dock here first of all i can tick off that i've added in my option set time slots then i'll scroll on up to our user data fields here and i can begin adding these in so the first few fields i'll need to add is the name of the user the profile photo the phone number and the account type i'll jump into my bubble editor and under my user data type i will select to create a new field the first field i'll be adding is the name of the user and this will just be a text type then i'll be adding the profile photo of the user which will be an image field type then there was the phone number of the user which is a text type again and then i'll be adding a field called account type and the reason i'm adding this field is because on our platform there will be two different types of users that can use our application the first will be patients looking to book appointments and then there will be those who are registered as doctors who will create a list of all of their availability and both of these account types will use the same user data type but i would like to create a way to differentiate between both of these account types within our platform and i'll be explaining how we can do this within the workflows later on in our build but for now i'll just be updating the field type here of our account type to just be a text property if i jump back into my notion doc i can see that i'll need to add in the age the gender the bio and the office address of a user so i'll select my bubble editor i'll create a new field and i'll start by adding the age which in this case will in fact be a number not a text field then there was the gender of the user which will just be a text field then there will be the bio of the user which again will just be another text field and then there was the office address so this will be used for those who are registered as doctors in our platform and this will be a geographic address because i would later like to integrate this with google maps to display a actual location marker of that office address i'll create that then in my notion doc again i can see there's two last fields there'll be the speciality of the doctor and then finally a list of all the available times that they've selected so i'll head back into my bubble editor i'll create a new field and this field will be called speciality i will select that this is just a text field i'll create that and then the last field i'll need to add for a user data type is a list of the available times so once again this will be used by our doctors and in this case this is where they will be able to reference our list of options sets so a list of all the available appointment times that they can choose from so if i scroll on down to the bottom i will choose the appointment times option which is the option set that we just created and in this case i'll be selecting that this is a list with multiple entries because a doctor can choose from multiple times that they'll be available for i'll then create that and now i can jump into my notion doc and tick off that i've added in all of the necessary data fields for our user data type now after building out our user data type in fields we can move along down to our time slot so in this instance what i would like to do is for every time slot that's created i would like to store a doctor so a person who has created that time slot then i would like to also store a list of all the appointments that have been scheduled for every single instance of this time slot as well as the session number for that time slot which we'll be generating in our option sets as i showed you before and then of course i will be displaying the time written as text from our option set before then finally adding a list of unavailable dates which will allow us to exclude a time slot when a patient books that with a doctor let's jump back over into our database and i'll explain these more detail as i add them so if i scroll on up to the time slot data type here i will create a new field first field will be a doctor so this is a doctor who has registered this time slot and in this case what i would like to do is store this as a user because of course the doctor will be logged into their account i'll create this then i would like to add a list of scheduled appointments that are scheduled in our application for this time slot so i'll create a new field i'll call this scheduled appointments and this will be a list of appointments so whenever an appointment is booked we'll create that within our database and then attach it to the time slot that it's been looked for and we'll also select that this is a list with multiple entries because there'll be hundreds of thousands of appointments that can be booked for this particular time slot just across different dates next i'll be storing the session number for this time slot if you remember i was storing a chronological session number for our time slots in our option set i would just like to transfer that number through to our database whenever we create a new time slot so i'll select that this field will be a number and this won't be a list with multiple entries so i'll create that then the next field we'll need to add is the actual time written as text which is the same value from an option set so that's where we had written it as 9 am 9 30 am 10 am and so on and this of course will just be a text field and then finally i'll be adding in a list of unavailable dates so essentially every time a time slot has been booked i will be associating it with a date in our database then on our search results page let's say a user is searching for a particular date and a time slot's already been booked on that date what i could then do is exclude a list of any time slots that have an unavailable date that is the same value as the date that the user searching for and of course i'll be explaining this in more detail when we reach that module but for the meantime this itself will just be a date field and i will select in this case that it is a list with multiple entries because every single day will have its own set of time slots so i'll then create that and that is the last field i'll need to add to our time slot data type i'll jump back into my notion doc and i can highlight these data fields here i'll take those off and now we can scroll on down to our appointment data type now of course this data type will be used to store the value of a new appointment when it's scheduled within our database this will include the date that the appointment has been booked for who the doctor is who the patient is what session number it is and of course what the time slot is let's jump on over to bubble and add these fields into our database so under my appointment i'm just going to add in a date field and i'm just going to put in brackets that i am storing this as an actual date i'll create that then i'll need to register who the doctor is for this appointment which of course will just be a single user then there will be the patient which again is just a single user then i will need to store the actual session number which of course we'll be pulling from our option set so this will be a number field and then finally i would like to store the value of the time slot that's been scheduled for this particular appointment so i'll type in time slot and this field type will just be our time slot data type so it will link to the existing data type we've just created i will then select to create that and that is all the fields we'll need to add right now for our appointment data type the last one that we'll have left is our review data type but before we add those i will just tick off all of our data fields for our appointment there the review data type is quite simple let's jump into our editor and i'll explain it as we go along so every time a review is created we'll need to store some basic information the first will be the actual content of the review so this is just the written text that someone adds into this review so this field type will be text and it will not be a list with multiple entries because there will only be one text entry for every review i'll create this i'll then also need to add a rating field within our database so the rating here will be a number field and this will be a one to five star rating for every review that's created and then finally the last field i'll need to add is the doctor which is the person that the review has been written about so in this case this field type will just be a user and it will not be a list of multiple entries because there will be one review written for one doctor at a time i will select to create that and that is all we'll need to add for our review data type let's jump back into our notion doc and we can finally tick these off and just like that you can see how easy it is to build out your own custom database within bubble as i mentioned at the beginning of our module i completely understand that this can seem a little bit overwhelming for some people particularly if you are new to bubble but the more experience you have creating your own custom databases the more familiar you'll be with what's possible we can now focus on building out the settings page and the purpose of this page is to store any other additional information that we'll need to register about both our patients and doctors on our platform so let's jump over into our bubble editor and i can show you how we can build out this whole feature over in my editor i'm going to select our page drop down menu and head into my settings page which will be a blank page as always i'll be updating the background color to be a just a light shade gray so i can initially see where my elements are and then i will grab a text element add this to the top left corner and this will just display settings and i'll update this to be a h2 heading and then i'll just reduce the size of that element and now we can start to add all the input fields we'll need to store additional information about our users in our database one thing i will note though is that because both the patients and doctors are the same user data type within our database we'll need to create two separate groups to display the different fields we can store for each account type so for instance doctors will need to be able to register their available time slots as well as their office address whereas we wouldn't want patients to be able to view those settings as they won't need to store that data in their account so the way we can do this is by selecting to grab a group element here in our containers menu and we'll start by stretching this group out across our page one thing i will do while we build this feature is just update the style of this group to be group border just so it has a flat white background there and now i can start to add in the input fields i'd like to store for this user very much the same as to the experience we created on our registration page so i'll start by just copying this heading here i'll drag that into our group and now you'll see that that is stored within our group so it will move within it and i'll update the group's name to be called patient because this will be the group that stores the input fields for our users who are registered as patients now i'll update the name of this heading to once again be called name like our registration page and then i'll be adding in an input form so scrolling down to input forms menu i'll select an input form i'll drag that out i'll just make that a little higher as well and now like our registration page i'll be updating the name of this to be called input name and then i will copy both the input field and the title and i will drag this below and in this instance i would like this heading to display phone number i'll need to stretch out the width of that and then i'll update the name of the input to also be phone number and this will just be a standard text input now from here i will just copy the name title that we have here drag this across and i'll update this to display age and then i will grab a input field drag this out but this will be smaller width because we won't need to store as much information within it and i'll update the name of this input field to be called age and the content format here will need to be an integer because it is a number then i will copy the heading once again i'll drag that down so it's in line with our phone number heading here and i'll update this to be gender and for our gender field i will be using a drop down menu so i'll select from our input forms choose the drop down option and i'll drag this out i'll also just make it roughly the same height as my other input fields there and i'll be adding in three static choices here they'll be mail i'll select enter create a new line which is a new option female and other i'll also then update the name of this input to be called gender and then i will also just stretch out the age input field so it's in line with that one and then finally the last data field i'd like to register is a user's profile photo so i will just copy this heading move that across to the right i'll update the heading to display a photo and then for this input field i'll be selecting from our picture uploaded element and i will drag this out so it is the height of two rows there i'll then also just update the name of this input field to be called profile photo and then i can collapse the empty space here within our group as well as the space and the width of this group now by default this group will be displayed on our page once it's loaded for any user on our platform which of course isn't the experience we want to create what i'd like to do is only display this group to those users who are registered as patients so that way it won't be visible to those who are registered as doctors and the way we can create this function is by selecting our group which i already am and then scrolling on down to the option here where it lists that this element is visible on page load and you'll see that this is currently ticked what i'll need to do is untick that so now this group won't be displayed as soon as the page is loaded and what i'd also like to do is select to collapse this element's height when it's hidden so that way when it's not displayed if there's any other groups or elements underneath this group they will move up accordingly to fill in that space but now because this group isn't displayed when the page is loaded we'll need to create a condition that does display this group so i'll head to the top of the element menu here i'll choose the conditional tab and then i will define a new condition and i would like to identify when the current user their account type is and then i want this to be the value of patient because that's the value we were storing in our database when a user was registering an account i will just note that this value we've added in because it is a free text value it will need to be the exact same value as the drop down menu on our registration page here so if you wanted you could even just copy that across and then paste that value in within this condition and when we go back to our settings page you'll see that that group is hidden so you can select to open up the elements tree of the page and display that group but as i mentioned you will need to make sure that this actual free text field is the exact same value as the input that we were registering when an account was created which of course means that it will also need to be case sensitive and when this condition is true so when the current user so the person who's logged in looking at their settings page when their account is registered as a patient we will create an action and in this case i want to select that this element is visible and i will tick that that will be true so this group will now display now after creating the group for our patients on our platform i'd like to replicate the same experience for our users who are registered as doctors so once again i'll be grabbing a group element i'll be dragging this down i will just note that this group will need to be a little bit larger as we'll be storing more information in this i will then update the style of this group to have a border and then i would just drag my page down and now within this group the first fields i'll be adding is the name and the phone number they will be the same for the doctors on our platform so what i can do is just select all of these fields and headings i will copy and paste those and i will drag them into our new group and then within our new group i would also like to update the name of this to be called doctor so it's group doctor and another thing i will need to do is update the name of the input fields here so at the moment this is input name but when i'm creating my workflow to update the information in our database i would like to know that this is the name field for our doctors so i will add a dash and just type doctor after that so i can now tell the difference between just the regular input field for patients and the one for our doctors i'll then be doing the same for our phone number input field so it'll be input phone number doctor the next field i'll be adding in is the address of this doctor's practice so i'll be copying a heading i'll paste that in and i will update this to be called office address i will then drag that out so it fits and now instead of just using a single input field for our office address i'll actually be using a search box because bubble allows you to index a list of geographical addresses through that which just creates a much more effective and also accurate user experience for the doctors so i will grab a search box and i will drag this out to be roughly the size of our other elements there and i'll update the search box name to be called search box office address doctor and in this case i'll need to just quickly configure this input element so by default it will display a list of dynamic choices which means it will search through something in your database what i would actually want this to do is search for a list of geographical places which allows it to integrate with a google maps api so it can pull and display real world addresses and now below this field i will be adding in a another search box input field so i will copy the heading and the search box i will drag these down i'll keep those relatively in line with each other and then i will update the name of this search box to be called specialty doctor and instead of this being a list of geographical places this will just be a list of static choices and in this case i will add in all of the specialties i would like to include within my doctor marketplace so these can be things like if someone's an eye doctor a podiatrist a general practitioner and you can add as many of these static choices as you would like the reason i'm choosing to use a search box instead of a drop down menu is because if you're using a drop down menu and you have let's say a list of 50 choices that can quickly take up a lot of room on the page when someone selects to open that drop down whereas with the search box a doctor can just start by typing in what specialty is relevant to their field and it will automatically display a relevant result from our list of static choices that they can select from so in this case i'm just going to add some test specialties here so i'll just say eye doctor a dentist and also a psychiatrist and i will also just update the heading here as well accordingly and then beside these input fields i would also just like to allow the doctor to upload a photo of themselves so i will need to expand this group outwards and then i can just copy and paste the photo upload element that i used for my patients just move that up and of course i'll need to update the name of this input to be called profile photo doctor and we're not quite done with our doctor group yet we also need to register a bio for this doctor and in this case i won't be using just a single input field i'd like to use a multi-line input field which i'll explain why in a moment but first what i'll be doing is just copying a heading i'll drag this down and i'll just update this to say bio and now i will select from our input fields and choose the multi-line input option so the reason i'm choosing the multi-line input and the difference between a single input field is that with a single input field if a user was to let's say have a bio that's longer than this input field width the text within this field would continue to just move horizontally meaning that it won't display the full content that's added in this input field whereas with a multi-line input field it will continue to expand downwards based on how much content is in there so once i've added this in i will update the name of this to be called bio doctor and now the last thing we'll need to add in is a list of available times that a doctor can choose from so i will be copying our title here i'll move this across make it relatively in line with the rest of the headings and then i will update this title to be available times and now because we're storing our available time slots as a list of option sets within our application the way we'll need to display these is not through an input field but instead we'll be creating our own custom experience through a repeating group element and within bubble repeating groups are used to display a list of something that you can either pull from your database or in this instance through our option sets so i'll select from our containers menu here and i'll choose a repeating group element i will then just drag this down it won't need to be too big but you'll see here that a repeating group by default will have a list of cells in order to display a list of things that you would like to show now the first thing we'll need to do with our repeating group is update the type of content that we'll be displaying now traditionally you would pull a data type within your database so something like a user and it would display a list of all your users in your platform but in this case what i'd like to do today is just display a list of all of our appointment times which if you remember is the option sets that we've created so i'll select our appointment times and once i've chosen the content type i'll need to configure the data source to identify which of those appointment times i'd like to display and in this case i would just like to display all of the items within our database and it will display them accordingly to the order that we've added them in and because i've added them in chronologically it will start from the 9am appointment and go to the latest appointment that we've added and now once we've configured our repeating group we can start to display the text within each row which will be each individual appointment time so i'll select to add in a text element into our repeating group and you'll see here that you only need to configure it for the first row and then it will duplicate that accordingly across every other row i'll also just make the text a little bit larger and make sure it's over to the side of our repeating group there and now i'll insert dynamic data and i'd like to display the current sales appointments time it's display which was just the text that we were formatting so the time slot i'll then just reduce the width of that and also just the height and move that down a tad so there's some even spacing between each time slot so from here i have now been able to display a list of all of the times but of course i'll also need to create a way that allows a doctor to select if they are available for this particular time slot and the way i can do this is by adding in an icon element here so i'll choose to add this in within our repeating group and in this case i'd just like to search for a circle icon i will choose this icon here and i'll also just quickly update the style of this icon just so the color is the same yellow as our button that i used before i'll also just make this slightly larger and make sure it's roughly centered within my repeating group there and now what i'd like to do is create our first workflow on this page that makes a change in our database when a doctor selects that they are available for this time slot so once that icon is selected i will choose to start edit a workflow and within this workflow what i'd like to do is start by creating a new time slot within our database so at the moment it is an option set which is just a universal time throughout our application but what i need to do is store that as an official data entry within our database which will allow me to associate a doctor with that so what i will do is scroll on down to our data tab here and i'll choose to create a new thing the thing i want to create is a new time slot and now i'll need to configure the fields that i'd like to register within this thing i'm creating so i'll start by choosing the time text so the actual time for this time slot and this will be the current sales appointments time it's display time so the current sales appointment is just the row of the icon that the doctor is selecting from next i will need to configure a session number for this so i will choose session number equals the current sales appointments time its session number and then finally the last thing i'll need to register is the doctor who is selecting that they are available for this time slot so i'll be choosing that the doctor equals the current user which is the person who's logged in as a doctor choosing that they are available for this time slot now as it stands every time a doctor is to click this icon it would create a new time slot within our database with the value of these specific data fields which i'd note is the experience we'd like to create however they would be able to in theory continue to select this icon and keep creating time slots with the exact same values which then when we're displaying a list of all the times that they're available you'd see the same time slot continuously within their appointment profile so a way that we can stop this from occurring is by adding a condition onto our initial workflow here so if you select the workflow trigger we can choose to add a condition and within this condition i'd like to identify a rule that only allows this to run when this time slot doesn't exist for this specific doctor so what i can do is choose to select from only when and i will perform a search throughout our entire database i will identify that only when the time slots in our database where the doctor equals the current user and then also the time text equals the current sales appointments time it's displayed time and then also when the session number equals the current sales appointments times session number when the total count of a time slot with all of these fields in our database is in fact zero i will allow this workflow to run and if there is more than zero instances of this time slot in our database i won't allow this workflow to run so once i've searched for this particular time slot i will then choose when the count of that instance is and then i will just type in the number zero so now a new time slot in our database will only be created when it doesn't yet already exist the last thing i'd like to do for this workflow is also just update the event color here to be green because this is the event that occurs when a time slot is created by updating the color it'll just help me differentiate between the next workflow that i'll need to create which of course is a feature that allows someone to unselect their availability for this time slot so at the moment over in our design tab let's say i'm a doctor i'm logged into our platform i'd like to select that i am available for the 9am appointment slot but then later on in the future i'd like to remove that time slot out of my availability indefinitely what i'd need to do on the application end is create a workflow that allows us to remove this time slot from our database so in order to do this what i'll need to do is create a new workflow and in this case i will just select to add a new event i will choose the trigger to be when an element is clicked the element will be our icon so the circle and in this case i would like to create an event which deletes this time slot from our database so i'll head to our data tab and choose to delete a thing and the thing i'd like to delete is the time slot in our database where the doctor matches the current user's profile and the time slot matches the current repeating group cell that we're selecting so in order to do this i'll need to perform a search through our database again and i'll be searching for a time slot i will then need to add the constraints where our doctor equals the current user where the time text equals the current sales appointments time its display which is the time as text as well and then also when the session number equals the current sales appointment's time it's session number and once i've searched for this particular time slot in our database i will need to delete the item number one because in our database there will only be one time slot with this specific doctor at this specific time slot so i'll be deleting the first and only entry in our database what i will also need to do is just create a condition on this workflow that only allows it to trigger when this time slot does already exist so similar to our last workflow i will need to create a trigger that identifies only when i will perform a search for the time slots in our database only when the time slot where the doctor equals the current user when the time as text equals the current sales appointments time it's time which is our display and then when the session number equals the current sales appointments session number when the entries in our database for this specific time slot with those parameters the count of these instances is greater than zero this workflow will now run and of course i'd like to update the event color of this to be red because this is the workflow that will delete that time slot now back in our design tab there's one last feature we'll need to add in order to finish this experience and that is creating a condition on this icon here that changes it when this appointment has already been selected so in this case i just like to change the icon to a circle with a tick in it so what i can do is choose the conditional tab here i'll define a new condition and i will once again be performing a search through our database to identify a time slot where the doctor equals the current user when the time as text for this time slot equals the current sales appointment it's display which is the timer's text and then also when the session number equals the current sales appointments session number when the account of this specific instance in our database is greater than zero so when there is an entry where the doctor has selected this time slot i will change the icon itself and i will be searching for a circle icon and in this case i'll just choose the circle icon with a tick in it and if i'd like to preview what this icon looks like i can just toggle this on and off here so you can see that that is now ticked if i toggle it off it'll just go back to how it originally was now before we can move ahead and start to store the values of these input fields in our database there's one last thing i'll need to do to our group doctor element here and that is of course create the condition that only allows it to display to those who are registered as doctors so similar to our patient group what i'll be doing is selecting the full group here i will unselect that this element is visible on page load i will also then select to collapse this element's height when it's hidden and then i'll need to create a condition i'll define a condition that only allows this to display when the current user their account type is i'll type in doctor once again you'll need to make sure that that is the same value as the drop down on your registration page including the capitalization of letters and then i will select a behavior to happen when that condition is met and i'll select that this element is visible and ticked that that is true now we can finally move on to creating the last few workflows in this page which will follow much the same process as the workflows on our registration page so i'll select to add in a button element below our group here and i will update the text to display the word update and then i will start edit a workflow when this button is clicked and in this case we'll start by creating the workflow that updates the information of our patient users on our platform so i will select to add in an action i will move to our data tab and in this case i'd like to choose to make changes to a thing because this user already does exist in our database so the thing i'd like to change is the current user to the person who's logged in viewing their settings page and now i can start to match the fields in our database with the input fields on our page so i'll start by choosing to update the user's name and this will equal the value of our input name not the input name doctor you just need to make sure you choose the right input field there its value then there was the input field of their phone number this will need to be the input phone number its value then there was the age of the user which will need to equal the input age its value then there was the gender which will be the drop down genders value and then finally there was the profile photo which will be the picture uploader profile photo just again making sure i'm not selecting the value with the doctor and now after this workflow has triggered i'd like to also just create an additional feature for our end user experience which displays a prompt to notify the user that these changes have successfully been made in our database so if i jump back into my design tab i can easily do this by choosing to add in an alert from a visual elements tab here i'll add this alert below our button and i'll just display this to say updated now alerts by default don't display on your page you can only display them when you prompt them through an element action in your workflow and alerts also only temporarily display before they disappear so in order to display this i'll jump back into my workflow i will head back into my workflow i was just working on where i'm making changes to a user and i will select from element actions i'll scroll on down to the bottom option and choose to show a message and by default this is just going to pull through the alert that i've just created finally the last thing i'll need to add to this workflow is a condition that only allows it to trigger when the current user's profile account type is registered as a patient because i'll also be creating a separate workflow that makes changes to a doctor's information so i'll select the workflow trigger here and i will only allow this to run when the current user's account type is and i'll type in patient making sure again that all the capitalization is correct to the drop down menu on my registration page and now this workflow will only run if the user who is logged in and wants to make changes to their profile is listed as a patient which means that we're going to need to create another workflow here to make changes to a doctor's profile so we'll select from the element actions choose when an element is clicked as our trigger the element of course will be our button update and i would like this workflow to only run when the current user's account type is and i'll type in doctor and now i'll be following the exact same experience as the workflow we've just created so i'll choose from our data tab i'll opt to make changes to a thing the thing i'd like to change is the current user and now i can start updating all the input fields you'll need for our doctors on our platform so this will include things like their name this will be the input name doctor then there will be the office address which will be the search box office address doctor then there was the speciality which will be the search box speciality for the doctor its value then of course we were also registering the phone number for our doctors which will be the input phone number with the doctor value then below this there was the profile photo which will be the picture uploaded profile photo for our doctors and then finally there was our bio which was our multi-line input bio for our doctors and because we have already created the workflows to register the appointment times for a doctor we won't need to store those within this particular workflow what we will need to do of course is then just add in an additional action that selects to display our alert success message and now that workflow has finished now before we go and preview what this whole experience looks like for both users on our platform there's one last thing i'd like to do and that is display some initial content within our input fields here so let's say a user takes the time to go through and add in all of the relevant information and we store that within our database if they were to then refresh the page those values wouldn't display by default which just creates a poor user experience so what we can do in bubble is choose to display initial content which is just content that will pull values from our database and store that within these input fields so i can choose to display the initial content here for our name field to be the current user's name i will then also update the remaining fields so the phone number the initial content will be the current user their phone number then they'll be the age will be the current user's age for the gender the default value will be the current users gender and then the dynamic image for our profile photo uploader i'll insert dynamic data and display the current users profile photo and then also just need to do the same for our doctor group here so the initial content for the name will be the current user's name the phone number will be the current user's phone number the bio the initial content will be the current user's bio the office address the default value will be the current user's office address which of course was an address the specialty will be the current users specialty and then finally the profile photo the dynamic image will be the current user's profile photo and there we have it that is the last little feature we'll need to add to our settings page in order to make this functional for both the patients and the doctors in our platform let's jump over into our bubble development environment and preview what this whole experience looks like once we're logged in through my account that i previously created over on my settings page here i'm logged into my account that i have previously created which as you can see because i'm displaying the initial content within our fields it's already pulled through the name of my account i'm then just going to take the time to update the rest of the input fields here so i'll add in a phone number i'll add in a bio i will then choose from a specialty i'll say i'm an eye doctor you can see that it is already indexing that static value i added i can select that i will then add in an address and you can see that it is indexing the values of real world addresses i'll also just upload a profile photo and then finally i can select from the appointment times that i would like to be available for so i'll start by selecting all of these but let's say i then change my mind and i want to remove the 9 30 appointment time i can choose that and you can now see that it has deleted that available time slot from our database i will just add a few more throughout the day in the afternoon and then i will update my profile that workflow will run and you'll see that our success message has been displayed now back in my notion dock i can finally check off that i finished building out our settings page which was quite a large module within our tutorial today but definitely an essential one for building the framework for the rest of our application and throughout this module i ran you through how you could create conditions to update the different types of account types being able to register a doctor's availability creating workflows to update both of those account types and then displaying a success alert once those workflows had successfully ran after finishing our settings page we can now move ahead to the first really cool feature of our platform which is building out a home page that allows users to search for given doctors based on their speciality and the area that they service the design of this page is actually pretty straightforward and easy to replicate from the original zocdoc product so let's jump over into our bubble editor and we can get started i'm going to start by selecting to create a new page within my application and i'll just be calling this page home now on this page i will of course be updating the background color just to be a light shade of gray and then i can start by adding in just a simple text element here and this heading will display find local doctors and i will update this to be a h1 dark style font as it'll be quite large on our page then below this heading we'll need to add three different input fields for the query that we'd like to register from a user's search so what we can do is start by scrolling on down to our input fields and we'll select to first add in a search box i will drag this out to be roughly a third of our page and this search box will be used to allow the user to easily identify what particular doctor or service they are looking for so update the name of this to be called search box specialities and i will update the choices style here to be a list of static choices and this list of choices will be the exact same list of static choices we used for the search box on our settings page so if we jump back over to our settings page and we display the doctor group we can select the speciality search box here and you'll just need to copy all of the values that you've added into this search box and then we can jump back to our home page and then we can paste all of those choices in and now because the values of this search box are the exact same as the value of our doctor's settings page search box we can easily match the entries for the list of static choices between both of these input fields i'll also just update the placeholder text here to display condition procedure doctor you can see there's a little typo there and i will just make that a little bit higher as well it's probably a bit too big there we go then next to this i will copy this search box i will move that to the right and i'll now be using this search box to allow users to search for the location that they would like to discover a doctor within so i will update the choices style of this search box to once again be a geographical place which will allow users to search for addresses and what i will do when i create the workflow for this search experience is extract the city out of the address or postcode that the user is searching for so what we could do is update the placeholder text to encourage users to search for a particular postcode and this search box will index that postcode value and also display what the name of the suburb or city is that matches that postcode and then finally the last input field i'll need to add is just a simple date time picker so the user can identify what particular day they would like to visit this doctor so i'll select from the input forms and choose the date time picker i will just drag this out and again i'll make this roughly the same size as the other input fields and i'll update the name of this to just be called date and i will leave the input type as the date there then finally i will add a button beside these input fields i will make it the same height as those input fields but i will make this button almost a square i would like to display magnifying glass which is just a search and that's all i'm going to need to add for our home page experience as this will allow a user to begin easily searching for a relevant doctor within their area based on the particular date they would like that appointment to be so what we can do now is create a workflow to run when this search button is selected so i'll choose the start edit workflow button and then within this workflow what i'd like to do is send a user through to another page which will be a search results page so i'll scroll on down to the navigation event here i'll choose the go to page option and the destination page will need to be a search results page which does not yet exist so i'll select the option to create a new page this page will of course be called search results i'll create that and now i can select that the destination page will be the new page that we've just created now in order to complete this workflow we'll of course need to send through the values that we have stored within our three input fields here but what we won't be doing is sending them through as data within our workflow event here instead what we will be doing is sending them through as parameters so parameters in bubble allow you to store values within the url string that you can then extract on the destination page so what i can do is select to add a parameter when we send a user through to our search results page and the first parameter i'd like to send is the speciality that the user is searching for and this will be the value of our search box specialities then there was the location that the user was searching within so i'll type in location as our parameter here and then this will need to be the value of our search box location which i can see i haven't updated the name for that so i'll just quickly jump back over to my design tab and i'll update our second search box here to be called location and i can jump back into our workflow editor and i will choose the search box location it's a value and then what i would like to do is extract the value of the city of this location so if a user ads in a city or a suburb or a postcode it will just extract a default city value so what i can do is select to extract a component and that will be the city and then finally the last parameter i'll be adding is the date and this parameter value will equal the date time picker's value and what i'd like to also do here is around this down to a day so at the moment let's say someone was to choose a specific date so here it says the 18th of may if they were to choose that as the day that they would like to visit a doctor it would send through the value of the date but it would also be sending through a default time for that date which is 12 am so when that day begins in our case though i only want to send through the value of the date without the time attached to it so what we can do in our workflow is select to add an additional filter to our date parameter that we're sending through and i'll scroll on down and choose the rounded down to option and i would like to round this down to just the day itself so that would just be the date and the day that it lies on and just like that that is all we need to configure in terms of the page parameters that we'll be sending through for our users search let's jump into our development environment and preview what this experience looks like over on my home page here i can start by searching for the type of doctor i would like to visit as a patient in our application in this case i'll start by typing in i and it'll index the eye doctor option i can then search for a postcode that i would like to visit a doctor within i'll just type in a postcode in san francisco there and then finally i will choose the date to be the 20th of may i will select the search button it will then run our workflow and send us through to our search results page as you can see in a url string here you'll also notice that the page parameters have sent through as well so there's our speciality which is the eye doctor the location which was san francisco so my postcode has rounded to the city value and then the date itself has also rounded through to the date that i selected 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,253

Keywords: Bubble, bubble.io, nocode, no-code, visual programming, buildcamp, webflow, adalo, makerpad, no-code tools, app development, minimum viable product, mvp, appointment booking app, Zocdoc clone, software development, bubble visual programming, bubble no-code

Id: _d1bfXsSa3I

Length: 68min 51sec (4131 seconds)

Published: Wed May 26 2021