Filter table with url parameter

  • Goal: I want to filter a table with a url parameter

  • Steps: I´ve set up a url parameter:

When I type into my browser:
https://drgreen.retool.com/app/faq#id=115

the app opens but the parameter value is deleted
it looks like this:
https://drgreen.retool.com/app/faq#id=

when I manually add "115" as value and reload the page, the filter works just fine

What do I miss??

PS:
I have worked with the standard searchTerm feature to prefill the search Filter, but this is not what I want, as the results are not exact, sometimes I do get more results than I want because I´m looking for the id of a specific entry of the list.

Hey @TomJaud,

Where are you accessing this retool app from?
If it is from inside retool you can use the "go to app" event handler to open with the desired url param:
image

1 Like

@TomJaud How are you passing the id into the URL params to begin with?

I second @GuilhermeSilva's point that you can use the 'go to app' event handler to open the app with params you pass in from that GUI and you can dynamically set that to always be a value from a query or component.

if you are looking for a way to store a number to pass in to a query, you can set a Javascript variable to hold this data as well!

Hi,

my goal is to create an url to share.

Everyone in my team who clicks the url should be able to see the desired filtered table.

So, no, not within retool. But from "outside".

Hi @TomJaud

Thank you for the details.

You can set up a JS Query to run on page load, and it that query you can programtically add a filter to your table, using the table.setFilter method!

Then once you deploy your app with the play button in the top right and the behavior is as intended, you can generate a link to share from the 'share' button in the top right.

The query if set up correctly should run and apply the filter to the table so that users who view the app from the link will see the data filtered as intended.

Hope this helps!

HI Jack, nope doesnt fit my needs.

I´m building a FAQ page, with a table and - of course - faq entries.

Now I would like to share an url for every single faq entry I made - if needed, so the user can click on that link, and a certain faq entry will show up in the table.

Ahh ok thanks for letting me know.

I just tested it out and can confirm that adding numbers to the end of the URL will be reset to empty, because the page loads and checks to see if there is a value assigned to the URL params in the box to the right of the red circle in your screenshot.

Currently you would have to set a variable to be the number you want in the URL param and then use the {{}} to the right of the red circle so that the app will read it off of there.

This value would persist but you wouldn't be able to interact with it by changing the URL only by changing the code where the value is read from.

Apologies for the inconvenience. Just to confirm, you want to set the URL by typing and copy/pasting it into a browser and have this be assigned to the app's URL param state variable, correct?

I can make a feature request to add a toggle so that full URLs are not reset by the code trying to read from the URL params in page settings!

Hello @TomJaud!

I just heard back from our engineering team and it seems that the functionality you described can be built into multipage apps!

Check out this demo app here that we made, feel free to inspect the app and see how the URL params are configured.

I am fairly new to multipage apps as they were recently released so I will be going over the app as well to learn about how the changes and updates will impact URL params :smile:

From limited testing it seems this app is able to take params directly into the browser search URL, can be copy and pasted around to to other users and will retain the params and apply them to filter the table as well as also have a search bar if needed.

If you click on the 'default page' at the top, it will show you the inspector for where you can set the URL params, as this is different then the previous manner of doing so within the 'page settings' tab.

From this inspector panel on the right side you can set params that can be either left empty or assigned but should not change unless manually changed in the browser's URL, as shown in the screen shot below

You can export to JSON/import this app to test out and should be able to convert your current app to a multipage app where you can add in the 'default page' to get things working as you envisioned :crossed_fingers:

Hope this helps!