How to Use URL/Page Parameters in Bubble.io

so back on my home page i'm going to select that i'd like to search for concerts on the 20th of november and set the target city to be san francisco i will perform that search and that workflow will run once again only this time on my search results page you can now see that my heading here is extracting both the location and then the date parameter from my url string [Music] hello my name is lachlan kirkwood and today i'll be teaching you everything you need to know about using page parameters within bubble when i first started using bubble it took me a little bit to actually understand when and how i should be using page parameters within an application and then once i actually understood the concept of page parameters it completely changed the way that i build in bubble if you're relatively new to bubble you're more than likely to understand that it's possible to send data to pages that have a content type so a good example is if you have a user profile page in your application that has a user content type on that page you can send the data of a user through to that page and then choose to display it but what happens if you'd like to send some additional data from an origin page that doesn't match the user property type you wouldn't actually be able to send that across as a data type page parameters essentially allow you to store any data within a url string in your application which you can then retrieve that data on the destination page and display that on the page itself one of my favorite use cases for using page parameters is creating a search experience that redirects a user through to a search results page because throughout the original search page i normally tend to send multiple different data types so things like dates addresses or even text fields and that's all data that i can store in my url and then extract and display on my search results page and i just find the easiest way to explain this is by showing you some examples so let's jump over into a bubble editor i have and i'll explain everything you need to know in as much detail as possible now over in my bubble editor one of the easiest ways to teach you about page parameters within bubble is to just show you one of the most common use cases that i find i tend to use page parameters for myself and that is in creating a custom search experience between a home page and then a search results page so in my example today i'm just going to be showing you how i can search for concerts in my database and then on a search results page which i have created here i'd like to display a list of relevant results pulling through the data that i've sent through my page parameters and now in order to start this process i'm going to need to head to my home page and on this page i just like to point out that i'm searching for concerts based on two particular input fields here i have a standard date time picker and then just a search menu and this is just set to be a list of geographical places just so i can search for cities and then i should also just point out that in my database here i have a data type called concert and within this i just have some data fields such as the band's name the city that they're performing the date as well as the image and the price for that concept and now if i head over to my design tab once again i'd obviously like to create a new workflow every single time our search button is clicked here and within that workflow i'm going to be adding page parameters to send through the value of both of our unique input fields so i'm going to scroll on down and choose to start a workflow and within this workflow because i'm sending a user between two pages i'm going to be selecting from our navigation event which i'm sure you're already familiar with so i'm going to select the go to page option and have the destination page be my search results page and now one thing i should just point out is that i don't have a type of content set on the search results page meaning i won't be sending data through to that page in the traditional sense and of course even if i did have a type of content set on that page i'd only be able to send it through one particular data value so let's say for instance on the search results page i had a content format set as let's say user i could obviously then send through the value of something like the current user and so instead of sending through just a single data type i'm going to instead choose to send through page parameters which just allows me to send through as many different types of data as i would like through a url string and the way i can do this is by ticking the box here to send more parameters to the page and then this is going to give me the option to add in my own custom parameters that i would like and in this case today i'm going to want to send through first of all the date that a user would like to search for a concert as well as the location of where they'd like to visit a concert so in my workflow tab here i'm gonna need to first identify the names of the parameters and within bubble these are just called parameter keys so this is just the naming convention for each individual bit of data i'll be sending through and as i mentioned the first parameter will be called the date and once i've given a name to this parameter i can choose what data i would like to send through with it and in this case i want this to be the value of my date time picker on the page so i'm going to select that the date will be the value of our date time picker i'm going to choose that and select from its value and then while i'm here i'd also just like to send through an additional page parameter which is of course our location so i'm going to choose to add another page parameter and i'll be calling this one location and one thing i should point out is that you may have noticed that i personally haven't added any capitalized letters within my page parameters name and i'll be pointing out exactly why i didn't do that in a moment but that's just something i'd like to have you pay attention to in the time being but for now i'm just going to need to choose what data i'd like to send through in my location parameter key here so the data i'll be sending through is the value of my search box location its value and that's the only two page parameters i would like to send through of course if you'd ever like to send through any more data you can add as many page parameters as you would like but before i show you how we can actually extract the data we're sending through in the url on our search results page i just want to show you what our url string will now look like when we're adding in our page parameters so if i'm to open up our design tab and just preview our application i can now select to add in whatever date value i would like so let's say i want to go to a concert on a saturday night and i want the location to be san francisco i can then choose to perform that search and that workflow will run sending us through to our search results page and now at this point i haven't added anything on this page to extract the data we've sent through but one thing i do just want to note is how the page parameters have formatted within our url string and so within our url string here the first thing you'll notice is that it's quite a long string and you'll see a number of different characters more often than not separated by percentage symbols and these are essentially our page parameters so the first thing you'll see is that my date page parameter has been added and that's the name that i gave that parameter key and the value of that parameter is going to be the value i had selected within our date time picker and then next to that you'll see that it has added in our location parameter key and the value of that has been set to san francisco as the city and now because we've sent through this data in our url we need to create a way to extract that information and then filter a list of search results by the data that was sent through to this page and that's actually a fairly straightforward process so i'm just going to jump back into my bubble editor here and then we're going to open up our search results page within our application and now on this page i just have a title here and a repeating group and within this repeating group i've just set the type of content to be a concert but i haven't yet added a data source because i want to show you how to do that in more detail but first what i'd like to do is customize the title that's displayed on this page so at the moment this is just a static heading that just says concerts in what i'd like to do is display the city after that title so in my example before it would say concerts in san francisco and then i'd like to display the date that the user is searching for so it'll say on this particular date and now in order to pull that information from my url parameter i'm just going to need to insert dynamic data and then if i scroll right on down to the bottom of the list you'll see an option here to get data from a page url and by default this is going to be set to be a page parameter and now in order to extract the city name of the page parameter that was sent through i just need to reference which particular parameter key i would like to pull from a url and if you remember in our original workflow on our home page here i had set the location of the city the parameter name to be called location so i'm going to need to copy this exact same value and set that as the parameter key i'd like to extract so if i just jump back over to my search results page open up my design tab and then just open up my text i can choose to open up the page parameter i'm extracting and set the parameter to be the location parameter and now one thing i'd like to point out is that this parameter was in fact a geographic address so the type of parameter that you choose would just be based on the type of data you're sending through if you're sending through for example just someone's name you could send through just some text if you'd like to send through the unique id of a user you could choose to extract a user from the url but in my case today i'm going to extract the location parameter which was a geographic address and now it's at this point that i just like to point out why i had in fact left all of the parameter keys in lowercase text so i tend to see a lot of people who will add the parameter in lowercase letters on their home page when they're actually sending the data through in a workflow but then on their search results page they'll often add a capital l for the location and then they'll find that they're unable to pull data through from this page and that's because the actual perimeter name is now different to the one that we'd set on our home page this is location with a capital l whereas in fact it was a lowercase l and just to help better manage these across our whole application i just like to keep my parameters in lowercase across any instance that i use them but that's all i'll need to do in terms of extracting that parameter because i have pulled through the value of an address though i would like to select the more option because i just like to extract from the address the value of the city and this will only be applicable if you are in fact sending through the value of a city as an address so instead of displaying things like the actual postcode of that city i just want to extract the city name i'll then choose to close that and so now this heading should display the text concerts in san francisco if that's the city i'm searching for and then i'm going to type in the words on and now i'd like to extract the date that was sent through in our page parameter so i'm going to insert dynamic data i'll score right down to the bottom and choose to get data from my page url once again and the parameter name was of course our date and the type of content will be a date as well and then i just like to make sure i format this date correctly so i'm just going to choose the formatted as option and i'll just leave this as the option that it currently is and that's how we can now customize the title that's displayed on our page the last thing we'll need to do is just update the data source of our repeating group here to only display concerts within our database that are first of all within the target location of a user search query as well as of course the dates that they're looking for so for my type of content i'm of course searching through all my concepts for the data source i'm going to perform a search in my database for all of the concerts and then i can start adding in some constraints to match my page parameters so i'm going to only display the concerts where the city so this is the address that was stored on the concert when it was created in my database when it is within i'm just going to type in a random number here i'm going to say when it's within 50 kilometers of and now i want the target address to be the location that was sent through in my page parameter so once again i'm going to scroll right down to the bottom and choose the get data from page url option and now i'll be extracting my location parameter again and this of course was a geographic address i can choose to close that and you'll see that constraint will now validate and then i can add in a final constraint which only displays concerts where the date is on the same date that the user is searching for so when the date of this content in our database equals the same value as and then i'm going to scroll right down to the bottom and choose the get data from page url option again and this parameter was our date and the type of content is of course a date as well i can then close that and that is all i will need to configure in terms of this data source within my repeating group i'm just displaying the image as well as the name of the band and some additional information but let's jump on over into our preview of the application so i can show you how this whole end to end experience functions so back on my home page i'm going to select that i'd like to search for concerts on the 20th of november and set the target city to be san francisco i will perform that search and that workflow will run once again only this time on my search results page you can now see that my heading here is extracting both the location and then the date parameter from my url string and then within my repeating group below it's displaying a list of all of the concerts and bands that are playing on this particular date from which a user could then choose to buy tickets one thing i would just like to show you though is if i jump back to my home page and if i was to choose to search for concerts on the following day in the same city so i'll just say san francisco again i've just added a separate entry within my database just to show you how the repeating group can update accordingly based on the data that's sent through our page parameters and just like that you can see how easy it is to actually implement the page parameters feature within your application i think once you unlock the ability to use page parameters it'll completely change the way you approach building your application in bubble and that's all from me today of course if you'd like to see any other bubble tutorials i'd recommend hitting the subscribe button below to stay in touch with any other guides and tutorials i release in the future [Music] you

Channel: Building With Bubble

Views: 96

Keywords: bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, Adalo, Zapier, Webflow, no-code tools, app development, MVP, minimum viable product, Bubble no-code, software development, Airdev, Zeroqode, Bubble URL parameters, Bubble page parameters, Bubble.io data

Id: h_4NyN7oIdI

Length: 16min 51sec (1011 seconds)

Published: Wed Dec 15 2021