I want to create a page that use dynamic content from an API

Lukas Mohr · 2024-02-22T08:23:32.566+00:00

Currently I have loaded my Player Profiles API, and I want to create a subpage for each player. I have been trying to look at the page url but don't see a way to attach a formula. Is there a way to make a dynamic url and page in toddle or do I need a cms connected?The api is from supabase.

Lukas Mohr
2 years ago
Currently I have loaded my Player Profiles API, and I want to create a subpage for each player.

I have been trying to look at the page url but don't see a way to attach a formula. Is there a way to make a dynamic url and page in toddle or do I need a cms connected?

The api is from supabase.
noCode.Lad
2 years ago
Was looking into something close to this just yesterday. Trying to display modal's content based on query parameter in my URL. It didn't work then. Resorted to exploring again today.
Lukas Mohr
2 years ago
@noCode.Lad After some searching I found this: https://docs.nordcraft.com
noCode.Lad
2 years ago
I read up on that and did a lot of trial and error. I'm familiar with paths and queries. And I also tested my implementation. The issue is not accessing the URL parameters or even changing or updating them. I got those to work easily.

My issue was that the modal's data which depends on the id set in the path does nothing. For some reason it never loads the correct data.

It's probably a bug. I decided to let it be and try again today instead of spending hours trying to figure out why.
Lukas Mohr
2 years ago
I managed to do!
Create a new url path xxx/slug
In my case I need to filter the api so I get the user based on the slug steam_id
Andreas Møller
2 years ago
Nice!
Nigel G
2 years ago
Very nice. This is a common pattern - Listing/Detail.

Will start a new thread if needed, but this felt like the same issue I am having.

Is it good practice to have sub pages here? It feels a little inefficient as, from what I can tell, you need to recall the API each time you go to a new page, despite having all the data on the listing.

You could show/hide with a detail section instead of a page redirect. But do you still need to call the API to get the data from the listing API object you clicked on?

Also, if you are using a button to navigate on a click action, am I understanding that the way to do it is to concatenate the site url (which may well change? Do I have to change every page nav if I go from a xxxx.toddle.dev site to a custom url) with the page path and the id of the slug.
Nigel G
2 years ago
And, another question. If the link/button is in a component, then is there a way to access the id of the <item> other than putting it as an attribute on the component and hiding it?
Bishop
2 years ago
You don't need to hit the api all the time, you can keep data in the calling page and have it send back out to your components to update themselves when they get new attributes. I do this on my application and it works well. I bring a template in that contains all the questions and prompting and other pieces, writes it out to the components that display it, and each component handles if someone updates the data (by calling the api once to save that one piece).
👍1
It's a good model and will respond well for users and is efficient.
@Bishop
You don't need to hit the api all the time, you can keep data in the calling page and have it send back out to your components to update themselves when they get new attributes. I do this on my application and it works well. I bring a template in that contains all the questions and prompting and other pieces, writes it out to the components that display it, and each component handles if someone updates the data (by calling the api once to save that one piece).
Nigel G
2 years ago
Thanks. How do I do that please?

I want to create a page that use dynamic content from an API

Lukas Mohr

noCode.Lad

Lukas Mohr

noCode.Lad

Lukas Mohr

Andreas Møller

Nigel G

Nigel G

Bishop

Nigel G