Hello Retool Community,
I need help with a persistent problem regarding data loading after navigation.
1) My Goal: I'm building a recruiting application with two pages:
- A "Home" page with a list of job cards.
- An "Applications" page with a table that should display all applications for a selected job and stage. My goal is to navigate from the "Home" page to the "Applications" page. When I click on a specific job and status metric, the content on the "Applications" page should automatically filter.
2) Issue: The navigation works, and the jobId and statusName parameters are correctly passed in the URL. However, the queries on the "Applications" page run prematurely with null parameters, causing the page to remain empty. The queries do not automatically re-run once the correct parameters become available. I have to manually refresh the page for the data to appear.
3) Steps I've taken to troubleshoot:
- I have set up a
Click event handler on the job card to navigate to the "Applications" page and pass the jobId and statusName parameters.
- The queries on the "Applications" page are correctly configured to filter by
jobId = {{ urlparams.jobId }} and ps.name = {{ urlparams.statusName }}.
- The main problem: The
Run this query on page load option for my main query is grayed out, preventing me from enabling or disabling it. This means the query runs prematurely with null parameters.
- I've also tried workarounds using
JavaScript queries or Text Input components as triggers, but these did not work as the handlers did not behave as expected in my Retool version.
4) Additional Info:
- Retool Version: Cloud - Retool version 3.261.0
- Backend: Supabase (PostgreSQL)
Home:
Applications:
Application after Reset app state
Example List/Click - Event handler:
What I'm looking for: I'm seeking a workaround to automatically execute the queries once the URL parameters are available. Since the standard solutions are not working in my version, I am hoping for an alternative approach from the community.
Thanks in advance for any help!
Your issue (hopefully) has a simple solution if it's being caused by something minor I noticed in your described course of actions.
In your post, when you stated:
"The queries on the "Applications" page are correctly configured to filter by jobId = {{ urlparams.jobId }} and ps.name = {{ urlparams.statusName }}"
Multipage retool apps no longer use {{ urlparams.yourTargetId }}. The new way to get your url params would be {{ url.searchParams.yourTargetId }}. Is that potentially the answer you were looking for?
1 Like
Wow, thank you very much for your quick reply. That worked. Great.
I have another small follow-up question that has the same problem. I have of course adjusted everything in my query and in the event handler, but now my internal selection on the application page no longer works. For example, when I click on HR Screening at the top, it no longer updates the table below. I think I've made a mistake in my thinking. As soon as I reset, the correct table loads. Do you have any tips on what I'm doing wrong?
Thanks for your help 
My Query for the table:
select
a.id,
a.created_at,
c.first_name,
c.last_name,
c.email,
c.phone,
ps.id as pipeline_stage_id,
ps.name as pipeline_stage,
ps.color as pipeline_stage_color,
DATE_PART('day', NOW() - a.stage_changed_at) AS days_in_stage,
j.title as job_title
from recruiting.applications a
inner join recruiting.candidates c
on a.candidate_id = c.id
inner join recruiting.pipeline_stages ps
on a.pipeline_stage_id = ps.id
inner join recruiting.jobs j
on a.job_id = j.id
where
a.job_id = {{ url.searchParams.jobId }}
and ({{ !url.searchParams.statusName && !selectedStatus.value }}
or ps.name = {{ url.searchParams.statusName || selectedStatus.value }})
order by a.created_at desc;
Variable: {{ url.searchParams.statusName }}
1 Like
Nice! It's always a relief when what seems to be a harrowing issue ends up having a simple resolution! 
For your follow up issue -- I see that in your "Pipeline Stage ID" column that you are passing {{ item.value }} for the value, but passing {{ self.label }} when you set the value for your selectedStatus variable. Is it possible you'd need to pass the value here, i.e., the ID instead of the label?
You gave me an idea... It was the logic in my WHERE condition! I was using both url.searchParams.statusName and selectedStatus.value, but these two weren't synchronized.
When I come to the page via a URL with statusName parameter (e.g. ?statusName=New Application), then url.searchParams.statusName is set. When I then internally click on "HR Screening", only selectedStatus.value gets changed, but url.searchParams.statusName remains.
In my query condition:
and ({{ !url.searchParams.statusName && !selectedStatus.value }}
or ps.name = {{ url.searchParams.statusName || selectedStatus.value }})
The || (OR) in JavaScript returns the first "truthy" value. When url.searchParams.statusName is set, it always uses this value, never the selectedStatus.value.
The Solution: Implemented the prioritization of selectedStatus:
and ({{ !selectedStatus.value && !url.searchParams.statusName }}
or ps.name = {{ selectedStatus.value || url.searchParams.statusName }})
Now the internal selection works again! Thanks for your help. Certainly won't be the last time 
2 Likes
There's few feelings that top how it feels to debug a stubborn issue I'm glad you were able to get it figured out! Awesome job!
