Building A Job Board Like Indeed With No-Code Using Bubble

now over on our search results page we can see that existing role i created before under door dash let's say i'm interested in viewing that i'll select the view button and now the group will display it'll include the profile photo all the information i need about the salary and also the job description [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a indeed clone entirely out of no code using bubble bubble's by far one of my favorite no code tools as it not only gives you the ability to create a custom database but it also allows you to create a custom front-end design and also integrate with third-party plugins and apis for those of you who don't know me i've spent the past year working with the bubble team to create 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 recreating them using bubbles no code tool throughout this tutorial i'll be explaining the exact process you'll need to follow in order to build your own job board like indeed this will include features like registering user accounts creating a home page where users can search for jobs building out a search results page to display a list of relevant jobs then creating a function that allows users to apply for jobs processing payments when a company publishes a job and finally building out a dashboard that allows companies to monitor the activity of their job applications and update the status of jobs on our platform so grab your bubble editor and let's dive right into it the first feature of our build today won't actually be a core feature of the product itself but instead we'll be taking the time to set up the necessary data types and fields within our database now i've created a notion dock here that i have added in all of the different data fields into that i'll be using to follow along i'd recommend you also take the time to create one as well just so you can go ahead and tick off all of these items once you've finished adding them into your database i personally find that it just helps me keep track of the build throughout the whole process now what i love about bubble is that it does give you complete control over creating your own custom database however you would like it and you'll see how exactly we can do this as i run you through all the different data types and fields but you'll also see that you can actually link the different data types together so you can create a truly relational database so let's head over into our bubble editor and i'll walk you through the step-by-step process and explain each different data type and field as we add them into the application so over in my bubble editor i'm going to go into the data tab and the first thing i'll need to do is actually set up the different data types as we'll need to link different data fields together it's important to first create the different data types so within my notion doc i have three different data types that i'll be using today there's the user data type the job data type and then the application data type so we'll just go ahead in our bubble editor and add in all of those data types so there'll be one for job and there'll be another for application now you probably noticed by now but bubble itself actually comes with the user data type pre-built into it so you don't need to actually go and add that it will also by default come with an email field built in so when you're registering a user's account it has to register an email address and it'll also store a password within that but they just don't allow you to manipulate that field now we can go ahead and start adding in the data type for our user field so we can head over to our notion doc and we'll start by adding in the first few items here on my list which is the name the bio the photo and also the user's current job title and current company so we'll head over into our bubble editor and i'll start adding those in so first it was the name field which will be a text field type we're going to create that then there'll be a photo which will be the user's profile photo this of course will be an image field type then there was the user's bio which again will just be a simple text field and then we'll need to store the user's current title so this will be the current job title that they have again this will be a text field create that and also the current company that the user is working at which again will be a text field now if i go back into my notion doc i can tick off that i've added in these initial data fields and you'll see the next one that we'll need to add is actually a profile type and the reason i'll be adding a profile type is because on our indeed product today we will want to actually create two different types of users there'll be those users who are applying for jobs and then they'll be users who are companies that are listing jobs now these will both use the same user data type but will essentially be adding additional fields that each different profile type can leverage across our platform so if we head into our editor we'll add in a new field and we'll call this field profile type now i'll be explaining later on when we register user accounts how we can actually differentiate these users across our platform but in the meantime this field type itself will just be a text input field and we'll get to create that now once we've added in the option to differentiate the profile type we'll add in some data fields that allow a user to store information about a company if they are registering as a company so this could be things like who the current ceo is the company size the year it was founded and of course any job listings that they're published so i'll go in and i'll add in the option to select a ceo this will be a text field there was also the year founded this will be a text field and finally there was company size and i will also make this a text field then the last field i'll be adding is a list of all the job listings that a company may post across our job board so i'll call this job listings now this will be able to link to the job data type that we created earlier on which allows us to pull all of the information stored within each job that a company might post so we'll scroll on down and select that this field type needs to be a job and of course because a company can post multiple job listings on our platform we'll need to select that this is a field or a list with multiple entries so we'll go ahead and create that and now we've finished adding in all of the data fields for our user data type we'll then head over to our job data type so we'll go into our notion dock i'm going to just tick off that i've added in all the data fields for a user and then i'll start adding in all of the data fields here for our job so let's start with the role title of the job the description the website link and the salary of the job so let's head into our editor i'll create a new field i'll call this role title which will be a text input then there'll be an option to add a description for the job which of course will be another text field and i'll also add an option to include a website link which will be a text field but the reason i'm adding a website link is that because we're going to allow companies to post a job on our platform that can either be redirected to their own company job board if they want users to apply there or we will also be adding an option today to allow users to apply directly on our platform but i'd like to give companies the option for both so go ahead and create this website link data field and then i'll go and add a salary data field and this itself will be a number and we'll create that then if i head back into my notion doc i'll start taking off that i've added in these data fields and i can see the next option is to add in a location a company and a job type so i'll head over again i'll select add a location and this location will be a geographic address i'll select to create that then what we'll need to do is link this job to a company that has published it now if you remember a company is a user so i'll select to create a new field and i'll call this company and the field type we'll be using is a user and this will not be a list of multiple entries because only one company can publish one job at a time so i'll create that and the next option will be the job type so this will be if the job is part-time full-time or casual so this will be a text option as well and then if i go back over to my notion doc i can see that the next field will be an option to market as complete and also store applications on it so i'll go and create a new field for complete and this field type will actually be a yes no field so the job will be either complete or it won't be complete and what i mean by complete is that the company has published a role and they've sourced someone for it we're going to need to give them an option to mark that as complete so that job no longer displays on our platform so we'll select this to be a yes no field so it'll be one or the other we'll go and create that and then we'll set the default value of this to actually be no because by default we don't want jobs to be complete we only want them to be marked as complete once a company has listed so within an admin dashboard and finally the last field i'll be adding for the job data type is a list of applications so this will be anyone who has applied for the role we're going to want to display a list of all of those applications that a company can search through so we'll update the field type to be an application which of course will link to our other data type and all of its data fields and of course there'll be multiple applications from multiple users so we'll select that this is a field list with multiple entries so we'll create that and now we can go and tick off the rest of the data fields for our job type and then finally we'll set up the data type for our application so we'll be storing in this a resume a cover letter and also the information of the user's current role and the current company they're in so jump into our editor select our application data type and the first thing i'll do is add an option for a resume now this will be a file type because we'll be allowing users to upload a pdf file that they can use as their resume and then the cover letter will be the exact same so we'll add in that as the field name and then select that this is a file again i'll select to create that and then i'm also going to want to store a user's current role and this will be a text field and finally a user's current company which will also be a text field now because our data type for our application actually links to a user so whenever a user creates an application bubble will store that information as you can see here as the creator of this application so within our build we actually could link these two data fields back to our user data type as we are storing that information already here so we could essentially just say with an application that we want to see the user who applied for it their current company size and current company i just want to show you the option today that if a user doesn't have an account perhaps and they haven't registered for your platform you can also add an additional field so that if someone doesn't have an account you don't have that data to pull it just gives someone the option to add that in within their application and finally i'll go and take those off in my notion doc and just like that we've finished setting up our own custom database for our indeed job board clone today so you can really see how easy it is to go ahead and create your own custom database in bubble with a multitude of different data fields and types that you can create so if at any point you wish to add additional features later on after this tutorial this should give you a good guide to understand what is possible in terms of setting up the infrastructure for those features now that we've finished configuring our database let's go and take the time to jump into the list of features that we'll be working through in the tutorial today and once again i've created a list of all of these in notion so that i can tick them off as we go along with our build and you'll see here that the first feature we'll be working on is the ability to register user accounts and as i mentioned when we were setting up our database particularly we're going to need to create a way to register different accounts between those who are employers and employees so the people looking for jobs let's jump into our bubble editor and i'll show you how this can easily be done now within bubble i do want to mention that there are a couple of different ways that you can register user accounts and the first is by using bubbles reusable element so if you're not familiar with that you can head over to the drop down menu in the top left hand corner of the screen and you'll see that there's a list of reusable elements here and also an option to create your own reusable elements reusable elements can come in handy as you only need to build an element or a component of elements once and then you can call upon them at any given time so it'll save you having to rebuild them if you want to duplicate a particular element across multiple pages of your application so we'll go ahead and click on the sign up login popup that bubble has created by default within our reusable element list now you'll see that this is as i mentioned a pop-up element so this will actually display over a screen this isn't a dedicated page but what you will see is that it already has all of your existing input fields ready to go here so it's got the email password and a password configuration field and the other thing i love about reusable elements is that if you go over to the workflow tab you'll see that bubble has already pre-built all the workflows you need as well and they're pretty much covered every single use case you'd need for a pop-up login so there's an option to sign the user up you can log the user in if they already have an account there's a option to resend a password if someone's forgotten their password so this pop-up is quite handy if you don't want to build out a dedicated landing page in particular i find this comes in handy if you let's say have a gated action on your platform so a good example of this would be something like instagram where if someone who isn't a user would be scrolling through a feed and if they decide to like a post and they're not registered on your platform you could trigger this pop-up so that way it doesn't take them away from their current experience and it allows them to just quickly create an account and continue on with the process that they were using within your application the way i am going to be building our registration experience today is actually not through this pop-up instead i'll be creating a dedicated page however at any point if you feel it's suitable you can go ahead and also reference this pop-up and display this at any time throughout your application as i mentioned i won't be today but i just think it's important for you to understand that this is an option within bubble so the way i'm going to be doing this is by going and creating a new page and i'm going to call this page register and the first thing i'll do on this page is just update the background color i personally while i'm developing an application just like to change the background to a light shade of gray or any different color just in case i'm adding any white elements on the page it allows me to just see where the constraints of the page are of course you can go and update this as you need to after you finish building out your application but then i'm going to go and just add a text field on our page and i'm going to call this register account now i'll go and update the style of this to be a h2 heading now i'm not going to be touching any of the design elements throughout this build but if you want to go and add your own custom styles i'd recommend doing that i'm just going to be using bubbles pre-built ones to get us through this tutorial but i'll just resize that roughly center that and then i can go and copy this title and add in an option to register a name then below this i'll go and add in an input field i'll drag that out and i'll update the name of this to be called input name and then i can duplicate both of these elements i'll drag that below and this will register a user's email so i'll call this heading email also they need to go and update the name of the input convention to be email and the reason i'm doing that is because when we create a workflow it'll make it much easier to register which input fields you want to pull data from we'll also need to update the content format of this input field to be an email field so it can actually register that we're recording an email address i'll just move these headings down a bit as well so they're a bit more snug on the input fields and then i'll go ahead and duplicate the email field and you probably guessed it but i'll be calling this one a password and then i will of course be updating the name of this input to be called password and i'll also update the content format of this to be a password so now it will hide characters that are added into it and then finally i'm going to need to add in that option to register between the different accounts so an employer or an employee so i'll go and copy the password heading and i'll update the text to say account type and then i'm going to go and add in a drop down element here and then we'll just be making sure that this drop-down element is a list of static choices and we can go ahead and add in two different choices here so the first one will be i'm looking for jobs and then to create another choice simply just hit the enter key it'll add into a new line and then i'll say i'm looking to post jobs so this will be where users can differentiate between being an employee or an employer and then i'm just going to go and quickly update the styling here i'll just move these roughly into the center that heading behind and then i will go and add a button element into our page here and this button will just say register and then i will select to create a workflow when this button is selected which will register all of these fields within our database for a new user so let's go and move into our workflow tab and we'll create our first workflow so we'll add in a new action we'll be selecting from the account action and in this case we'll be signing the user up now you'll see here that we need to match the input fields on our page with the data fields within our database for user so we'll match the email field with our input email so it's value and then the password will be selecting the password input fields value now after we've registered these two essential fields we can also add in additional fields that we'd like to store within our database and keeping this quite simple by just registering the user's name and also their profile type so i'll select the user's name field this will equal the input name fields value that we added onto the page and then finally the user's profile type will equal the drop down that we added its value now if a user is registering a profile type as a company looking to publish job listings their name of course will be the name of the company that they work for so after registering a user's account there's one last thing we'll need to do to this workflow and that is send a user to another page because after a user registers we don't want them to stay stagnant on the same page we're going to want to send them either to our home page or settings page where they can update the rest of their profile information in this case i think it's quite important for users to update their profile information first before looking or publishing for jobs so i'm gonna go and send users to a settings page so we'll go ahead and we'll add in a new action in our workflow we'll select from the navigation option and we'll select to go to a page now we'll need to go ahead and create a new page first so we'll select the add new page option and this page will just be called settings i'll go and create that and then i'm not going to do anything on this page right now i will then go back into our registration page jump back into our workflow editor and now with the destination page i can select that this should be our settings page within this workflow i also won't be sending any data through to this page and just like that we've finished building out the registration page of our application so now a user will be able to input all of their details onto our page inputs here select to register an account it will do that and then it will redirect them to a settings page where they can update the rest of their profile information let's quickly go and take a look at our preview to see how this functions within our bubble development environment so i'm going to go ahead and register a new account here i'll call my name lachlan kirkwood i'll add in an email address that is just test gmail.com i'll add in a very secure password and then i will choose from the account type i'm just going to say that i'm looking for jobs in this instance and then i will register an account and as you can see it has registered my account it has then gone and redirected me to my settings page here which is exactly what we wanted it to do and now back in our notion dock i'm going to go ahead and tick off that i've registered a user's account and in particular i've added in a function to create a point of difference between those who are employers and those who are employees now that we've finished building out the housekeeping work of our build today we can go ahead and start to build out the core features that the end users will get to interact with and the first one of course will be a home page now the indeed homepage is quite simple and this is actually quite an easy module within this tutorial there are a few specific little details and new answers we'll have to pay attention to but i'll be sure to explain these in detail as we walk through each of these stages here so let's jump into our bubble editor and then we'll go ahead and create a new page within our app and we'll call this page home now as i always do i'm going to update the background color just to be a gray and from here we're going to keep things really simple we're going to add in a text element here that says search roles i'll just update that to be a h2 i'll also just reduce the size of the text box it's in and then below this i'll add in an input field i'll call this input field uh search roles and then i'm going to go ahead and copy across the heading and then i'll update this to be called location and instead of adding in an input field what i'm going to do is actually add in a search box now the difference with a search box from an input is that a search box as its name states can actually search for information to display now there's some circumstances where you might want to let's say search through a list of all the users on your platform so you could go ahead and define a dynamic choice that would index all the users on your platform in this case though we're going to be using a separate feature and that is to index a list of addresses now what we'll be doing is we're updating the choice of style from dynamic choices over to geographic places because this will now actually register pre-existing addresses which bubble can pull in from a google maps api i'll then also just go ahead and update the search box here to be called location and then finally before we go ahead and create a workflow i'm going to add in a button element and this button will just say find jobs i'll just quickly tidy that up move that down a bit move that over make that slightly bigger and in terms of design that's actually all i'm going to be adding onto our homepage because if you look at indeed you would understand that it's quite a simple experience the idea i guess is they want to get people away from the home page as quickly as possible so they can help them find something valuable which in this case would be the relevant job listings now from here what we'll do is we'll go ahead and create a workflow when the find jobs button is clicked and within this workflow we're going to send a user through to a search results page so we'll select from a navigation event and select the go to page option and then we're going to obviously need to create a new page called search results now what we do is we'll just quickly add a new page call this search results create that page and then once this page is created i'm going to jump back over to our home page and now within this workflow i will select the destination to be the search results page and from here what we're going to need to do is actually send through the data from the input fields on our page so we'd like to obviously send through the role that the user is searching for and then also the location that they're searching within now contrary to what you might think we're not going to actually be sending data through this option here because at this point we haven't actually saved any data within our database to send through what we are going to do however is choose to send through more parameters to this page now what parameters allow you to do is customize a url stream that gets sent through to the destination page and then from here bubble can actually register the values that it's sent through and you can pull that data and choose to display it on those pages so i'll walk you through what we're going to be doing today and i'll explain in a little more detail as we go through but what you can do is add in any custom parameters you would like to send through so what we'd like to do first is send through a parameter called job title and this will need to equal the value of the input field on our home page which obviously is someone searching for a particular job title so what we'll do is we'll go ahead and create a value for this parameter key and we can do that by selecting the input value of our search roles input field and now what it'll do is it'll actually register the role title that someone's searching for so let's say they're searching for roles in social media or as a particular role it could be a social media marketer they'll be able to send that data through to our search results page and we can customize what job listings will display based on the value of this parameter then finally we'll just need to add one last parameter to this page and that is the location in which a user is searching for a role because obviously we'll only want to display the roles that are in a close proximity to that user so what we can do is add in another key here and we'll call this location and the value of this location will of course be the input value of our search box we've added now because a search box will actually index a proper address so it'll index the number of an address the street name and also the city we might instead just want to generalize the location that a user is searching for down to a city level and there's a simple way we can do this we can after we've added in that we want to pull the data from the search box locations value we can search for an option here called extract and because this search box is formatted as a geographic address it'll allow us to extract which particular value we want to send through to our search results page in this instance i'm going to want to extract the city value and now it'll just send through the unique value of that city which again will be able to identify any jobs on our search results page that are within a certain range of that city so now if i head back into our bubble editor we'll go ahead and actually experiment with how this all functions so from passing through the values of our input fields and our location sending that through to our search results page and i'll show you how those values are stored within our url strings so i'll go ahead and start by searching for a role i'll call it social media and the location will be san francisco and you can see that it is automatically pulling in all of the options for san francisco and if you wanted to add in a specific address it would also index those but because of the extraction we've added into our url parameter it'll only just be exporting anything of these on a city level so we'll select san francisco choose to find jobs and you can now see that we've been redirected to our search results page but also at the same time it has sent through the value of our query so social media in this case and then it's also sent through the value of the location so san francisco and just like that we finished the build for the first core feature within our product after building our home page we can finally go ahead and finish building out the search results page that we created before within our application so we'll head on over to our bubble editor and jump on over to the search results page that we created before and like always i'll go ahead and just quickly update the background color to be a light shade of gray and similar to last time i will go ahead and add in a heading menu here only this time i won't be adding in a completely static heading what i'm going to want to do is actually insert a dynamic heading which pulls in the information from the user's query that they're searching for so in this case if you remember we were storing the parameters from our home page which was the job title and the location that the users were searching within i'd like to pull and display that information on this page just to reconfirm that the user is searching for those particular values so i'll start by adding in a title that says get then i want to insert dynamic data so this could be things like get social media marketing jobs so i'll insert data i will scroll right down to the bottom to the option that says get data from page url and then you can see that we can actually pull data from the page parameter that we'd set before now if you were to go to your home page and then jump back into the workflow editor you can see the parameters that we've previously created so there's two there's one for the job title and another for the location i'll go ahead and copy the job title parameter key and then i'm going to go back over to our search results page head to our design tab and then i can finish displaying which data we want to pull from our url parameter so i will paste in the option to pull in data from the job title parameter and then i will add in some more static text so it'll say get job title jobs within and then i'm going to want to display the location parameter so once again we'll insert dynamic data i will go down to the bottom select the get data from page url option and the parameter in this case was just called location now i will go and update this to just be a h2 style heading just so it's a little larger so the next thing i want to do is add in a list of all the jobs across our platform that match the same values of this url parameter so what we'll do is we'll head over to our element option here and add in a repeating group element now repeating groups are by far one of my favorite elements within bubble and what they allow you to do is display a list of dynamic options so say for instance you wanted to display a list of all the jobs across our platform we could simply add in the value of one job that we'd like to display and then it will pull all of the rest of the jobs and display those in the same format so the first thing we'll need to do with a repeating group is update the actual type of content that it will display in this instance we'll be wanting it to display a job and then once we've identified that we're displaying a list of jobs we need to give it a data source that allows it to identify which specific jobs we want it to display so in this case we'll select a data source we will perform a search so select the do a search for option and now we will select the job option so as it stands this repeating group is now going to display a list of all of the jobs that have been published across our platform which we don't actually want that to be the case right now we only want it to display a list of the active jobs that match the title and the location of a user's query so let's go in and add some constraints so it can refine the search of jobs that it will need to display the first thing i want to do is select the complete option for a job as i'm only going to want to display a list of jobs that are currently active so in this instance we'll only be displaying jobs where the complete status equals no bear in mind that later on we're going to be building a feature that allows employees to update the status to yes then we'll want to add another constraint which will be the role title and we'll want this to contain the value of the url parameter that we've sent through so again we'll scroll right down to the bottom select the get data from page url option and the page parameter in this case was called job title i'll close that and then we'll add in another constraint which identifies the location of the role that we want to display so in this case it will be the location and then we will select is within and you can customize this to whatever distance you would like but in this case i'm going to say when the location of a job that's been published is within 10 i'll go and select kilometers of the location that a user is searching for so then i will select the option to get data from page url and of course the page parameter i'm going to need to pull data from is the location so now i can go ahead and actually structure the format of this repeating group and you'll soon see how powerful these elements can be and get an idea for how they work so what i'm going to want to do is just reduce the size of this so it's about half the page move our heading over so it's in line with it and then when i format this repeating group i'm going to update it to only display two rows to begin with and then i'll update the layout style to be extended vertical scrolling so what this allows it to do is actually expand out or shrink based on how many jobs it needs to actually display then from here i can go and start to add in the content i'd like to display for each job listing so i'll start by adding in a title i'll go and insert dynamic data that displays the current sales jobs job title i'll go and update this to be a h2 style heading and i'll also just move that up to the top of the repeating group below this i might want to display the company who is currently recruiting for this job so i'll insert another heading insert dynamic data and say the current sells jobs creator or company in this case i'm going to choose company because we did add the option to update that when a company was submitting a new job listing so i'll select the company i'll update this heading to be a h3 dark and i'll just move that down a bit so there's a bit of space between those headings and then below this i'm going to copy that heading and i'm going to want to display the role type of this job so whether or not it's part-time full-time or contract so i will display the current sales jobs job type and finally i might also like to display when this job listing was posted so a user can see how long it's been active for on our platform so once again i'm going to copy one of these headings i will set it so it's in line with the rest and i'll be displaying the current sales jobs and you can scroll down and find an option called creation date so now it's going to show the exact date and time that this job was posted but furthermore we can go and format this so it will just display a particular date and you can choose however you want to display that so i might choose that i want to display in this format and then finally within our repeating group i'm going to want to add one last thing and that is a button that will allow a user to actually view this job listing so i'll put that it says view i'll move that over and then i'll go and just shrink the repeating group so everything fits in quite nicely and at the moment you can see that we're displaying a list of just the overview of a job including the title the company the type of role it is and also the date it was published but we aren't at the moment displaying the full information of a role and the way we can do that is by actually including another group element onto this page so let's go and add in a group here to the side of this repeating group and from here we'll just need to take a moment to configure a few settings on this group and the first one is that we're going to need to unselect that this element is visible on page load because we don't want this to display until a user selects the view button and then we'll also want to collapse this group when it's hidden because we don't want it to actually take up any space when it's not needed then from here what we'll need to do is update the type of content that this group is now because we'd like to display the full details of a job listing when it's this view button is clicked the type of content for this group will in fact be a job now although we've updated the type of content for this group to be a job the group currently doesn't know or have an understanding of which job to display so what we'll need to do is somehow send the data through from this repeating group over into this group when it's needed from a users click on our view button now the way we can do this is by using custom states in bubble and states are a powerful way to set data within your application and i'll be explaining to you exactly how we can do this so if we head over into our group element here you'll see there's an option to select this information icon here if we click that it'll allow us to create a custom state so we'll go ahead and select to create a custom state now states can contain any different type of data or feature that you would like in this case though i'm going to set my state to be a job so that way when someone selects a job from the repeating group i will set the state across my application to register that specific job and then of course i will display that specific job within my group element so i'm going to go ahead and call this state current role because this will be the current role that a user wants to view i'll go ahead and create that and now what we'll need to do is create a way for this state in an application to measure the value of a repeating group element here when it's clicked so once again our users scrolling through their job feed here they see a particular role they like they click the view button we want to set the state and record what job role they're currently looking at so the current role and then we'll want to display that information in this group so we'll go ahead and create a workflow when this view button is selected and then in our element actions what we'll want to do is search for state and we'll choose to set the state of an element the element will of course be our group job the group we've just created and the custom state will be the current role state that we've just added now remember that the current role state we created is linked to a job type within our database so it will need a value of a job which of course will be the current sales job from our repeating group and then back over in our design tab we'll go back into our group and we'll need to add a data source now to this group because it currently knows that it needs to display a job it has the option to save a state of a current job we'll just need to allow it to register what job it needs to display once a state has been set so the data source will be the group job so the group itself its current role so that is the state now every time that that state is updated when this view button is clicked the current role will also update and it will display the information within our group here now before we go and add any elements into our group there's one last thing we'll need to do to configure this properly and that is add a condition to actually display the group because if you remember we've unselected that this element is visible on page load because i don't want it to be displayed until a user actually selects a job that they'd like to read more about so let's jump over to our conditions tab here and we'll define a new condition and this condition will register when the group job its current role which is its state that we've just created is not empty so whenever there is a current role saved as its state it will display this group and will choose the behavior to select that this element is visible and of course we'll be selecting that that should be true and just like that this group will function quite nicely now we'll just need to go ahead and add in some elements into this group to help us display a specific role when it is selected so i'm just going to go ahead and make this group a little larger so i'll move it over a bit i'll also expand that out and i'll go ahead and the first thing i'm going to want to add is an image element now this will be the image of the brand that has published this role so i will add in dynamic data and the dynamic data for this will be the parent groups job so the creator of this job so the company who has published to this job i'd like to display their photo i'll just move that up a bit then i'll add in a text element beside this and i'd like for this to display the parent groups job it's a role title i'll also go ahead and update that to be a h2 style heading and i'll just move that across as well so it's not overlapping our image element there then i'm going to add another text element below the job title and this will want to display the creator of this job so the company who has published it so i'll select from the parent groups jobs creator then name which of course if a user is registered as a company that will be the company name and then below this i'll add one last text element and i'd like this element to display the salary listed for this role so i'll start by backspacing any content that we have in there i'll add in a dollar symbol and then i'll go ahead and insert dynamic data that selects from the parent groups jobs salary then finally i'll add in another text element and this will be the description of the job so i'll insert dynamic data that selects from the parent groups jobs description now again you can make this description a single line and it will expand based on how much content it actually has stored within this job listing and then the last thing i'll need to add is a button element here and this button will display apply i'll just make that a tiny bit smaller and then from here i can go ahead and just reduce the size of this group because once again all of these line elements will expand if they have more content within them so at the moment this page is quite functional and it will pull in any information from a user's search query it will display a list of all the relevant roles and when a user would like to learn more about a specific role they can click the view button and it will display all that information in a panel next to it there is however one last feature i'd like to add and that is the ability to add in some additional filters to help users refine their job search and these filters could be things like a salary or even the role type so whether they want a part-time or full-time role so i'm going to go ahead and select to move these items down and then above that i'm going to go ahead and add in a drop down menu right below our title on our page here and then i'll update the placeholder text for this drop down to say roll type and this will be a list of static choices and what i'll need to do is go ahead and copy the exact same text that i had used on the submission page so i'll head over to our submit page here i'll scroll down to the role type drop down menu and i'll go ahead and just copy all of those options i'll head back to our search results page and i will paste those in and again these will all need to be the exact same characters whether it's using capital letters or not because when you're refining the search we will be measuring it against the input values from when a company submitted a job and then beside this what i will do is also add in another input field and i'll update the placeholder of this to indicate that it is to search for a salary and then i'll also update the content format here to be a currency because of course we're displaying a dollar figure now when a user decides to refine any of these options here we're going to need to update and make changes to the data source of this repeating group because if you remember the data source is only searching for the role title that matches the user's query same with the location and also jobs that are currently still active on our platform what we will need to do though is add in some additional constraints that allow this repeating group to match the input values of these input fields here and the way we'll be doing this is by adding in some conditions so let's head over to our condition tab within our repeating group and then from here we will define a new condition and the first condition we'll create will match the role type drop down value here so we'll select that when the roll type drop down so the drop-down roll type when it's value is not empty we'll want to update the data source of this repeating group and the data source will need to do a search and this will be much the same as the original data source that we've added to the repeating group only this time we'll be adding one more constraint to match the value of this drop-down so we'll go ahead and select the data type to be a job we'll add in both the existing constraints that we had already so it'll be that the complete status equals no the job title or the role title contains i'll scroll down to the last option which is get data from page url and the parameter was job title close that and then i will also need to select from the location so when the location is within 10 kilometers i'll then go and get more data from the page url the parameter in this case will be a location and now we'll go ahead and add an additional constraint for our drop down element here so we'll select that the job type will need to equal the same value as the drop down element here now this will help us refine the total searches by the roll type which means that we'll also need to add another option to cater for our salary input so once again we'll need to go and define another new condition and the trigger for this will be when the input salary its value is not empty and then once again we'll be updating the data source of our repeating group we will do a search for will be displaying a job again and of course we'll be adding in the same constraints as before so when the complete status equals no when the role title contains the same value from our url parameter which is our job title and then when the location is within 10 kilometers of and then i will scroll down to get data from page url and the parameter for location was location and now the additional constraint here is when the salary and then i will choose from the equals or is greater than the input salaries value so let's say there's two roles on our job board here one has a salary of 50k the other has a salary of 60k and a user is searching for a minimum salary 55k it will now remove the 50k job roll and only display the 60k roll and because we're using that is equal to and greater than convention if the user was also to include a salary of 60k that 60k job would also still display now we've gone ahead and added in two conditions here to match the individual inputs of our drop down menu and our input field what we will need to do though is create a third condition that registers when both of these input fields aren't empty so we'll head into our conditions we'll define a new condition and we'll start by selecting from the drop down so when its value is not empty and then we'll select the and option and we'll be selecting from the input salaries value when it is not empty so now you can see this condition will only trigger when both of these input fields aren't empty and then once again i'm going to need to update the data source of this repeating group now i will do a search for i'll search for jobs i'll start by adding in those constraints again so when the complete status equals no when the role title contains i'll scroll down to the get data from page url option the page parameter is called job title i'll grab the location again when the location is within 10 kilometers of get data from page url the parameter name is location then i'll add in both constraints for both of these input fields so we'll start with the drop down option so it'll be when the job type equals the value of the drop down roll type and then the salary of the roll should be equal to or greater than the input of the salary field here and just like that now it has catered for every single scenario here with our input fields and if you would like to go ahead and add in any additional filters yourself you'll just need to define a new condition within our repeating group to cater for that option so now i'm just going to go ahead and grab the group and the repeating group i'll move those up just so they're not so far down and now i'll go ahead and test out what this whole experience looks like within our development environment so back on my homepage i'm going to search for a role i'll search for a social media role within san francisco i'll go ahead and punch in that query now over on our search results page we can see that existing role i created before under door dash let's say i'm interested in viewing that i'll select the view button and now the group will display it'll include the profile photo all the information i need about the salary and also the job description and then i can also go ahead and refine the type of role i'm looking for if i'd like so this role itself is listed as a full-time role but let's say i want to only find part-time roles you'll see that that then disappears from our repeating group if i update that to be full time again it will display once again and then if i update the salary here this salary is listed as sixty thousand dollars so if i was to update the salary to be sixty thousand dollars you'll see that it is equal to that salary so it still displays but if i was to go and add one more dollar to that you'll see that it no longer displays there and just like that we've finished building out our search results page which includes the ability to add some additional features that users can refine their job search by and then also an option to display the role in full detail in a hidden group 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,777

Keywords: bubble, no-code, bubble.io, visual programming, minimum viable product, webflow, job board, no-code tutorial, bubble no-code, airtable, adalo, coda, udemy, makerpad, zeroqode, airdev

Id: JmGkrCEMKPE

Length: 60min 14sec (3614 seconds)

Published: Fri Feb 19 2021