How do I use the Page-level URL Search or Hash Parameters

[audreyanne96]

Goal:

• I am trying to use URL Search or Hash Parameters in a page to dictate the value in a Select component.
• Essentially, by going to a custom URL like https://sample.retool.com/app/dashboard/overview?#search=customer_id the app will show the data for the customer associated with that customer_id.

Steps / Details:

• We were able to do this in another app using the legacy single-page app. We want to replicate the same behavior in a multi-page app.
• The old settings were like this:
  
  
• Now the same settings at page level look to be different and I don't know how to use it.
  
  
• When I try to access {{ url.hashParams.search }} it's always just an empty string. Not sure what I'm missing here.
• Not sure the difference between search and hash parameters either, but so long as this behavior is replicated, happy to use either one.

Could anyone help me replicate the same behavior in a multi-page app?

[Isabella_Borkovic]

The behavior of multi-page apps is a little different—you use the page-level url/search params to configure the URL, but you would use {{ url.hashParams }} and {{ url.queryParams }} to read in the URL. These will only be populated if you navigate to the page with url params/hash params!

If you navigate to yourappLink.com/app/appName/yourPage#search=hello, is {{ url.hashParams }} still null?

[lindakwoo]

@Isabella_Borkovic,
I have been playing around with this and there seems to be a bug in the params. When you add search or hash params to one page and then run a query to return {{url.hashParams}} or {{ url.searchParams}}, it runs just fine. But as soon as you go to another page and add hash or search params to THAT page, when you return back to the original page, and run the same queries, the return values are empty. (but the parameters are still showing in the UI)

[audreyanne96]

Hi Isabella -

I just tested again today, it didn't have the same behavior as before. So I assume this is being worked on or something changed when I published.

• It now does show the value on from {{ url.hashParams.search }} as seen below.
  
  
• However, the value doesn't persist in the url sometimes? I type the first one below but then it changes to the second one. Ideally, we would like to keep this value in the url. Not sure how to do that.
  https://company.retool.com/app/appName/overview#search=f86cd695-ac9e-4250-a4f8-66093329b472
https://company.retool.com/app/appName/overview#search=
• It still returns the value in {{url.hashParams.search}} despite the above behavior so not critical for our use case, but quite unusual.
• Current setting for this behavior is below:
  
  
  
  
  

Thanks for the help tho!

[Isabella_Borkovic]

Ah I see, I think if you set the URL search param in the page settings then it will populate the url with that value.

try deleting that URL search param and seeing if the issue still persists!