[Guide] How to use RecyclerList extension with Airtable - Custom Search

Today I will show you an easy way to use RecyclerList extension by @zainulhassan . During my tests with the specific extension I found it easier to work with whole data as table, no need to separate to different colums using

blocks - 2022-06-02T162659.033

In Airtable I have created a test table with 5 colums and 1200 rows

Now, in order to get data we will also need Json To Dictionary Extension

Lets start

1. Set a global variable - data to create an empty list, set a global variable - json to create an empty dictionary and use When Screen initialize to call all rows from Airtable and Initialize RecyclerList inside a layout

blocks - 2022-06-02T164458.789

blocks - 2022-06-02T171559.058

blocks - 2022-06-02T163542.537

2. Now let’s go to the part that we received our data from airtable - as you know the response from airtable is in json format and we have to get data from json. I created a procedure in order to convert json to csv table. As you see mine procedure has 6 inputs slots one for json and one for each airtable’s column. You can create it according to your needs

So when we got all rows we set global json to decode json response from airtable and then we use our procedure to create our table (notice how we fill the six slots - first one is our global json and the other fives have the names of columns in airtable. Finally we set RecyclerList.Data to our global data

3. Now we will create our UI using OnCreateView block . In my example I created the following design for each row in airtable. A cardview with a HA arrangement that has two Vertical Arrangements. First one contains an image and second one four labels. The 2 VA’s are separated by a space.
Notice the use of dictionary blocks in setting properties.

image

4. Now we will bind data from airtable to our UI using OnBindView block with the help of get dataitem block. If you notice I assigned a unique id only to cardviews because in my example all I needed was to identify which cardview was clicked. Each DataItem represents a row in your table so you have to use select item list with get dataitem and index the number of column for example images in my example can be found at clolumn 5

Result is

5. Since we assigned a unique id to cardview we can use it to get specific data on click event. For example when cardview click we can send all infos from that cardview to another screen

Test aia withour custom search
recycler_airtable_1.aia (291.4 KB)

Note that blocks can significantly reduced if we use schema template like we did with dynamic components extension. In that case we only use one block onCreateView and we simply assign values on BindView which I will explain in another guide along with custom search.

For custom search we need on text changed block and in order to to filter our data a procedure to use with ListUtils extension. Mine procedure searches column 2 of my database

blocks - 2022-06-07T194329.523

Test aia with custom search

recycler_airtable_search.aia (346.7 KB)

18 Likes

Thank you for this guide.:clap::clap:
I’ve wanted for a long time to test RecyclerList extension with airtables, but haven’t got the time to learn how it works. I always create dynamic schema and makes lists that way, but this is awesome :ok_hand:

Will see if I find a day next week to test this :relaxed:

2 Likes

Awesome guide :clap: :heart:

1 Like

@Choofa stay tuned :slight_smile: , if I have the time, tomorrow I will make a guide for schema because the main difference in creating schema for recycler list is that we do not have to assign id and keys as we did with dynamic components extension. Much easier

@Shreyaa thank you

2 Likes

Hi again Dora :slight_smile: Any progress on this yet? :slight_smile:

I’m working on it, will post tomorrow

1 Like

Great​:clap: But don’t stress about it, I got plenty of time to wait :relaxed:

1 Like

Here you go, hope it helps [Guide] Schema Template - How to use with Recycler List Extension

2 Likes

Can you please add (update) how to save list to favorite with tiny db or SQLite with the same example

Thanks

how do you create the image column in airtable? I don’t understand how to make the image connected to app by cloudinary link

how remove list .?

Remove the item from global list and re-create the recycler view. There is no option to remove recycler item

1 Like

how to remove item ?

Pls read the above message, friend

But we can re create it after removing the concern from the global list

do you mean recreation again with inicialize block

Yes, recycler already initiated, so you start use from set data to …

oh oke thank…