Use button open in new page to display filtered data

I have browsed the forum and documents and cant seem to find what I need.
In my Airtable database, I have a number of fields per record and one of the fields is a single select field containing 4 cities listed as options.
I have a page containing 4 buttons components only. Each button represents a city in my database.
I want to filter the records per city on button tap to have the results displayed on a second page. I have created the second page with repeated list items.
I’d appreciate any suggestions.

On the second page, create a page parameter called city.

On the first page, create a page variable called city.

Set pageVar value on component tap.

Then attach an open page flow function where you append the second page and set the parameter to the value of the pageVar city

Thanks for your reply.
I have created the parameter on the second page as a text.
On the first page I set the page variable type to object with properties as the 4 cities?
When I set the page variable to the component tap, what to I bind the value to? I have set the data variable on the first page, but I am unable to select anything to bind to the page variable value. What am I doing wrong?

The page Var should be just text, since this var will hold one city once you hit the button.
Then bind the value of this page Var to the city name of the button. Each button has its own component tap, so each one has its flow of set variable with their own city name assigned to the var.

I think I have brain fog! So the assigned value will be a static value?

Screenshot 2022-11-13 at 21.35.00

How will the data record values pull through to the second page?

Your button “Durban” represents a static text “Durban”. So on click of this button, you assign “Durban” to the value of the pageVar “city”. So you are correct, the assigned value is a static text.
But the static text changes as you click on a specific button.
If you click on the “Cape Town” button, you assign the static text “Cape Town” to the value of the pageVar.
If you click on “Richards Bay”, you assign “Richards Bay” to the value of the pageVar.

Now that your pageVar “city” holds a value, you can assign that value to the page parameter value.
Although note that your parameter name is city (see my first reply) not apiKey :slight_smile:

Hmmm two things I realize I’m not clear enough about your situation.
Are your button generated dynamically by a list? Seems very much like so. In this case, use no pageVar. Attach the open page directly to the button tap component and in the value for the parameter, choose formula then something that looks like repeated.value (which is the value of your repeated button). If you’re confused, show me the list on the left when you’re in the formula editor.

Then apologies for the rest of your issues. I went too fast and didn’t finish. You need to pull all the data in the second page, right?
On the second page you simply need to create a get record collection and in the filter option use the page parameter value.
But here I’m less sure as it depends on how you created the data resource from airtable.
It might be straightforward and my suggestion is enough or else please share more info.

I think it’s my fault for not explaining in enough detail, I was trying to keep things simple.
So I have developed a functioning app but I want to simplify it.
I have an Airtable database with 13 fields. The main fields that I want displayed in my repeated lists are Vessel, Port, Guards(integer text) and ETA (Date/time).
At the moment I have 5 separate pages (one for each “Port” and then one for “All Vessels” with repeated lists of these fields and each button simply opens a page which holds the data only visible on conditions that it contains that specific Port.

Screenshot 2022-11-14 at 09.50.25
And then when I tap the component in the list, all the details for that single record open in a new page.

So now, instead of having so many pages of filtered lists, I’m trying to only have one page with repeated list and then only filtered records pull through to this page on button tap. So I thought I could get the records in the 1st page and then send filtered list to the second page via parameter? I don’t know how.

It’s a bit confusing here but let’s see if we can sort it out anyway.

I’d create a Get Record Collection flow function so you have a full complete list in your data variable.
Then create the repeat based on the list of this data variable.
The repeat component like you show above will log the indexed data info of each “button” (clicked area of the component). Then send the index value to the page parameter so your landing page (2nd) have the info in the page and you can use that parameter value to filter the data.

I’m sorry. Thanks for taking the time to help. I am new at this and don’t know all the terminology so am probably no explaining well enough. And I am not really able to follow what you’ve suggested above. This is what I’ve done.

I have the PAGE 1 with 5 buttons. Each is labeled with static text, 'All Vessels, Durban, Richards Bay, Cape Town, Saldanha. I don’t want any of the data from records to be visible on this page.

I have created a data variable on this page ‘Vessels1’ (collection of data records)

Then on each of the 5 buttons, I have added a Open Page navigation pointing to PAGE 2

On PAGE 2 I have created a list component which is repeated with the data variable which I have created on this page too (also ‘Vessels1’ a collection of data records). I have bound each property to the repeated fields.

I have also created a page parameter ‘Port’ on this page.

So now when I tap any of the buttons, Page 2 opens and contains all the records, which is fine or the ‘All Vessels’ button but for the rest of the buttons, I need only the vessels in that specific port ‘Durban’, ‘Richards Bay’ etc. to be visible. I’m not sure how to pass that ‘condition’ to Page 2.

I don’t think you need anything of this on page 1.

It’s hard for me to find the exact solution without being in front of the screen as I’m no expert either. Been using the tool for about 4 months only.

So on page 1, have the page variable store the text value of the button that is clicked.
Then assign the value of the page var to the parameter of the open page flow function.

On page 2, I’d suggest that your get record collection flow function use the page parameter in its filter. You’ll find the filter in the right panel that shows up when you click on the get record collection flow function in the data age 2 canvas. I’m not sure this is the solution since I am not in front of your screen. Let’s cross fingers…

So do I ‘get record collection’ on page mounted? I can’t do it on component tap as I need a ‘Open Page’ there. Can you send me a screen shot of where I’d find the filter in the right panel?

On your 2nd page, create a data variable type collection of data record (since it’s a list you are fetching). See my red marks.
It will create the appropriate flow function for you. Then click on the get record collection and see the filter parameter in the right panel.

For some reason I don’t have the filter conditions?

Click on (highlight) the Get record collection flow function in the canvas to change the right panel display.
…and remove the delay flow function (unless airtable does not mind a read every 5 seconds).


Can you share the schema of your Vessels data? (from the data resource)

I’m not familiar with airtable so I’m confused about how lists are materialized in that case.
Can you show the result screen when you run a test on the GET request from the data configurator? You should see a green “200 OK” result and a schema in the window.
Curious to see how the data schema looks like there.