Section 3 (Lesson 3/8): URL parameters let us navigate quickly between our various views, allowing us to pass information directly through the browser's URL using a key-value pair structure.

This lesson covers everything you need to know about utilizing URL parameters including:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

A URL parameter is a piece of information that you place in your browser's URL, and it follows a key-value pair structure and can hold many types of data. Your Bubble app can insert the data into the URL as well as read these parameters and use that information for different purposes. An example of this you already know: ?debug_mode=true. This instructs Bubble to show the debugger bar on the page. What we're going to do in this lesson for URL parameters is instruct Bubble which button should be active and which group should show in the instance of an active button. Should it be Group Settings, Overview, Job Posts, or Candidates? Let's dive in.

So here's an example from the demo app. So let's have a look at the URL. We can see "company," which is the page name, "/orbit," which is the company name, and then "?v=settings." And there is your key-value pair. Anything after a question mark relates to a parameter, and whichever app you're using today, you'll see a lot of parameters in the URL, which is instructing data to be read or sent, and different types of groups to be seen or hidden.

With "v=settings," we're showing this group on the right-hand side. We're also changing the background color of the Settings Group Navlink. If I change to Candidates, back in the URL bar, we now have "v=candidates." Same with Job posts and Overview. Let's head into our Editor.

First of all, I just want to make a quick change and update "Jobs" to "Job Posts." Okay. So we're going to do the following. Please first click on Group Navlink (Overview). Now we're going to click to add a workflow, and then it says, "Click here to add an action..." Let's head down to Navigation and choose "Go to page..."

Now, in order to change parameters in the URL, this is the action we have to use, "Go to page..." It sounds a little bit misleading, but it does give us the opportunity to just go to the same page and update our URL parameters.

We're going to click on the dropdown and choose the company page that we're on as the destination. And then we have this option at the bottom which says "Send more parameters to the page." So we're going to check that box, and now we need to add the parameters. So we clicked on Overview, so I'm going to add another parameter. Now it needs a key, and the key is basically just the value 'v' that you saw earlier in the URL, that is just something I've set myself. It doesn't matter what it is, but I like to make it short and to the point. V is short for view. So that's why I've named that my key. 'v', and then it's asking for the value. So 'v' equals what when we click on Overview? Well we know it's going to be equal overview. Let me type this in all lowercase, because it is case sensitive, and when you start mixing cases, we can start to make mistakes. Okay.

Now that I've done that, I'm going to actually right-click and copy step one. And then I'm going to do the same for Group Navlink (Jobs), add a workflow, and I'm going to simply right-click and paste. And just change the value this time to "job-posts." You see how I've added a hyphen in there, job-posts, all lowercase.

Back in the Design tab, let's do this again. Candidates, add a workflow, right-click, paste, and type "candidates," all lowercase. Let's do the last one. Settings, add a workflow, paste it in, and change it to "settings." Okay.

And it's at this stage that I'd like you to preview the page. I've gone ahead and also removed ?debug_mode=true. Just going to enable my URL bar at the top, there it is. So currently we have /company. We're going to leave out the configuration of sending company data down to this page in this lesson and just focus on this navigation.

Go ahead and click on Overview. Now you should see v=overview. Same with job-posts, candidates, and settings. All very well. But we want to give feedback to the user that this has been clicked. Your user doesn't know anything about parameters, nor should they, but they do need some feedback. So let's use a conditional statement to actually change the color of the Group Navlink. So we want a white background here when it's clicked.

So let's head over to Group Navlink (Overview), bring up your Property Editor, and then click on Conditional statements. (And we've already touched Conditional statements when it came to the sign-up page for selecting a Company or a Candidate.) I wanted to do something similar here. I wanted to define another condition. I'm going to click the 'when' dropdown, and now I'm going to type the word "get," get. Because I want to go get a page URL. And at the bottom, "Get data from page URL." We'll be using this across the app for dashboard navigation. So the parameter name we know, we called it 'v', didn't we? Just the letter 'v'. And that is just type text. So when that is true, because this statement... Sorry, we need to finish it. "When Get v from page URL is," and then I'm going to type with my keyboard, "overview." When that is the case, this should turn blue because the statement has been resolved. So when this is true, let's change the background color. So c-o-l, background color. So let's change it from surface to our white color, the primary contrast. Why don't we also add some borders here? Going to choose border style or borders. Going to choose solid, and then I'm going to just add the border color, so c-o-l, border color, and I'm going to choose, obviously, my border color.

Let's see what that looks like. Let's refresh the page. Yeah, really, really nice. I really like that. So if I click away to Job Posts, because the parameter now says job-posts, this isn't highlighted. So now you know what's going on when you use the apps in your day-to-day life. Have a look at the parameter in the URL. You'll see stuff changing.

Okay, now we're going to save ourselves some time with all of this stuff here. And we're going to click on Group Navlink (Overview), right-click, copy special, copy conditional expressions. And then we're going to highlight all three beneath it, all of the groups, not the elements inside, but the Group Navlinks, right-click, paste special, paste conditional expressions. Now we're highlighting Job Posts. Okay, so let's go back to Job Posts, and we just need to change the word 'overview' to 'job-posts'. Let's do the same in the one below. From 'overview' to 'candidates' (and from 'overview' to 'settings'). Job Posts didn't actually take. I need to make sure of that. There we go. We always want to see it turn to blue.

Head back to the frontend once you've done that. Yeah, look at that. Super professional. Looking really, really good. Okay, folks. So that's an introduction to URL parameters. We can do a lot more with URL parameters. We can have multiple URL parameters. Some of it can pull data or send data to the server. Super powerful, and we'll continue building on this idea in the later lessons, but for now, I'll see you in the next one.