Create a dynamic page in WeWeb for a single record from Airtable

I am building my first WeWeb application with Airtable as a data source. I’ve been able to bind and display a list of collection items on a page, but I want to create pages that display single records without requiring the user to view the entire collection.

For example, I have a table in Airtable called Orders, and I want to create a page in WeWeb for Order Details including information like Order Name, Order Number, Order Total, etc. I want this WeWeb page to be located at domain.com/orders/{airtable_record_id}. I want users to be able to access these pages without needing to navigate through a collection page. I want the user to receive an email, click on a link, and view the page displaying the Airtable record’s data. But I cannot seems to figure out how to use parameters in a URL path to achieve this.

Note that I am not a software engineer, so this may be a basic concept for others, but for me it is unclear even after reviewing the WeWeb documentation. Any guidance would be appreciated.

1 Like

Hi @gary :wave:

Ok cool, this is completely doable :slight_smile:

The approach will be different depending on whether you’re using a static or dynamic collection.

Since it’s a list of orders and I’m guessing you can have thousands if not millions of orders and there’s no need for SEO, I would recommend creating a dynamic collection page.

Have you seen this video?

In that video, we show 2 approaches to dynamic collection pages, one with a variable, one with an API call. In your case, you’ll need to follow the API call approach.

Does that help?

@Joyce Thank you for your quick response and the video. I did watch the video previously before posting here, but since it’s referencing Xano (and I’m using the Airtable integration) I didn’t know if the approach would be the same. Should I be connecting to Airtable using the Airtable API or the WeWeb integration with Airtable?

1 Like

Aaaah ok, got it!

Didn’t think about that but indeed the approach would be a bit different with Airtable as the database. You’ll need to use the “Filter by formula” feature. Here’s a video explaining how to do it.

The SEARCH formula can be a bit tricky to set up so you might want to refer to our user docs on the topic.

PS: I’d definitely recommend using our Airtable integration because all the API calls you make with the REST API plugin are visible in the user’s browser and you wouldn’t want to share your secret Airtable key there :slight_smile:

2 Likes

Thank you very much for the helpful video! I am now much more clear on how to use WeWeb’s Airtable integration and closer to being unblocked! Unfortunately, now I’m receiving an error which I’ve pasted below.

message: “The operation cannot be processed”

This is a rather vague error with no error code, so it’s unclear what the problem is. But it is progress regardless. I am grateful for your wonderful assistance here.

Update: Now I’m seeing no data returned for my Order Details collection. The error is below.

No data fetched
(Empty array)

My formula is as folows.

‘SEARCH(" ’ + context.pageParameters[‘order_id’] + ’ ", Slug)’

order_id is the page parameter, and Slug is a formula field I created in Airtable to display the hidden Record ID. And although I can find the same record in Airtable, it’s missing from the API response. Very strange.

Update: At last! The problem I was having with empty results was caused by extra spaces between the " and ’ characters in the formula. Now I’m seeing the record returned via the formula.

3 Likes