URL Search Params not showing up in the URL

  • Goal: Ensure URL search parameters are properly displayed in the browser's address bar when navigating between pages in a Retool app, allowing for deep linking and maintaining filter states.

  • Details:
    I have a multi-page app with the following pages:

  • Home
  • Organizations
  • Organization Details
  • Connections
  • Connectinon Details
  • and others ...

Lets focus on the connection and connection details pages. The connection details page takes in a connectionId as a URL Search Param. When I click on a row in the Connections page, I open up the Connection Details page with the connectionId being passed in.

The issue I am facing is that the actual connection ID is not showing in the URL itself.

However, I can see it in the URL preview section of the inspector, and I can properly access and use the connectionId via url.searchParams.connectionId

I have similar issues across other pages (org and org detail) where the url does not actually contain the search params but I am able to access it in my app.

This causes two big issues for us:

  1. I cannot provide deep links for others. When i copy the URL, I have to manually add the value for the search params
  2. It makes navigation problematic. When I go back to a page in my browser, since it doesnt have the search params in the url, it does not properly apply the filter that i want it to do.

Am i missing something here? Happy to provide more screenshots or context if required. Any help would be greatly appreciated!

Hello @akhil-leen,

That is odd the ID isn't being shown in the app URL. Is this occurring in the app editor and on the live app?

I can look to reproduce this behavior and see if I can figure out what is going on. It is good that you are able to access the ID programatically.

Hi @akhil-leen,

Just did some testing, I now have lots of thoughts about how we can improve this to better explain how to enable your use case as I imagine other users will have similar plans.

In your case, since you are able to grab the ID from the url.searchParams.connectionId, you will want to add this in the the 'value' input field in your first screen shot. Which is to the right of 'connectionId' where you are setting the URL search parameters.

This should allow for the value of url.searchParams.connectionId to appear in the Details page's URL and allow for this to be shared.

1 Like

@Jack_T that did the trick! I just had to set the value there - I had assumed that was a "default value" field :slight_smile:

Appreciate your help, this is a huge QOL improvement for us!

2 Likes

@akhil-leen Great to hear!

Glad I could help, totally understand that assumption.

Happy programing :slightly_smiling_face: