How To Build A Groupon Clone With No-Code Using Bubble

over on my home page i can see that all of our groupon deals are broken down into separate categories and if i'd like to even search for a groupon by a particular keyword i can type that within my search bar and then even add a target search location then once i perform this search it's going to redirect me through to a search results page and now i can see a list of the most relevant groupon deals based on my query and location from which i can then select to open this up and view the full details of that listing and on this page i can view the full details including the highlights some additional photos and even customer reviews from existing users that have purchased this groupon offer and then if i log in as the business who has published a groupon offer i can see a list of all the customers who have purchased that offer and i can even filter these through by their name from which i can then mark this offer as redeemed once a user has claimed that within an application [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a groupon clone entirely out of no code using bubble bubble's by far one of my favorite no-code tools as it gives you complete control over your own custom database the ability to design your application exactly how you would like the ability to create custom workflows that will stitch your application together and then finally the ability to integrate with third-party tools and services for those of you who don't know me i'd previously worked with the bubble team to write their how to build blog series this series took a list of popular products out there like airbnb uber and instacart and explained the step-by-step process to rebuilding them on bubbles platform while this written series was helpful to thousands of bubblers across the world i wanted to create my own separate video series to explain each of these steps in more specific detail now of course i'd love to just point out that this series is something i'm doing in my own time and it has no affiliation with bubble at all and for today's tutorial i'm going to be taking the time to explain how we can build our own groupon clone this will include features like registering user accounts allowing users to update to business accounts where they can then of course publish groupon offer listings building out a home page to display a list of offers as well as create a custom search experience displaying the full information of individual groupon offers on a dynamic page before we then process payments to allow users to purchase groupon codes i'll also be covering how we can create user-generated reviews once someone's purchased a group on offer and then finally how we can build a business admin dashboard that allows business owners to manage all of the customers who have purchased their groupon offers there's plenty i want to cover throughout this tutorial so grab your bubble editor and let's get started the very first feature i wanted to build out today isn't actually a core feature that users are going to interact with in our application instead i just wanted to take the time to set up and configure the different data types and data fields within our database and this of course is essential as it will allow us to power the rest of our groupon application now throughout our tutorial today i've added a list of all of my data types and data fields into a notion checklist here as well as a list of all of the core features that i'll be building out later on and what i love about notion is that it allows me to create a checklist of each individual item that i can tick off as i go and it just helps me keep a better track of where i am throughout the building process throughout our groupon clone today though i've broken my data types into a few different categories so first i'd like to create a data type for our users so this is anyone who registers for our application and now you might also notice that under my user data type i'm also storing the information of a business and that's because when a user registers an account within our application i'd like them to by default have an account type that's listed as a customer but if at any point later on they'd like to advertise a groupon offer on our platform they can update their account to become a business in which case will then provide them with the option to add in any additional details they'd like to display about their business and i'll be explaining that in more detail as i run through the process of adding our user data fields but then below this i have the data type of our offer listing so the way i approach building a database in bubble is that if anything needs to be created within your application it should be a data type which is why for instance when a user creates an account we have a user data type and in this instance every time a business slash user is able to publish a groupon offer we're going to be creating something in that case we're creating a groupon offer and so i have a data type here called offer listing by all means you can call this whatever you want but i've just labeled this as an offer listing today because we'll be listing this across our application and then once a user actually purchases a groupon offer we're going to need to create a record of the offer that they have in fact purchased and the way i approach this is by creating a separate data type called offer purchased and then i'm going to link this record of a purchased offer back to an individual offer listing which you can see here in my data field and of course i'll be explaining that in full detail as i add that into my database but by adding a purchased offer as a separate data type it just allows me to easily separate between the offers that are being listed and those that have actually been purchased and then if i scroll on down i have another data type called reviews and this will just allow users to create reviews about a groupon offer so that one's pretty straightforward and then finally i have an option set list which is the categories in which a groupon offer can belong to and the main difference between an option set and a data type is that with a data type it won't actually have a value that's stored in it until a user creates something within your application whereas with an option set you can actually pre-add values into your database they can be referenced at any given time and because i as the admin of this application want to have control over the categories that a business can select from i'm choosing to create this as an option set list because if i had added this as a data type it would allow any user in our application to create that whereas as i said i want to have full control over that and i'll be explaining this in more detail when we actually add this into our database but for the time being what i'm going to do is jump over into our bubble editor and choose to open up our data tab here and the first thing you'll notice is that the user data type already exists and that's because by default bubble expects that within any application users should be able to register accounts so it's going to have a pre-vetted field here called an email and this is just a text field and bubble will also save a password field by default but you just won't be able to see that in plain text in your database here but one thing you might also note here is that bubble has labeled that there are privacy rules applied to our user data type and now if we're to click into these essentially this privacy rule just states that users will only be able to see anything that they create themselves in the application so let's say a user was to upgrade their account to become a business account and then they were to publish a groupon listing only that user would be able to see that offer meaning that no one else in our platform would be able to see it on something like our home page so this is actually a privacy rule that i want to delete so i'm going to head over to the trashcan icon here and remove that and now essentially any data that's published in our application by users will be publicly visible so when someone creates a groupon offer anyone in our application will be able to view it i will also just note that back in our data types tab here you'll just need to make sure that this checkbox is not selected because if you create a new data type and you have this checkbox ticked it's going to apply the same privacy rules to that data type and that's not what we want to happen but what i'd like to do now is start adding in all of the different data types i have in my notion doc before i then build out all of the data fields that lie within them so if i jump back into notion i'm going to start by adding in my offer listing and the rest of my data types so i'm going to start by adding in the offer listing i will create that then there was the offer purchased i will create that as well then there was our review data type and finally there was our list of option sets but i'll be explaining the option set list in a moment before i address that though i just want to start building out the data fields that sit under our user data type so if we jump back into our notion dock here and just scroll on up to our user data type we're going to need to start adding in all of these different data fields so i'm going to start by adding in the name of the user and this will just be a text field i'll create that then i'd like to register the profile photo of a user and this field type will of course just be an image then i would also like to identify the address of a user and the reason i'll be storing a user's address is because on our search page i'd like to display a list of relevant results that are within a certain proximity from the user's current address so i'm going to select that this field type should be a geographic address i will then create that then i would like to register a data field that identifies the account type of this user and this will just be a text field and now the account type will allow us to identify if the user is a customer or a business and as i mentioned i'll be explaining in a later module when we actually register a user's account that by default i'd like to store the account type as a customer and then later on enable a user to upgrade that to be a business but for the time being i'm just going to create this data field and of course as i mentioned earlier on we're not just going to be storing at the information about the user themselves under our data type but i'd also like to store the user's business information under this data type as well so if a user decides to upgrade their account to become a business account this is where they can store that information and if by all means they don't choose to upgrade their account these fields will just remain blank within their profile so i'm going to choose to create a new field and i'll be calling this one the business name which similar to our user's name will just be a text field then i'll be storing the business logo and this will be like the profile photo for a business account and this of course will be another image field and from here i'd like to register the business's number so this will just be their phone number and contrary to what you might think this is actually going to be a text field type not a number the only circumstance in which you'd use a number field is if you'd like to perform a calculation on a number whereas in this instance we're just going to be displaying the number as plain text so i'm going to choose the text field then i'd like to register the business website so this will be the url to their website which once again will just be another text field and then i'm finally going to store the business address which is a geographic address and of course a business address could be different to someone's own home address and that is all of the fields i'd like to store under our user data type so i'm going to jump back into our notion checklist and tick all of those off and then we can move on down to our offer listing data type and i'm going to start by adding in the highlights data field here so if we jump back into our bubble editor i can open up our offer listing data type and i'll be creating a new field called highlights and in groupon highlights is essentially just like the description for the offer so this is just an outline of everything that's included within a groupon offer and of course this field type will just be a text type then i'll be storing the location of this offer so although we're registering a business's address the place in which someone can redeem an offer might be a different location from that business's address itself so i'm going to be storing a dedicated location here and i'll be selecting this to be a geographical address once again then below this i'll be adding in a new field called retail price and this will be the original price that a groupon offer would be published at and this field itself will be a number because i'll be performing a calculation on this number later on in our tutorial and once we've registered the retail price i'd also like to register the groupon price which is the discounted price that users will pay and so for this field type i'd also like this to be a number and once i've added that field in i'd like to add another called expiry date and this of course will just register when this group on offer is valid until and this field type will be a date i'll then create that and at this point we're almost there i'm just going to create another field called images and this will just be a list of images that a business can upload to showcase any visual items to potential customers on our platform and so as you would imagine this field type is an image but i'd like to check this option here to make this a list with multiple entries because on a groupon offer i'd like a business to be able to upload multiple images that they can showcase not just one i'll choose to create that and then the very last data field i'd like to register is just the category that this offer will belong to so should the category of a group on offer come under family holiday or even shopping and this is where i'd like to add in my list of option sets that i can later reference so because i want to completely control the categories that are added into our application i'm going to head over to the option sets tab here and what you'll see is this actually looks much the same as the process of building out a data type in our database and so i'm just going to create a new option set list called categories and now within our option set i can add in a list of all the individual categories that i'd like a business to choose from so i'm gonna start by adding in the category called family i'll create that then there could be sports then i'll add shopping and finally travel and now by all means you can add in as many different categories as you would like i'm just going to add four for the sake of our tutorial today but one thing i would just like to note is that within our option set list all of these options here are classified as what's called the display of this option set so within our categories each displayed item is just the name of every single category that we've added and the reason i say that is because we'll just be referencing this field later on but that's all we'll need to create now for our option sets list because what i'd like to do is jump back into our data tab select from our offer listing data type and choose to add in a new field and i'll be calling this field category because i would like each offer listing to be linked to a category and the field type here will now reference our list of option sets so the categories option meaning that every time a business creates a groupon offer they'll link it to one particular category and of course if you'd like someone to link a offer to multiple categories you could just tick this option here to make it a list with multiple entries i'm not going to do that for the sake of our tutorial today so i'm just going to create this and now i can jump back into my notion checklist and tick off all of the data fields that sit under our offer listing and from here i can scroll on down and move over to our offer purchase data type and so every single time a user actually purchases a groupon i want to make a reference of that and i want to of course refer back to the original offer that they had purchased but also create a way to identify if they've actually redeemed this offer and if they have i just like to store the date in which they did that just so that way a user can't redeem an offer twice and so if i jump back into our bubble editor and then open up our offer purchased data type i'm going to create a new field and i'll be calling this field og offer and i'll be linking this field type back to our offer listing data type so essentially anytime a customer purchases a groupon offer i'm going to be able to reference what offer it is they purchased which means i can also then reference any of the data fields that sit within that so things like how much they paid for it and where the location is that they can redeem that and then going to choose to create this data field because i'd like to create the next field which is the redeemed status of this offer so once a user actually purchases a groupon code i'd like to create a way to identify if they've redeemed that or not and so under our field type here i'm going to set this to be a yes or no value because a user would have redeemed an offer or they wouldn't have so i'm going to create this and then the very last data field i'd like to create will be called redeemed date and this field type will just be a date type because later on i'll just be storing the specific date in which a user has redeemed an offer and that's the last data field i'll need to add within our offer purchased data type if i jump back into notion i'm going to highlight all of these fields and check those off and then the very last data fields i'd like to add will sit under our review data type so every time someone creates a review i'll of course be storing some information about it in our database so if i jump back into notion here and open up our review data type i'm going to create a new field and the first thing i'd like to do is link this review back to an offer listing so if a customer has purchased a groupon code and they leave a review under it i just like to reference which particular offer they had purchased and left this review for so i'm going to be calling this field name offer listing and this field type will be an offer listing so that's going to link back to our separate data type i'll choose to create that and then the next field i'd like to register will be called the content of the review so this is just the actual text itself that's going to be added to the review so of course this will be a text field and then finally i'd like to add a last data field called rating and this will be a number so this will just be how many stars a user has left for the rating of this review i will choose to create that and that is actually all of the data fields i'll need to add within our review it's a pretty straightforward process so i'm going to jump back into bubble here and check those off and that is all actually need to add within our database as you can see it's never been easier to create your own custom database entirely out of no code within bubble now that we've finished building out the database for our group on platform we can move on down to the list of features that i have set out for us throughout today's build and the very first feature i want to focus on is just the ability to register user accounts within our platform and this is actually a fairly straightforward process so what we're going to do is just jump right into our bubble editor and we can get started over in my bubble editor i'm going to start by creating a brand new page within our application so i'm gonna head to the top left hand corner and open up our page drop down menu and from here what i'd like to do is select to add a new page and i'll be calling this page register i will create that and now over on this page the first thing i'm gonna do like i always do is just update the background color just to be a light shade of gray and the reason i do this is so when i add any white elements onto my page i can actually see where they sit in relation to my overall canvas and so once i've updated the background color i then like to start dropping in elements that will be used to display headings as well as input fields on our page so the first element i'm going to add is just a text element i'm going to drag this out across the center of our page there and i'll just be adding a static text heading in this field here so this will just display the words sign up to score great deals explanation mark and if you were to register an account on groupon itself this is the exact text that displays above the input fields and because this is a main heading what i'm going to do is scroll on down to the style of heading here and i'm just going to update this to be the default h1 heading here but what i personally find is just that the font size of this default heading is just a tad too big so i'm going to remove that style and i'll be keeping the same type font as well as the font color but i'm just going to update the size of this heading to be 44 and then i'm just going to make sure that's centered within our element there i'll also just need to drag that element out so the full text can be displayed and then i'm going to right click and center that horizontally within our page and now below this heading what i'd like to do is just add in three separate input fields to register a user's name their email and their password but before i do that i just like to add a divider that separates our heading from those input fields and the way i'll be doing that is by adding in a shape element and we're just going to drag out a very thin rectangle there and for this shape element i'm just going to update the height of this to be 2 and then for the color code i'm just going to make this c7 c7 c7 which is just a light shade of gray i will then right click on the element itself and make sure it's centered horizontally as well and i could just move that down on our page and now below this divider we can start adding in the input fields we'll use in order to register a user's details so i'm going to scroll on down to the input forms on the left hand tab here i'll select to add in an input field i will then drag this out across our page and i'll be updating the name of this input field to be called input name as well as updating the placeholder text to display the words full name and now the placeholder text is just the text that's displayed within this input field before a user clicks into it and adds in a value of their own and while we're here i'm also just going to update the width of this to be 565 i will right click on this and center this horizontally in our page and then i'm going to just copy this field drag this down making sure it's in line with the field above it there and the purpose of this field is to register a user's email address so i'm going to update the name of this input to be called input email i'll also then need to update the placeholder text to display the word email and finally i'll need to update the content format to not just register text within this field but in fact register a user's email address and by selecting the content format to be an email bubble will be able to verify the structure of the text that's added into this field and it will just ensure that the value ends in an email address so things like gmail.com or at hotmail.com and then finally i'm going to make one last copy of this input field i'm going to then drag this down making sure it's roughly the same distance below our existing input field and in this case i'm going to update the name of this to be called input password because i'll be storing a user's password in this field and while we're here i'll be updating the placeholder text to also display password and then for the content format this is going to be a password field which just means that any characters within this field will be hidden by default and i'll be showing you how that looks in a moment and then finally the very last element we'll need to add onto this page is just a button element and this will be used to of course trigger our workflow to create a user's account so under our visual elements we're going to select to add in a button i'll drag that out and i'd like this button to be the same width and height as the previous input fields that said above it so i can see here under our input fields that the width is 565 and the height is 49 so i'm going to open up our button and change the width to be 565 and then the height to be 49. i'll then just make sure it's in line with the input fields that sit above it there and while i'm here i just like to edit the style of this button because i just like to change the color of this to be the same color code as the groupon branding so i'm going to choose to edit the style of this button and update the color code to be this shade of green that i have here if you'd like that color code it's five three a three one eight and what i'm also gonna do while i'm here is just update the roundness of the borders within our button here to be zero just because the group on borders itself are quite sharp they don't have any curved edges and then i'm going to jump back into my design tab and while i'm here i wouldn't mind just making a few quick changes to the input fields that sit above it what i'd like to do is just change their border styles as well because i can currently see that the input fields have a curved edge of course this isn't completely necessary but if i'm going to try and replicate the real world groupon product i'm going to try and make it look as similar as possible so i'm going to click an input field here edit the style of this update the roundness of this to be 0 and that will just sharpen the edges and because all of our inputs are using the same input style which is the standard input it's automatically going to just update all of the inputs on our page there what i might also do is just update the width of our separator here just so it matches the same width as the full input field below it which of course was 565 so i'm just going to update the width there to be 565 and then from here we can head back to our button and we can update the text here to display the word sign up and now whenever this button is clicked we can choose to create a workflow so we're going to open up our workflow editor and within this workflow we're going to select from our account tab we'll choose the first option to sign a user up and then we'll just need to match the fields in our database with the relevant input fields on our page so i'm going to select that the email of this new users account should match the same value as the input email field on our page and then for the password this will need to match the same value as the input password field on our page and after we've registered both the email and the password field we can also choose to register any additional information we'd like at this point in our workflow so because we have an input field on our page storing a user's name we can store that value within our database so i'm going to select to change another field whenever a user registers an account and the field i'd like to change is the name of this user and i'd of course like this to equal the same value as the input name field and then while we're also here i'm going to choose to change another field under our user data type and just update the account type of this user to equal the word customer and now by default in our tutorial today i'm going to register any new user as a customer and then on an account settings page which we'll be building out in a moment i'm going to allow anyone to upgrade their account to become a business not just a customer and of course once they have been upgraded to a business account they'll have access to published things like groupon deals so for our current field here i'm just going to backspace the option to insert dynamic data and then i'm just going to manually type in the word customer and at this point in our tutorial we would have registered a new account and of course throughout that process we've updated the name and the account type of this customer but what i'd like to do is just create an additional step in our workflow that redirects a user through to our account settings page once they've registered an account so because i'd like to store some additional information for user accounts i'm going to prompt a user to land on their settings page where they can immediately just update any additional information they'd like and so in order to create that experience i'm going to add an additional step in our workflow here i'll be choosing from a navigation event and i'll select the go to page option the destination page at this point doesn't yet exist so i'm going to need to create this and i'll just be calling this the account page i'll choose to create that and now i can select that as our destination page and at this point in our tutorial we won't need to send any data through to this page although i'll be explaining how you can do that in more detail when it's necessary later on but for the time being that's all we'll need to create within our registration process it's fairly straightforward so let's jump over and take a preview at what this page now looks like within our bubble application over on my registration page here i'm going to start by adding in my name so lachlan kirkwood i'm going to add in an email address and what you'll see is bubba will now validate that that is a legitimate email and then i'm going to add in a password and as i mentioned before you'll see those characters are hidden and then from here i'm going to choose to sign up an account that workflow will run it will not only register our account but it's now going to redirect me through to our separate account settings page which you can see in our url here and of course this page is just blank because we haven't actually built out anything on it yet back in my notion checklist i'm going to tick off that we finished building out the process to register user accounts within our application and of course throughout that process i explained how we could register users account types to be customers and then of course how we could create a redirect event that would send a user through to an account settings page after building out our user registration page the next feature i want to focus on in our build today is creating an account settings page that not only allows users to update the details within their own account but also upgrade their account to be a business account if they would like and furthermore from there also update any details that are relevant to their business listing there's a little bit involved throughout this process but i'm going to be sure to explain everything in as much detail as i possibly can so let's just open up our bubble editor and i can start walking us through the process over in our editor we're going to open up our page drop down menu and open our account page that we had previously created in our last module at this point in time this page is currently blank so i'm just going to update the background color to once again be a light shade of gray and now on this page the first few elements i'm going to add are three separate headings so these will essentially be three separate tabs that a user can open in order to view different information and so i'm going to select to add in a text element here and the first will display the word my groupons and i will update the style of this heading to be a h2 dark style heading and then i can close off the height and width of that element i'm then going to make a copy of that element drag this across and now update this heading to display the word account i'll once again just close off the empty space in that element and just make one last copy drag this across and now this time this heading is going to display the word business settings and i'm going to need to expand the width of this element out there perfect and now in order to display different information for each of these menus i'm going to add three different group elements into our page here and on each of those groups they're going to display a list of separate input fields so if the user selects the account heading i'd like to display a group that contains all of the input fields to update information stored on their account and then if a user was to click on the business settings i'd like to display a group that allows them to update the information of their registered business and i'll be explaining how we can create an experience that allows us to hide and display groups at different times but for now we're just going to start by adding in the group for our account tab so i'm going to scroll on down to our containers menu and add in a group element onto our page here i'll also just remove the style of this group because i'd like to add a flat background color and i'm just going to update the name of this group to be called account settings while i'm here i'm also just going to make sure it's in line with the heading on the left hand side of our page there and now within this group i can start adding in some input fields which will allow a user to update their existing account information so i'm going to scroll on up and choose to add in a text element in the top of our group here and this text element will display the words full name i'd also like to bold in the formatting of this text so i'm going to choose to open up our rich text editor here highlight that and choose to bold that text i'll then save that and i can close off the height and width of that element and now below this i'd like to add an input field to not only display the full name of a user that they currently have stored in our database but it will also just allow a user to update that value if they'd like so i'm going to scroll on down to our input forms choose to add in an input i'll drag this out within our group and i'll be updating the name of this input to be called input name and because we already have a user's name stored in our database what i'd like to do is add what's called initial content into this field so with initial content what we can choose to do is display any data we have stored in our database into this field and it will permanently add that value in until a user makes a change to it so i'm going to insert dynamic data as the initial content here and i'd choose to display the current users their name that they have stored which of course we had registered that when they had created an account on our first page then from here i'm going to copy our heading element i'll drag this down and i will update the text here to display the word address because i'd like to store a user's address and the reason we'll be storing that is we can use it later on when we'd like to display groupon deals within a certain kilometer radius from a user's address and now with an address field instead of just using a standard input field what i'm going to choose to do is use a search box field so under our input forms i'm going to choose the search box option i'll then just drag this out and i would like this search box field to be the same height and width as the input field above it so i can see the height is the same it's 49 pixels but i'm just going to need to drag out the width of it there and then i'll be updating the name of this to be called search box address and the reason i've chosen to use a search box is because we can update the choices style here to index a list of geographical places and now what that will do is it will automatically integrate with a google maps api and provide predictive search results based on any address that a user types in and it will register a valid address value in our database and now once a user has stored an address field within our database what i'd like to do is automatically display that address to them and we can do that by updating the value that's displayed as the default value so this is kind of like the initial content field for our previous input only in this case once a user has an address registered i'd like to just easily display that to them to confirm that we have in fact stored a value so for the default value i'm going to display the current user their address and while here i'm also just going to edit the style of this search field because i'd like to remove the roundness of its borders so i'm going to set that as zero i can then jump back into my design tab and i might just move my heading down a tad and under our account settings there's one very last field i'd like to register and that is a user's profile photo so i'm going to just copy our heading element here drag this down and i'll update the text displayed here to display the words profile photo i'll need to expand the width of that element out and i'll also need to expand the height of our group here as well to fit that in and in order to upload a profile photo i'm going to need to head to our input forms here and i'll select to add in a picture uploader element i'm going to drag that out and i'll update the name of this to be called picture uploader profile photo and now i'm also going to want to store a dynamic image value here so once a user has uploaded a photo i would like that to be the default image that displays within this field so again this is much the same as the initial content field so i'm going to insert dynamic data and display the current user's profile photo and what i'm also going to do is choose to process this with mgix because there's an option here i'd like to select which is to resize to fit the dimensions of this image by cropping it so that just means that it's going to automatically scale the image to fit in the full value of the element size here and that just creates a much cleaner ui for the end user when they're using your application i'm just going to close that option and then i'm going to make sure that the height and the width of this element is square so i'm going to set the width of this to be 140 and then the height to also be 140 and then what i'd like to do is just make the borders of this element circle so i'm going to remove the style here scroll on down to the border style and update the roundness to be 100 and that will make it a perfect circle i might also just move both the heading and the actual input element up a tad there and now below our input fields here i'm going to add in a button element i'll just drag this out move it across and i'll update the text that's displayed within this button to display the word update i could probably make the width of that a tad smaller and now every time this update button is clicked i'd like to run a workflow that makes changes in our database to the data that we're storing for the current user who's logged in so i'm going to choose to start edit a workflow here and within this workflow i'm going to select from our data tab and i'm going to choose to make changes to a thing because the thing i'd like to change is the current user so that's the person who's logged in viewing their account and then i'll just need to match all of the data fields in our database with the relevant input fields that we've just added into our group so i'm going to start with the user's name i would like this to equal the same value as our input name field then there was the user's address i would like this to equal the same value as the search box address and then finally there was the profile photo and i want this to equal the same value as the picture uploader profile photo and now one thing you'll notice is that i haven't changed any fields for the business information yet i'll be touching base on that in a moment but for now what i'd like to do is just add an additional step onto this workflow so as it currently stands a user would come to their account settings page they would add in any additional information they would like within these input fields they would hit the update button and that workflow we just created would run so that means these changes would have been made in our database but from an end user experience the user wouldn't actually see anything immediately change so they just might be a little confused as to whether or not that workflow has successfully ran and so a great way to enrich the user experience is adding in an alert message that displays at the top of our page and that just notifies the user that those changes have in fact been made so under our visual elements here you'll see an option to add in an alert message i'm just going to drag this out anywhere on my page and i'm going to update the text that's displayed within it to say updated and then i'm going to choose to position this alert at the top of our page here and now with an alert element they are hidden by default and only display temporarily whenever you decide to call them within a workflow and of course i'd like to display this alert temporarily once a user has selected the update button so if we jump back into our workflow editor what i'd like to do is add an additional step to our existing workflow there scroll on down to our element actions option and choose to show a message and by default because we only have one alert message on our page it's going to choose to display that and if you'd like you could customize the fade in hold or fade out duration of that alert when it's displayed temporarily i'm just going to leave it as default for now because what i'd like to do is just jump back into my design tab and now create an experience that not only allows a user to update their account to be a business account but also once they have updated their account allow them to store all of the details they need for that business account and the way i'm going to be creating this experience is by first of all just copying this heading here i'm going to drag this down below our button element and i'm going to update the text that's displayed within this to say the words advertise on groupon i will need to expand that text element out and now when this text is clicked what i want to do is make some changes in our database to the current users account and of course with that change i want to update their account type to now be a business not just a customer so i'm going to choose to start edit a workflow whenever this text is clicked and within this workflow i'm going to want to make changes to a thing again so i'll select from our data tab and choose to make changes to a thing the thing i want to change is the current user and the field i want to change is the account type and i'm just going to backspace the option to add in a dynamic value and now just set the users account type to be a business so that means their account type will update from a customer and now after a user has updated their account to be a business what i'd like to do is display another group on our page that as i mentioned before allows them to edit the details of their business settings and so before i do that i'm going to just need to make a few changes to the current group and headings that are displayed on our page so by default i won't actually want this business settings heading to be visible to every single user i only want it to be visible to those who have registered their account as a business and so what i'm going to do is unselect that this element is visible on page load which means that it's not going to be visible at all of course i'm going to then need to create a condition on this text element that just recognizes if the current user's account is set to be a business and if it is i would then like to actually display this heading so under our conditional tab here i'm going to choose to define a new condition and within this condition i'm going to recognize when the current user their account type is and then i'm going to type in the word business and i'm just going to need to make sure that the spelling of the word business is the exact same as the value that i've just stored within my workflow editor here so because i'm using a capital b here i'm also going to need to use a capital b within our condition and when we identify that this user's account type is a business i'm going to select that this element is visible and tick that that should be true because once this heading is visible i'd like a user to be able to click on this and then hide the current account settings group and then display another group which allows them to update the details of their business information and i'll be explaining how we can build out the workflows to create that experience in a moment but what i'd just like to do is actually add in the group for the business setting input fields first and in order to streamline that process i'm going to click on our group for our account settings i'm going to choose to make a copy of that and then i'm going to paste in another version of that but before i do this i'm just going to choose to hide this group element temporarily so if i head over to my elements tree here i can see i'm currently selecting my group account settings what i'm going to do is select the i icon here and it's going to just hide that group for now i can then click on my page and choose to paste in the group that i've just copied i'm going to move this across to the right hand side making sure it's in line with my heading there and from here i'm going to update the name of this group to be called group business settings and of course i can now update all of the input fields i'd like to store within a business's account so for instance instead of displaying the user's full name i'm going to update the title here to display the word business name i'll need to expand that heading out and then for our input field i'm going to need to update the name of this field to be called business name and for the initial content within this field instead of displaying the current user's name which is the name of that person themselves i'm going to want to display the current user's business name and one thing i would just like to note is that if a value is not stored in our database for this initial content this field's just going to display a blank value so you don't need to worry about this displaying the word current user's business name if a business name has not been saved but after i've updated this field i'm going to then select our heading for our address and i'm going to have this display the words business address i will then of course expand the text element out open up my address search bar and then update the name of this to be called business address and now the reason i'm updating the naming conventions is of course because when i create a workflow to update a business's details i just want to make sure i can easily differentiate between the two search fields i have on this page but for now i'm also just going to update the default value to be the current users business address and then i'm going to add in some additional fields to store things like the businesses phone number and their website but in order to do that i'm going to expand our group down and of course because our group is currently the maximum height of the page at the moment i'm first going to need to expand my page so i'm going to click on the background here and just expand the height to be 1200 for now i can always revert that back later and then for our group i'm just going to drag this down and i'm going to remove our advertise on group on heading there just select my picture uploader and my button drag those down for now because i'm going to scroll on up to our input fields and choose to copy our business name heading as well as the input field for it i'm going to copy those paste in another version move that down and in this case i want to update the heading here to display the word business phone number i'll just need to expand the width of that element out as well and of course i'm going to need to update the name of this field to be called business number and then of course i'm going to update the initial content to display the business's number once it's stored in our database and now one thing i would just like to quickly note is that although we're storing a business's phone number here the content format of this field is actually going to be a text option and now the reason i'm doing that is because we're just going to be displaying the actual number of a business within a text element the only reason you'd need to store a number field is if you'd like to perform a calculation on an integer and in this case we're not doing that we're just displaying the number as a plain text field so that's why i'm leaving the content format as that there while i'm here though i'm just going to make sure the headings are in line with our existing headings on the page as well as our input field below it there and then i'm going to just make a copy of both this heading and the input field drag those down once again and in this case i'm going to update the name to display the word business website and then for the field i'm going to update the name of this to once again be business website and for the initial content i'm going to display the current users the business website that they have stored and once again that's just going to be a text field i'll just make sure that's in line with the fields above it which it currently is i might just move that field up a tad as well and now i can choose to move my profile image uploader as well as the update button back up on our page there and instead of displaying the word profile photo i'm going to update this text to display the words business logo and then for our picture uploader i'm going to need to update the name of this to be called business logo and then with the dynamic image i'd like to display i'm going to choose to display the current users their business logo and once again i'm just going to be processing that with injects which i won't need to change because it already is doing that and now that is the very last field i'd like to store within our business settings group here so i can just close off the empty height of that group element there and now i'd like to choose to create a workflow every single time the update button is clicked here and of course in this workflow it's going to be similar to the one that we had previously created only this time i'm going to be updating the relevant input fields under our business settings for a user so i'm going to choose to start edit a workflow here and i'm going to make changes in our database and in this case i'm going to change the current users details once again only this time the fields i'll be changing are the business fields so we'll start with the business address i want this to equal the same value as the search box business address then i'm going to store the value of our business logo which will be our picture uploader business logo its value then there was the business name which is the input business name and it's at this point that you'll probably see the value of actually updating the names of every single input field it just makes it easy to determine which input field i'm referencing whether or not it's the user's name or the business name it just simplifies the whole process then i'm going to want to store the value of the business number and this will be the input business numbers field its value then there will be the business website which is the same value as the input business website and just like before i'm going to want to create an experience that notifies the user that these changes have successfully been made so i can once again just call upon our alert message to temporarily display so in our workflow editor i'm going to add an additional step to this workflow choose from the element actions and select to show a message and by default that alert message is going to automatically prompt now if i jump back into my design tab i'm just going to make one last change to this current group element before i start to build out the experience where we can toggle between different groups and that change is that i'm just going to copy our button here drag this across and this button will allow a user to start the process of actually creating a groupon deal so i'm going to update the text here to display the words create a groupon and when this button is clicked i'm going to want to redirect them through to a page where they can start to add in the details of the groupon voucher that they'd like to create so i'm going to choose to start edit a workflow here and within our workflow i'm going to choose from a navigation event choose the go to page option and the destination page doesn't yet exist so i'm going to create that and i'll be calling this page create groupon i will create that and now i can select the destination page to be the new create groupon page that we've just added into our application and now that we've finished building out the workflows to update the data within our database what we're going to need to do is create a navigation experience between the different headings that we have on our page here so by this point we've created two separate groups there's our account settings group and our business settings group i'm not going to actually build out the my groupons group right now i'm going to focus on that later on throughout a individual module within our tutorial but as it stands what i want to do is create an experience that by default displays a user's account settings first so if i was to click on that it will toggle that group on and then if i was to unselect our business settings group it would then remove that so i essentially want this group to be displayed by default every single time the account page is loaded and then of course as i had currently created on our business settings heading here that's not going to actually be displayed to a user unless they choose to advertise on groupon but once they have selected to upgrade their account i want to create an experience that allows them to click on the business settings field hide our account settings group and then display our business settings group and now the way we can create that experience is by using what's called custom states within bubble so custom states just allow you to temporarily change the value of things without having to make changes directly in your database and essentially what i'm going to do within my states is just recognize which group should be displayed at a time so i'm going to identify if i should be displaying my account settings group or if i should be displaying my business settings group and the way i can create a custom state is by selecting my page itself so just the gray element in the background this is called our account page and in order to create a custom state you just head over to the information icon here and you'll see an option to create a state and the first date i'm going to be creating is just called display account settings and now for the state type field we're going to select that this is a yes or no field because i would like to either display the account settings group or not display the account settings group i'm going to choose to create that and now because i want my account settings group to be displayed by default as soon as this page is loaded i'm going to set the default value of this state to be yes which as i'll be showing you in a moment will just enable it to automatically appear every single time the page is loaded what i'm also going to do is just choose to add another custom state and i'll be calling this one display business settings and once again this state type will be a yes or no because i either want to display my business settings group or i don't i'll create that and now because the business settings won't be displayed by default every time the page is loaded i'm not going to add a default value to this but that's all of the custom states i'll just need to create for now so i'm going to choose to close this menu what i will need to do is just add some conditions onto our groups here that allow them to respond accordingly based on the state that's currently set within our overall page so i'm going to start with my account settings group so i'm going to hide my business settings there open our account settings group click on the group itself and i'm going to choose to first of all unselect that this element is visible on page load meaning that it won't be displayed by default and then what i'm going to do is add a condition and define a condition that recognizes when the account page so if you just type in the word account choose from the word account which is our whole page when it's display account settings state is currently yes what i'd like to do is select that this element is visible and tick that that should be true and now if you remember because we've set the default value of this status on our page to be yes that just means that this group is automatically going to display by default and now once we've configured the state for our account settings group we're going to choose to hide this for now open up our business settings group click on the group itself and jump over to our appearance tab and we're going to recreate the exact same experience so we're going to first unselect that this element is visible on page load and then create a condition that recognizes when i'm going to type in the word account so that way i can recognize when the account page when its display business setting state is yes i would like this element to be visible and tick that that is true so by now we've created an experience that allows us to recognize which group should be displayed based on the state that's currently set on our page but the very last thing i'd like to do is just create a workflow that runs every time one of these headings is clicked that of course updates the state of this page so i'm going to just hide my business settings group there and first of all just select our account heading here and choose to start edit a workflow and every time this account heading is clicked what i'd like to do is just make sure that the state of this page is currently set to display our account settings group so i'm going to select to add a step in our workflow and type in the word state and i'll choose to set the state of an element the element is of course our overall account page and the state i would like to change is the account setting state and i would now like this value to equal yes but what happens let's say if we currently have our business settings group open which of course means the state of our page is set to the business settings what i'll need to do is of course not only just turn the account setting state on but make sure i turn the business setting state off so if i jump back into my workflow editor within our workflow where we're setting the account setting state to yes i'm going to choose to set yet another state and the custom state i'd like to display within our account page is now the business settings and in this case i want to make sure this equals no and now that's how we're going to set the state of our account heading i'd like to now do the exact same thing for our business settings heading so i'm going to start edit a workflow i'm going to add a step and type in the word state i'll choose to set the state of an element that element is going to be our account page and the custom state will be our business settings i would now like this to equal yes and i'm going to set yet another state and select from our account setting state and just make sure the value of this now equals no and now that's all we'll need to create in terms of the workflows to power our navigation experience and that's actually all i want to cover right now for this module within our tutorial as i mentioned at a later point i'm going to be explaining how we can add yet another group for the my groupons heading and display a list of all of a user's purchase codes but for now let's preview our application and we can start to just experience how this overall page will function from the process of not only updating my account settings but then also updating my account to be a business and then storing the information of my business within our second group over in my settings page on my application the first thing you'll notice is that my account settings group is being displayed by default and because my current account is only set to be a customer account type not a business the business settings field is not visible there and of course because i've stored a value in the database for my full name when i registered an account that information is being displayed within the initial content of this field itself but what i'd now like to do is just update the address and profile photo of my account so i'm just going to say that my address is 282 stainless street san francisco and then i would choose to upload a profile photo and now once i've uploaded a profile photo i'm going to choose to update the details within my account that workflow will run and as you just saw the alert message had temporarily displayed on my page let's say i'd like to now upgrade my account to become a business account what i'm going to do is select the advertise on groupon option and it's now going to display the text element within our page here which of course will open up our business settings when we click on it and that workflow will run to change the custom state so it's not only hidden our account settings but it's now displaying our business settings tab and from here i'm going to add in my business name so i'm going to call this building with bubble for the address i want this to be 781 stainless street in san francisco for the phone number i'm just going to add a string of numbers there i'll add in my business website as well perfect and then i can upload a logo here and then once i've uploaded my logo i'm going to choose to update the details within my business account you'll see that workflow has ran it's displayed my alert message and if i'd really like i could even switch between the two different tabs that i have within my account settings here and finally the very last thing i'd like to show you is that if we select to create a groupon code it's going to just redirect us through to our page which at this point in time is blank back in my notion checklist i'm going to tick off that we finished building out the feature that allowed users to not only update their own account settings but also register their account as a business and then also update the details that we're storing within their business in our platform after building out our account settings page the next feature i want to focus on throughout our tutorial today is the ability to create groupon offers from a business's account and if you remember on our account settings page we had created a button that allowed businesses to be redirected through to a blank page in our application called create groupon it's at this point in our tutorial that we're now going to build out the entirety of that page so let's jump on over into our bubble editor and open that page up so over on our create groupon page here our page should currently be blank what i'm gonna do like i have always done is just update the background color to be a light shade of gray just so i can see where the text and input elements are going to sit on this page itself and then going to start by adding in a text element at the top of our page to act as a heading and this text will display the words create a new groupon i will then update the style of this to be the h2 heading format and then i will just reduce the height and width of that element and now below this i'm just going to add in a myriad of headings and input fields that are necessary in order to store all the information we need for this new groupon so i'm going to start by adding in a text element and this text element will display the word highlights so this is just going to be the description essentially for the groupon that a business is creating i'm then going to open up our rich text editor highlight that text and choose to bold the formatting of it i will then save that and just reduce the height and width of that text element as well just moving that down and now below this heading i'm going to be adding in an input field which as i mentioned will allow a business owner to add in any details they'd like to outline within their groupon so this can essentially be like the description field of the groupon itself and now because this field can contain quite a bit of text i'm going to scroll on down to our input forms and instead of just choosing to add in a single line input i'm going to select to add in a multi-line input and the difference between the two is that with a single line input if a user was to add more than one line of text it would just continue to expand horizontally cutting off any text at the beginning whereas with a multi-line input field this will just continually expand downwards based on how much content has been added into it so it just allows users to add in as much content as they would like i might just even expand this out a tad there as well and i'll be updating the name of this to be called multi-line input highlight and then i'm going to select the option to stretch to fit content just making sure that it will in fact expand downwards if more text is added in than is currently available in this space and while i'm here i'm just going to make one change to the border style of this input and that is just update the roundness here to be zero just so similar to the inputs we've previously added in our application so far the edges are sharp they're not rounded and then going to just move this across making sure it's in line with our heading there and now after a business owner has added in all of the details that will be stored in the highlights of our groupon here i'm going to copy this heading drag this down and i'm going to update the name of this to display the text location i can see i'm just going to need to update the formatting there of the bold style and below this i'm going to be adding in yet another search box like i'd done in my previous modules and that would just allow the business owner to verify what location this groupon will be valid at so even though we are registering the location of a business on our settings page you might find that they might be hosting an event that's not at their core company address so that's why i just want to give them the option to add in a custom location here which just gives them complete control over where this groupon will be valid so in order to add that in i'm going to head to our input forms and choose to add in a search box and now i'm going to be updating the name of this to be called search box location and i will update the choices style here to be a geographic place so that way it can index real world addresses through google maps and then i'm also just going to make this input the same height and width as the previous element above it there so i can see the width of this is 618 and the height is 47 so i'll update the width to be 6 18 and also the height to be 47 i will then just move this across making sure it's in line with the element above it there and then below this i'm going to copy my heading drag this down and now i'd like to register what the initial retail price was for this offer and then also what the discounted groupon price will be so i'm going to update the heading here to display the word retail price i'll need to expand the width of that out and then below this i'll be adding in just a single input field here i'm going to drag this down and i'll update the height of this to be 47 so that way it's the same height as the previous input fields above it and then i will update the name of this to be called input retail price you can see i've just got a small typo there much better and now the only change i'd like to make to this input field is that i'd like to update the content format that's stored within our input because at the moment it's currently set as a text field whereas i'd actually like this to become a currency and now one thing i would just like to note is that currencies will register the value as a number which if you remember in our database our retail price and our groupon price which i'm going to be adding on our page in a moment the type of their data fields were both set to numbers so now the currency field will match this perfectly i'll then just make sure that this is in line with all of the input fields above it there and then i'm going to select both the input field as well as the heading i'm going to make a copy of those and drag these out to the side i'll then select our heading and update the title of this to display the word groupon price i'll need to expand the width of that out and i'll make sure it's just in line with our existing heading there which means i'm just going to need to move my input field down and now for our input field i'm just going to update the name of this to also be called groupon price and by this point the content format has been updated to a currency so i won't need to make any other changes there and now below our retail and group price fields i'd like to store the expiry date that this groupon will be available to purchase until so i'm going to copy our heading drag this down update the text it displays to show the words expiry date and now because i'd like to store the value of a date i'm going to need to select from our date time picker input field here i will drag this out and i'd like this to be the exact same dimensions as the input field for our prices above so i can see the width is 194 and the height is of course 47. so i'm going to update the width to be 194 and then the height to be 47. while i'm here i'm just going to also make sure the style of this input has sharp borders around the edge of it like the rest of our input fields so i'm going to choose to remove the style of this element i'm going to scroll on down and update the roundness of our border to be zero and now before i move this element across i'm also just going to update the name of this to be called date time picker expiry date i just need to add the y in there perfect now i can just move this element across making sure it's in line with all of the existing elements above it there and now beside our expiry date i'd like to register what type of category this groupon code will fit within so is it related to family travel or even sports and that'll just be helpful when a user can actually filter through different categories either on our home page or our search results page which we'll be building out in a moment but for the time being i'm just going to select our heading here i'm going to copy this and drag this across making sure it's in line with both of our headings there i'm then going to update the title of this to display the word category and now with our categories you might remember that in our database we had created a list of option sets which just predetermined a list of categories that a user could store within a groupon itself and it's at this point in our tutorial that i'd like to start referencing that list so from our input forms we're going to select to add in a drop down menu i'll drag this out and i would like this drop down menu to be the same dimensions as the previous input field before it so i'll update the width to be 194 and then the height to be 47. i can then make sure that's in line with the rest of the input fields above and beside it and now for the name of this field i'm going to update this to be called drop down category and for the choices style instead of displaying a list of static choices i'd like to display a drop down list of the predetermined option sets that i've already added in our database so i'm going to select to display a list of dynamic choices and for the type of choices i'll be selecting from our categories option set and of course i'd like to display all of those categories from our option set and then finally for the text that's displayed within the drop down itself i'd like to display the current option which is our option set list it's display so if you remember the display of an option set was the text itself for each individual option that we've added and then finally on our page there's one last field i would like to register within our groupon and that is just a list of images that can be displayed on our groupon page and so in order to do that i'm first going to have to expand the width of my page down i'm just going to make this a thousand pixels high and then from here i'm going to copy a heading element i'll drag this down and i'll have this display the word images and now when it comes to actually adding a list of images so of course a business could add multiple images to their groupon listing we're going to have to install a plugin to enable that feature so if you were to currently look at the existing picture uploaded element it only allows you to add one image at a time whereas what i'd like to do is create an experience where a business owner can upload multiple images to their group on listing at once and the way we can create that experience is by using a featured plugin and so in order to add that in we're going to head over to our plugins menu here and we will choose to open up our plugin library and we're just going to search for the word multi and once i perform that search i'd like to install the multifile uploader plugin so i'm going to choose to install that and that is the free plugin which has been built by bubble i can then choose to close my plugin library jump back into my design tab and now i'll see under my input forms the option to add in the multi-file uploader so i'm going to choose to drag this element out here and i'll be updating the name of this to be called multi-file uploader images and then while i'm here i'm just going to add a border around this element for the time being just so i can actually see where it sits on my page so i'm going to select to update the border style to be a solid border and now when it comes to using our multi-file uploader one thing i would just like to note is that a user can drag in as many different files or images as they would like into this input element but within the actual element itself it's not going to display a preview of the images it's only going to display a list of the file names that have been uploaded to it and so in order to display a preview of all of these images we're just going to need to add in what's called a repeating group beside this that can just reference all of the files that have been uploaded to our element and then display a preview of them and so in order to add a repeating group i'm going to scroll on up to my containers menu here i'm going to select from the repeating group option and when i drag this out you'll see essentially how a repeating group functions so essentially repeating groups are great for creating a list of items within your bubble application so a common use case for repeating groups is if let's say you're building a social media platform like instagram and you'd like to display a feed of posts within a home page each row within a repeating group can be used to display an individual post and you can completely customize the style of the repeating group as well as the data source for it in our case though today i'm just going to display a list of all of the images that have currently been uploaded to our picture uploaded here so for the type of content i'm going to update the value of this to be an image so if i scroll on down i'd like to select the image option because in this case i'm going to be displaying a list of images and those images are of course the images that have been uploaded to our element and so for the data source i'm going to need to identify that i'd like to display all of the images that are currently stored within our multi-drop down picture uploader so i'm going to select the multi-file uploader images it's value and then from here i'd like to update the layout style of our repeating group so i'm going to update this to be extended vertical scrolling which essentially just means it's going to display all of the images at once one thing i would just like to do though is also update the number of rows to be two as well as the number of columns to be two and now what you'll see is it can display a nice grid of four different images i'm also then just going to remove the style of our repeating group for the time being just because i would like to add a solid border onto this element so i can see where it actually sits on our page and now that we've configured the actual layout style of the repeating group what we can do is start to add in the content that we'd like to display within each cell and so in this case within each individual row or cell in our repeating group i'd like to display one of the individual images that's been uploaded to our picture uploader and so before i do that i'm just going to expand the height of this down so that way the images can be a little bit higher that i'm going to add within them and now i'm going to select to add in an image element into our repeating group so under our visual elements i will select the image option i will drag this out and add that within our repeating group and for the data source of this image i'd like to insert dynamic data and display the current cells image and by the current cell's image it just means that it's going to display the entry within this cell of our repeating group so let's say a user has uploaded four images into our picture uploader our first cell will display image number one our second cell will be image number two then they'll be image three and four and so on what i would also like to do is just choose to process this image with injects just so i can be sure to resize the dimensions by cropping it which just means it's going to expand that image out to fit the full width of the image field here and then i'm just going to choose to right click on this image choose to center that horizontally and then i will also center that vertically within our repeating group and that is how we can create an experience that displays a preview of all of the images that have been uploaded to our picture uploaded here one thing i would like to note though is that as it stands this repeating group that we've just added is currently visible on this page at all given times whereas what i'd like to do is actually hide this repeating group until a value has been added into our picture uploaded here in which case i would then like to display it because it will have an image to actually preview and similar to our account settings page i can create this experience by using a group element so i'm just going to need to add a group into my page so for the time being i'm just going to move my repeating group down there i'm going to scroll on down to my containers menu and choose to add in a group element i'll drag that out i'll just choose to update the style to be the group border option so that way it has a flat color background and then i'm going to just drag our repeating group into our group here and what you'll notice is that the repeating group now sits within our group so wherever it moves the repeating group will move as well i'm going to just move this across and just make sure that my repeating group is in the corner of my initial group there and the reason i've chosen to add our repeating group within another group is because as you might be aware from our account settings page it's possible to easily hide and display groups and we can also choose to collapse their height when they're hidden so on our group here i'm going to update the name of this to be called group image preview and i'm going to choose to unselect that this element is visible on page load which means of course i'm going to need to create a condition that identifies when it should in fact be displayed on our page so under our condition tab here i'm going to define a new condition and i'm going to recognize when our picture uploaded here so when our multi-file uploader when it's value which the value is any images that have been uploaded into that element when the count of how many images have in fact been uploaded is greater than and i'm just gonna type in the number zero so this essentially just identifies when any image has been added into this uploaded element i'm going to choose that this element should be visible and tick that that is true what i'm also going to do is jump back over into my appearance tab and just select to collapse this element's height when it's hidden so that just means that if there's any elements below our group here these will just move up accordingly when this group is not displayed and once i finish adding in that condition i'm just going to close off all of the empty space within our group there making sure it's wrapped quite nicely around our repeating group and from here now i'm just going to add in one last element onto the page and that is of course a button element i'm going to drag this down here make sure it's the same width as my picture uploader above it there and i'll update the text that's displayed within this button to show the words publish groupon and now i would like to create a workflow every single time this button is selected so i'm going to choose to start edit a workflow and within this workflow i'd like to head to our data tab because i want to create a new thing because at this point in time our groupon offer listing does not yet exist so from our type of things i'm going to choose to create a offer listing so this is just a new groupon listing and then from here i'm just going to need to match the fields in our database with all of the input fields on our page so this is actually much the same as the process of creating a new user's account so i'm just going to start going through this list by adding in the category of this groupon listing and its category should equal the same value as the drop down category then from here i'm going to add in the expiry date which will need to be the value of our date time picker on our page the next field i would like to add is the groupon price so this will be the field value of our input groupon price which was a currency which also as i mentioned will convert to be a number in our database then i would like to store the value of the highlights field and that is our multi-line input highlights on our page its value then there was our images and now what i'd like to do for this is choose to set a list of images that will be stored in our groupon offer listing so i'm going to set the list to equal the value of all of the images that have currently been added into our multi-file uploader its value then from there i'm going to update the location field which of course is the value of our search box location and i apologize if i'm running through these pretty quickly but this is actually as i mentioned before a very similar process to either creating a user's account or making changes to the fields within a user's account but the very last field i'm going to store is just the retail price of this groupon i want this to be the value of the input retail price that we have stored on our page and that is all of the fields we'll need to register within our offer listing here one thing i would just like to point out is that if you'd like to store any other information about an offer listing i'd always recommend pausing the tutorial and adding in any additional data fields within your database and then of course making sure you add the relevant input fields you need on the page in order to store data for those data fields and that could just be something like the title for the offer listing or maybe even a more detailed description about it but for our mvp today i'm just going to keep things pretty straightforward and add in these core fields what i would like to do now though is just create an experience that redirects a business owner through to a dedicated page in an application that will display the full details of the groupon offer listing they've just created in our database and before we can create a redirect event in our workflow editor what i'd like to do is select from our page drop down menu because in this case i'd like to create a new page and i'll be calling this page the offer listing page so this is the page in which users can see the full details of every single groupon offer listing that's been created i'm just going to choose to create this page and now at this point the only change i'm going to make to this page is just update the type of content that's stored on this page so because i'd like to display the information of a groupon offer listing on at this page i'm just going to need to update the type of content to be an offer listing which means in my workflow editor on the create listing page if i was to redirect a user through to this page i can send with it the value of an offer listing that's just been created and then when that user lands on this page we can choose to display all the information that's been added and i'll be showing you an example of how that functions in a moment but for the time being we're just going to need to jump back over to our create groupon page open up our workflow editor here and choose to open the one workflow we had previously created i'm going to add an additional step onto this workflow and choose from the navigation event i'll be selecting the go to page option and the destination page will be our new offer listing page and because we have a type of content set on that page we're going to need to send through some data to that page so that way the page knows exactly which offer listing to display and so the data i'd like to send through to this page is the result of step one in our workflow which is the step where we actually created a new offer listing but that's all we'll need to build out for our workflow here and that actually completes the process of building the page to create a new group on offer let's jump on over into our bubble development environment and take a quick preview at how this page now functions so over in the preview of my application i currently logged into my lachlan kirkwood account which of course i had also updated the business details here and if i'd like i can scroll on down to the button that allows me to create a new groupon offer and that's going to redirect me through to the page that we've just built out and on this page i'm just going to add in all of the details for my groupon offer so i've just got some text that i'm going to paste in for my highlights here of course yours can be as long as you would like as this field will continually expand based on how much content you add into it for the location i'm just going to set this to be 781 senior street in san francisco which is the same address as my business for the retail price i could say that this was 9.99 but now i'm going to make this 4.99 for my groupon price for the expiry date i could select that this is going to be the end of november and then for the category i'm just going to set this as shopping and then for the images itself i just have a folder here with some test images that i've created i'm just going to drag those in you'll see that they will upload and then a preview of all of those images will be displayed within my repeating group here and once i'm happy with those i can choose to publish my groupon that workflow will run it will create that in our database and it will redirect us through to our offer listing page and what you'll see is that within the url it's also sent through the unique value of the offer listing that we've just created back in my notion checklist i'm going to tick off that we've finished building out the feature that allows business owners to create a new groupon offer listing within our groupon application 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 [Music]

Channel: Building With Bubble

Views: 462

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, no-code marketplace, no-code education platform, Groupon clone, Groupon

Id: C7iSSwLrk-A

Length: 98min 24sec (5904 seconds)

Published: Sun Nov 14 2021