Forum Academy Marketplace Showcase Pricing Features

[search engine] How to receive dropdown and radio buttons values as an URL parameter?

Hi!

On one page I have criterias my user fills (inputs, dropdowns, radio buttons, checkboxes), then a Search button brings to the search results page, with filters getting the values previously entered.

I managed to send the value of inputs and multidropdowns as an URL parameter and make them appear on my receiving pages, but can’t make it for dropdowns, radiobuttons and checkboxes.

My problem is very similar to this (locked) post, but I don’t get it, some things are a bit different from my problem and Emmanuel said a whole new feature makes things easier, but I don’t know how to use it.

Stuff that are different from this post:

  1. my values for dropdowns and radio are static, it’s not something I put (yet!) in a table.
  2. I don’t know how he got this button that I circled, even if I enter dynamic data this thing doesn’t appear. Did Bubble evolved since January regarding this?

Emmanuel said:

We just added a way to pick a type for a URL parameter, which is much more powerful. If it’s a thing you can even put an ID there and it’ll fetch the database entry.

Not sure what to do with that.

So for now, to send data, I feel confident with that:

But to receive, I don’t know what do to. I feel we have to use dynamic data but if possible I’d like to keep static options.
I guess dropdowns, radio buttons and checkboxes will have the same logic.
Any help would be greatly appreciated!

Hey @Lych :slight_smile: Can you share a link to your app? That will give a better idea of what would be most useful to setup.

In the first screenshot where you circled “Modify list of [Data Type]s”, this will appear after you select “Dynamic Choices” and click to “Define” the type of choices. After you define the type of choices, the text changes to “Modify”.

The change in making parameters more powerful is that you can now define the type of content for a parameter. For example, if you had an app where Users would browse through different apartments in the Search Box engine, and you prefer to send a specific Apartment to the next page as a parameter (instead of saving it on the User temporarily), you could set up the searchbox in this way:

And then when either Next is clicked or the Search’s value is changed, the parameter (“a”, though this could be anything you prefer) is sent to the next page (apartment page):

On the apartment page, I have a group which displays the Apartment associated with the “a” parameter (which is sent as the Apartment’s unique ID from the index page):

In this group, Bubble will see the unique ID of the Apartment sent from the index page, and then use that as the single, data source of the Apartment group on the apartmentpage. This comes in handy when you have multiple ‘Things’ that you’d like to send to a different page through parameters, or if you’re trying to set up a search page where Users can filter the results that are sent as parameters.

If you use static values for the dropdowns, radio buttons or checkboxes - you wouldn’t really use the above method to change the type of content, since you’re sending static text from one page, and then retrieving it as static text on the next page.

If you have radio buttons which allow a User to select a static time of day for example:

Then you can send that as text to a different page:

On the classes page, you could then perform a search for classes whose time was the selected value sent as a parameter:

(this is what it looks like when clicking ‘Get t from page URL’)

And that should do it for static text! If you have any questions or if I can clarify anything please feel free to let me know. :slight_smile:

Many many thanks Faye.

Sorry, I can’t share a link to the app because it’s not live! (and not in English).

It’s my fault I was not clear enough but I had no problem sending the data to the repeating group, what I can’t manage to do is to send the parameters to the search filters that I have on the side of the search results. Here is a quick mockup to illustrate:

If I keep your example, on the first page we have radio buttons for choosing the period of the day, and I want to have these same options in my filters section, so that it refines the results.

This is the logic I had in mind:
I send the data from page 1 to the filters on page 2, and it’s those filters that define what appear in the repeating group. In your example, the data is sent from page 1 to the repeating group directly on page 2.

This should help, sorry for being unclear, but I actually didn’t realize we could send the data to the repeating group directly as I always wanted those filters.

Just realized you may have not seen my answer sunday @fayewatson as I didn’t mention you, but if it was the case, no hurry, I can wait :slight_smile:

Hey @Lych! I definitely missed your post, thanks for letting me know :slight_smile:

In my example, the t parameter is sent to page 2 which is used to filter the repeating group on page load - but as that parameter value changes, the repeating group will also change. So the User can continue to filter the results on page 2, and have the repeating group update based on the parameter change.

For example, if a User had selected ‘Morning’ on Page 1, but then switched to ‘Afternoon’ while on Page 2, you would use the action:

“When Period of Day is changed”
Data --> Go to Page: Page 2 (staying on the same page)
Parameter: t = Afternoon

Then the repeating group would show all of the classes with the Afternoon times immediately. Since you have two other filters for MultiDown Box and Dropdown Box, those dropdowns would each have separate parameters (so you could have a, b, t) for example, or any letters you prefer to represent the parameters in the URL.

Is this closer to what you had in mind to set up? :slight_smile:

I got the logic, that’s really smart! (and quite simple in the end ;))
I don’t have time to test it and implement it but I’ll do it within 48h and let you know. That should work indeed, many thanks @fayewatson!

I realize there are different ways to achieve same things, we really have to be creative to find different options!

1 Like

Hi again @fayewatson
I dug into it, I thought we covered everything and it was going to work, but I now realize that my search filters on page 2 are then empty by default, it’s a problem.
The radio buttons on page 2 would need to be also with the value from page 1, is that possible?
With your system, I now can adjust the results from page 2 directly, and that’s great, but if the user sees no preselect value, he could thought we did not register his choice for our search results, and it’s even more a problem for inputs where people can enter a list of activities in my case, they would have to reinter them before adjusting.
////SELF REVELATION\\
Jut by writing this, I found the way to do it! The radio buttons can have as a default value “Get data from url” and I give him the parameter in the url to retrieve the data.

So I guess in the end I have two options, either from page 1 I send data with this method to the repeating group directly, or to the filters directly, which themselves are the source of the repeating group.
The 2 options as I see them:


I’ll try both, that will teach me :wink:

1 Like

Meh, not sure my first idea was doable. If so, yours is better because urls have the parameters, it means you can send the url to someone to have the same results, that’s pretty convenient.
I experimented and I managed to have the whole process working for the first time!
Many thanks!
It just works for one of the filters, but that should work the same way for others.
Let’s work!

1 Like

Hey @Lych! First and foremost, best Self-Revelation meme, ever. :smile: You’re super close and on the right track with setting the default value for the dropdowns and the radio buttons as their corresponding parameter values! Couple of ways to set this up!

The simple method is to set the filters default values from their corresponding parameters, and then filter the repeating group based on the filters values (not the parameter). The main downside is that Users can’t hit the back button to go back to previous search queries; hitting back will take them back to page 1, even after adjusting the filters a few times.

Alternatively, you can have the filters adjust the URL parameters directly; this enables the User to hit the back button and go back to their most recent search. So if a User had a $100 budget and then increased this to $200, then hit back - they would go back to page 2 showing the $100 budget results - instead of being taken back to page 1.

For the budget filter dropdown, you can do this by setting up a workflow such as:
“When an Input’s value is changed [Dropdown Budget]” --> Go to page: Page 2 (this will not reload the entire page, it will only adjust the parameters)
Then send the current parameters:
budget = This dropdown’s value.
[parameter2] = [parameter2dropdown’svalue]
[parameter3] = [parameter3radiobutton’svalue]

Then the repeating group constraints would be only in the format of “field = get data from page URL”, not the filters’ values. The only tricky thing is if your filters aren’t mandatory. Then (I think!) you would need to create conditional ‘Go to Page’ actions which send only the parameters that aren’t empty. This was my experience when setting this up previously, so may be best to start with two parameters and test what works.

I know this probably is really confusing at first, but let me know if you have any questions! Can also PM me a link to the dev version of app and I can try to help with the workflows incase they’re giving you any trouble!

Interesting, thanks @fayewatson.
So I chose option 2 (“have the filters adjust the URL parameters directly”).
I also realized I needed to do what you described here:

budget = This dropdown’s value.
[parameter2] = [parameter2dropdown’svalue]
[parameter3] = [parameter3radiobutton’svalue]

But I didn’t realize this:

The only tricky thing is if your filters aren’t mandatory. Then (I think!) you would need to create conditional ‘Go to Page’ actions which send only the parameters that aren’t empty.

In my case, none of the filters are mandatory so it’s indeed a problem. Can you detail a bit more the conditional part? I never used it yet.

My app is not deployed yet, can I share it? You mean the link like https://appname.bubbleapps.io/version-test/ would be enough?

Another problem I have is setting the default value for some of my filters. As I said, it works for some (radio, inputs, dropdowns) but I’m stuck with my multidropdowns and checkboxes:
Here is how I defined my multidropdown:

Apparently, it’s invalid:

And for the checkbox, here is what I did:

On page 1, the culture parameter I send is set like this:

or like this:

I tried both, but none works, not sure I use the checkbox properly :confused:
These filters are not yet considered in the repeating group for the results, but I guess it works the same, we’ll fix both pb at the same time.

Still complex! We’ll find a way I hope.

1 Like

Sure thing! Happy to set up a few of the workflows and do a step-by-step. Is your app called appname? If so, I think it may still be set to private. If you go to Settings --> Application Rights: Everyone can edit, that should allow me to access the editor. :slight_smile:

1 Like