Dynamic URL to load data

Here I'll try to explain what I'm hoping to achieve and a few examples in how I've set things up thus far.

First, my intended goal is a user can visit a URL which contains an ID of a record which then retrieves the data for that record. This isn't anything abnormal but am somewhat new to Retool (from a 'Oh wow, Retool is INSANELY powerful but can't also be very simple...' position of my adventure here.

In this case I'm using REST API for data.

Here I have a table of items.

When clicking the Icon at the right, I'm setting a variable with the record ID, redirecting to a page to load that record and related data.

image

When the page loads, I set the API to run which does a GET for that single record using the global variable.

Now, I'm too new using Retool to know if this approach is wise or not. So I'm open to suggestions.

What I'm trying to understand is if it's possible to have an ID in the URL like like .com/thisrecord/12345 where 12345 is the ID and if a user manually visits that URL or any ID, the page attempts to load with that specific ID.

Hi @MattK,

If I'm understanding correctly, you've got a multi-page app, the first page has a table of data and the second page is meant to display more detail about that row of data by fetching it from an API, and you want to pass the ID from the row they clicked on, on the first page, to the second page, and access it in the API call?

If that's the case, then you should be able to do that by passing data via URL parameters (instead of a variable, as in your screenshot).

Change the Pass Data With to Parameters, then use the URL Parameters section to set a key to client_id and a value to {{ currentRow.id }}.

On the ViewClient page, create a query to your API that runs on page load, and use the {{ url.searchParams.client_id }} in your API url/headers as needed. That will pull in the value that was used to navigate to the second page.

If you're trying to do something else, or have any questions, let me know.

1 Like

Thanks Mike! This was helpful. I did venture down this path originally but didn't quite get it right. Now it looks to be working the way you described.

Since it's using the URL SearchParam function, I suspect that's why the URL would look like this format?

client/?client_id=2 I do see how this now allows for just changing the ID at in the URL - love it!

Could I actually set it to be the ID only like "client/2" and still allow someone to visit that URL to pull in the API for that single ID or does it require the full param?

Hi @MattK,

If the other page is called 'ViewClient' you could redirect to https://yourRetoolApp.retool.com/appid/ViewClient/2 instead of ?client=2, and you want to use those row action buttons (which unfortunately work a tiny bit differently than a regular button for a redirect, you'd need to set it up like this:

image

And the script you could run, would look like this:

// Get the current url
let currentUrlParts = url.href.split('/')
// Pull off the current page
let _curPage = currentUrlParts.splice(-1)

let currentRowId = currentRow.id

// Add the viewPage to the URL
currentUrlParts.push(retoolContext.pages[0].url)

// Add the ID to the parts
currentUrlParts.push(currentRowId)

// Rebuild the URL
let newUrl = currentUrlParts.join('/')

// Open it, in the current tab.
utils.openUrl(newUrl, {newTab: false})

I haven't tested this a ton, but this will try to rebuild the URL as dynamically as possible. If you're confident in your URL not changing, you can simplify it to just hardcode it to redirect to {{hardcodedUrl}}/ViewClient/{{currentRow.id}} and it should work too.