Get Parameter Data from URL - Search Box & Dropdown

[mikescullion]

Can I get parameter data from a URL and display it in Dropdowns, Search Boxes and Date/Time Pickers?

I have learned how to do it with a standard text Input (which works perfectly), but there doesn’t appear to be an option for “Initial Content” in the above properties.

I have tried setting the expression “Get ‘parameter name’ from page URL” in the Default Value, but with no joy. I keep getting asked for further :types but none appear to be suitable. I did see “value’s typed…” somewhere, so I am hoping I might be on the right track?

What it is I am trying to achieve -
My index pages contains three types of Input Forms (x1 dropdown, x2 search boxes and x1 date picker), which the users uses to search data in my app. Once the inputs are completed with the user’s choices, they are then directed to my search-results page (which displays the same searchable input forms in the header above, with hopefully - the pulled parameter data from the URL). The relevant information which the user is searching for, will then be displayed in the repeating group below.

The search boxes and dropdown are set at Dynamic Choices, which pulls information stored in my App Data - should that be the cause, which is preventing me from achieving this?

If understood, some might find this long winded, but it’s purely for UI and design purposes.

I am going to try and see if I can do something with the workflow to make this work, but if anyone feels I am wasting my time with this, please feel free to stop me, haha.

Many thanks,

Mike.

[mishav]

The parameter from the URL is always of type text, so when using it with controls, often it is used as part of an expression which returns an appropriate data type.

For your searchbox example, the default value needs to be an instance of UK-Town/Citys, for example returning the first item of a search, and the URL parameter can go into the search constraints.

[mikescullion]

That’s great. Thank you so much @mishav I didn’t know I could use the URL parameter in a new constraint. It’s working perfectly now. Not so much with the Date Picker. I don’t know what’s going on there but I will give it a crack.

Thanks again.

Mike

[JP29]

@mishav How does this work for drop downs? If there is a drop down on the index page whose selected value you want to pass to the results page, how can you do this by using “Get Parameter Data from URL?” especially if the drop down is not formatted? Is it possible at all or would some other workflow need to be used?

[mishav]

@JP29

If there is a drop down on the index page whose selected value you want to pass to the results page … especially if the drop down is not formatted

The dropdown’s type is either defined, or it figures it out from the static choices. If I enter just numbers, the type will be number. Add in an apple, and the type will be text.

The workflow action go to page can send parameters, it should be happy with a dropdown’s value if its of type text or number, or any type that “can be printable as text”.

How do you want to use it on the results page?

[JP29]

@mishav I am essentially trying to pass the selection of a Price from a drop down on the index page to be the “default value” of the Price drop down on the results page. The results page has a repeating group that is being filtered by various parameters, including the selected Price from the drop down. The part I can’t seem to get is passing the selected drop down Price from the index page to be the default value of the drop down Price on the results page once a submit button is clicked and the user is re-directed to the results page.

Also I formatted my drop down list as a dynamic list versus static list, does that matter? I originally tried a static list but wanted a “$” to indicate price. When I did that the repeating group on the results page could not filter out the price parameter because the repeating group (i.e. my database) type for Price is a number and the drop down type with a “$” typed in was being formatted as text.

I’ve included screenshots in case this is confusing:

Index Page Min. Price Drop Down:

URL Parameter Being Sent:

Results Page Min. Price Drop Down:

Thanks for your help!

[mikescullion]

If I’ve understood you right, have a look at my response to @mishav 's solution. Seems like I was having the same difficulty.

You can use “Get Data from URL” in a new constraint. See the attached screenshot of my dropdown that gets value from the URL…

@mishav 's solution explains the working behind it.

[JP29]

Hey @mikescullion thanks for sending the screenshots! I’m trying to do the same thing you have done, but I’m still having an issue using “Get from page URL.” I’m wondering if there is an issue with mine because it is a drop down versus a search field? Or something with the data type. I got it to work with a search field fine, but the drop down is what’s causing problems. Below is a screenshot of what happens when I try to create a constraint. I’m also getting an error that the value is a text right now instead of number - not sure how since it’s entered as a number data type and I have selected “number” for the type of choices.

[mishav]

@JP29 To convert the text Get min from page URL into a number for the search constraint, there is no function provided by Bubble. Current workarounds are:

1. Using an input field as a converter:
   Setting a state (as number, not text) from a URL parameter
   or
   Generate random string only text type

2. Send the text out through an API to math.js and receive it back as a number. Downside is a delay waiting for the result, not great when populating a default value.

For your default value, you don’t need to convert the URL parameter to number, if you instead convert the Price field to a text for the constraint. This can be done by moving the constraint out from the search and into a filter on the search:

Search for Price Lists:filter:first item's Price

And in the filter: Advanced: This Price List's Price:formatted as 1029 is get min from page URL

One downside to this is if the price list has a large number of rows, a filter constraint is slower than a search constraint.

It is worth considering what you want the default to be, if the URL parameter is empty, or if it doesn’t match any of the prices. Enhancing the filter can help there too.

[mishav]

Hi @emmanuel, a function to convert text into number format has been needed for a long time, would it be possible to add it?

[JP29]

@mishav Thanks for the response! I took a look at the first bubble forum link and it looks like the user who posted the question got the “Get from page URL” to work - it just shows up in red indicating an error. I tried that and also changed my key in my workflow to be formatted as just a number versus currency which it was formatted as before, and it worked. I’m wondering if doing it this way could be “unstable” as the user indicated in the post?

Alternatively, if I use the input method where I create an input box and pass the input over and convert it to a number from the URL - that results in an awkward box on my page, right? I was thinking I could just make it all white and blend it in with the background, but still, the idea of a hidden box on the page seemed a little awkward to me.

Either way, thanks for the help!

[mishav]

@JP29

I’m wondering if doing it this way could be “unstable”

That is a good question. Having the error checker show an error for functionality that works, is either a bug with the checker, or a bug with the functionality. So when the bug is fixed, you either have no more error, or you have a broken app.

@JP29

input method … results in an awkward box on my page

You’ll see this kind of workaround for a lot of things. To hide something while keeping the “visible” setting on, some useful settings:

• Clickable off, to prevent tabbing the cursor into it.
• Width and height set to 1 (not sure if zero works).
• Place it underneath another element

What do you think of the third option, using a filter?

[JP29]

@mishav Ya I think I will report it. I just realized that if it isn’t resolved or still shows up as an “issue to fix” then I can’t deploy my app, right?

As for the third option, I haven’t used an API yet. How would sending the text through an API work? I added the Bubble API Connector from plugins and enabled POST/Workflow under API in my settings. When I go to workflow to schedule an API workflow though, I’m not seeing any options to send out the selected Price value.

The other issue with the third option is the delayed wait time, but I might consider it compared to the input box depending on how slow it is.

[mishav]

Recapping the options:

1. Convert to number using input box;
2. Convert to number using API call;
3. Use filter constraints (not converting to number).

In my opinion, using a filter is the best option, and a lot less messing around than either of the other two options.

@JP29

API Connector from plugins

This is for initiating a connection to an external server’s API from your Bubble app. I won’t go into detail as I don’t think it’s the best option for your issue, I mentioned it so you’re aware of the possibilities.

@JP29

enabled POST/Workflow under API

This is for initiating a connection from another server to your Bubble app. Not really relevant for this issue.

I hope this helps some.

[JP29]

Hey @mishav, I misunderstood the filtered portion the first time around as being part of the API workflow. Whoops! I think I will try the filtered option, the only trouble I am having is finding the Advanced filter option to format the price as ".

Should I be seeing “This Price List’s Price” specifically? The closest option I could find was “This number.” The way I have it set up right now is not working so not sure if I went rogue somewhere.

Thanks for the help!

[mishav]

You’re very close to it … when you “Add a new constraint”, instead of choosing a field, scroll down and choose “Advanced …”.

Apologies for not being clearer : )

[emmanuel]

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.

[JP29]

Thanks @emmanuel + @mishav! Switched the default value back to “Get from URL” and selected number as the type for the URL parameter. Everything works great now without the highlighted error!

[mishav]

Thanks @emmanuel, nice to not have to use hacky workarounds here now.

@emmanuel

If it’s a thing you can even put an ID there and it’ll fetch the database entry.

Fetching a thing works nicely, even if there is no match. It does have an error on first page load if the parameter is missing:

Error evaluating property text of Text J: Sorry, we ran into a temporary bug and can't complete your request. We'll fix it as soon as we can; please try again in a bit! Uncaught TypeError: Cannot read property 'indexOf' of undefined at t.Y.DB.e.get

[mikescullion]

That’s brilliant. Not tried it out yet, but going to be so much easier, especially with date.