Query param passed using utils.openPage doesn't trigger search input default

💬 Queries and Resources
1

Hello,
I'm totally new to Retool and hoping this is a quick fix I'm just not seeing and even pointing me to the right documentation would be immensely helpful.

I have a multipage App with a sidebar layout to switch between pages. When I click a button in a table row on one page, I have it setup to grab the serial number from the table row and open up the page with the serial appended using this:
action: go to page
page: BOM
query params:
project_serial
value: {{ currentSourceRow.serial }}

That works great, the URL has "?project_serial=70171" appended. My problem is getting the serial number into the text input from the URL after clicking that button from the previous page.

On the bom page, I have a text input with default value:
{{ urlparams.project_serial || '' }}

If it manually type in the serial, my table populates (it's hidden until anything is typed) properly.

If I manually refresh the BOM page, everything works as it pulls the serial from the URL. I know it's because the entire page isn't reloaded when I click from the previous page, but I don't know how to get it to go.

I’ve tried setting “Run query on page load,” default values, and event handlers, but none of them seem to trigger on navigation since the page doesn’t fully reload).

What’s the best way to detect when the BOM page becomes visible to have the the search input get the serial and populate the table?

Thanks in advance

2

Hello @JustinB, welcome to the Retool Community!

You can implement this functionality using a row action on your table. Set the event handler as follows:

  • Action: Go to page
  • Page: Your target/redirection page
  • Pass data with: Parameters
  • Query Params:
    serial-number → {{ currentSourceRow.serialNumber }}

:pushpin: Reference – Page 1 (Row Action Setup):

image
image1629×881 120 KB

Then, on the second page, use a Text Input component and set its Default Value to:
{{ url.searchParams.serialNumber }}

:pushpin: Reference – Page 2 (Default Value Setup):

image
image1629×879 48.3 KB

3 Likes
4

Thanks for the assistance!
I believe I did as you recommended, having to change parameters a bit to match my own, but the row action still doesn't refresh the page, even though the is URL is being properly appended with the row action. I still have to refresh the whole page in browser to get it to populate.

image
image1137×612 63.7 KB

image
image382×190 5.87 KB

5

Hi @JustinB, we do see these issues when using "set URL parameters" as the action, but "go to page" should update params in the url and "refresh" the page. I did, however, have issues using the row action (it isn't even updating my url params).

What worked for me was to create an event handler on the table, that when clicking a row it goes to a page with my query params. Then on the new page url.searchParams.test (I was testing so I named it test) will get updated and any queries that rely on it's value would also be called automatically.

One thing I notice from your screen shots is that you're using different variable names for the serial number (project_serial / serialNumber). If project_serial is in the url then url.searchParams.serialNumber isn't going to be updated. Maybe try just using serial for everything? That also avoids confusion with camel case vs snake case.

1 Like
6

Hi @JustinB, just checking in. Were you able to get this working?

1 Like