How to make a proper and efficient detail page for a collection item from Supabase?

Hi, respected experts and developers! I’m facing a (seemingly simple…) problem with getting data for a separate detail page of a selected collection row.

I have an Orders collection page, it fetches data from Supabase. In the collection list in each row (record) there is a Details button, when I click on it I go to another separate Order page where I want to display the data in separate elements (e.g. text) of the record where I clicked the Details button. How to do it correctly, what would be the formula, for example, if there is a database table “orders” in Supabase and I want to display the value of the “order_name” field on the Order page?

I’ve already implemented actually linking to the Order page with passing the selected order ID parameter to the URL, it works, the parameter is passed, I can retrieve and use it later.

Further, on the page of an single Order (where the transition is made), I want to display the values of single parameters (fields from the Orders database in Supabase) in design elements (for example, in the “Text” element). Here I find it difficult how to do this most efficiently… I understand that I need to somehow get data from Supabase (a specific record that will match by ID with the passed parameter in the URL). But how can I, for example, display only the value of the “order_name” field from Supabase in a text element?

I have been studying the information in this topic How do i create dynammic URLs - #2 by Joyce , but I don’t quite understand how to do something like this. Do I need to create a new special Orders collection just to get a single record (by filter) for this? I already have a complete Orders collection, can I somehow use it to select the right record from it (e.g. with ID = 3)

I also asked the AI Assistant to write a formula in a text item, but something is not working. It displays an error…

Can you tell me how to solve this issue? I will be glad to any hints!

Do I need to create a new special Orders collection just to get a single record (by filter) for this? I already have a complete Orders collection, can I somehow use it to select the right record from it (e.g. with ID = 3)

you could look it up as I think you are attempting latter but if your going to have thousands of orders the collection will get too large so you should get a filtered collection just with the 1 record. you can either do a collection or you can use a select workflow and set it to a variable I like doing this for 1 record things (personal preference).

The reason your lookup is failing is because your passing a the paramater as a text see the “” around it so use the toNumber formula and that should fix it

1 Like

Hi Sam!!!

Thanks for your reply, I have just tried to use the Select workflow for Supabase. I was able to retrieve the array of the single record I need from the database using a filter that references the ID parameter in the URL.

Next, I created an array variable to write there the retrieved query from the previous step (action) of the workflow. And it also seemed to execute successfully

So in summary I:

  1. Through “Select” got an array of the record I need (if I’m using the terminology correctly, I apologise if I’m calling something wrong, I’m not a programmer ))) )
  2. I wrote (passed) the resulting array to a variable (also an array).

But then I got confused… For some reason I can’t extract the required individual value (e.g. “order_name”) from an array in a variable and insert it into a text element of the frontend, the result of the variable shows the value “undefined”. Although the workflow shows a positive result with no errors…

What could be wrong and what did I do wrong? I feel like I’ve incompletely executed something, but where and what - I can’t figure it out.

Oh, my God! I think I got it!

I used the wrong type of variable. I should have used the Object type (after all, we get a single record in the previous step of the workflow, not a list of records) instead of Array.

Now I changed the variable (type = Object) and everything worked! I can now retrieve the data I need from the object!

This is super! I really like winning :laughing: Weweb is a very cool platform!

3 Likes