[Guide] Schema Template - How to use with Recycler List Extension

This guide will show you how to create a schema template in order to use it with RecyclerList extension by @zainulhassan . Many of you are familiar with creation of schema template using TemplateCreator by @yusufcihan and Dynamic components extension.

For those we never worked with schema and TemplateCreator there is already an excellent guide in community that you can refer - Tutorials from a-z, How to create schema templates with DynamicComponents and Python

Creation of schema template is identical in both cases, with one main difference after creation. In order to use schema with dynamic components we have to edit our created json and assign keys while in RecyclerList no keys needed, simply create json and use it as is, only make changes in colors properties if needed.

I have created my model in a test project.Notice how I renamed my components, because I will be using components names as tags in RecyclerList later and once my design was ready, exported ais to my computer.

With the help of TemplateCreator and Python this design was transformed to a json file. I use Notepad++ with Json Viewer plugin to edit json but you can use any editor you wish. Only changes I made was to add my name as author and change values for every custom color I have used.

Once done, I saved changes to json, copied text and pasted it in project

{
    "name": "temp_schema_template",
    "metadata-version": 1,
    "extension_version": 5,
    "author": "Dora_Paz",
    "platforms": [
        "creator.kodular.io"
    ],
    "extensions": {},
    "keys": [],
    "components": [
        {
            "id": "cv_",
            "type": "MakeroidCardView",
            "properties": {
                "AlignHorizontal": 3,
                "AlignVertical": 2,
                "ContentPaddingBottom": 0,
                "ContentPaddingLeft": 0,
                "ContentPaddingRight": 0,
                "ContentPaddingTop": 0,
                "CornerRadius": 20,
                "FullClickable": true,
                "Width": -1090,
                "StrokeColor": -12627531,
                "StrokeWidth": 4
            },
            "components": [
                {
                    "id": "HA_",
                    "type": "HorizontalArrangement",
                    "properties": {
                        "AlignHorizontal": 3,
                        "AlignVertical": 2,
                        "BackgroundColor": 16777215,
                        "Width": -2
                    },
                    "components": [
                        {
                            "id": "VA1_",
                            "type": "VerticalArrangement",
                            "properties": {
                                "AlignHorizontal": 3,
                                "AlignVertical": 2,
                                "BackgroundColor": 16777215,
                                "Height": -2
                            },
                            "components": [
                                {
                                    "id": "Img_",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 75,
                                        "Width": 75
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Sp_",
                            "type": "SpaceView",
                            "properties": {
                                "Width": 10
                            }
                        },
                        {
                            "id": "VA2_",
                            "type": "VerticalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "BackgroundColor": 16777215,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Lb1_",
                                    "type": "Label",
                                    "properties": {
                                        "FontSize": 14,
                                        "Text": "Text for Label1"
                                    }
                                },
                                {
                                    "id": "Lb2_",
                                    "type": "Label",
                                    "properties": {
                                        "Text": "Text for Label2"
                                    }
                                },
                                {
                                    "id": "Lb3_",
                                    "type": "Label",
                                    "properties": {
                                        "Text": "Text for Label3"
                                    }
                                },
                                {
                                    "id": "Lb4_",
                                    "type": "Label",
                                    "properties": {
                                        "Text": "Text for Label4"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

After that all I had to do was to bind data to my schema. I used as data a table converted to list of lists and all I had to do is to select from dataitem (row in table) the value I wanted using select item list … at index … block

If we have used Dynamic components we would have to assign keys and made more changes in json in order to bind data besides colors

You can test and see the differences and similarities in
schema_dynamic.aia (114.6 KB)

or watch

16 Likes

2 posts were merged into an existing topic: [F/OS] Recycler List View - Render larger data sets efficiently using RecyclerView for AppInventor & Distros

Hey, how are you ?

I wanted to know, how to have a transparent background color? I used ColorUtilities, it gives me -256, only when I enter this value in the json, it gives a yellow background

See Hexadecimal color code for transparency

Try 16777215

image

2 Likes

Yes ! Thank you, it’s work :smiley:

1 Like

Another question regarding the schema, using your method with the “list from csv table” block, it works fine. But how do I use the data I got from an API?

I have this block:

But then I try to add the items in lists, I tried with block “join item with separator”, “list from csv table”, etc. Nothing works. I must not have the right method :confused:

Join all data in a table like this

Try kamelot.aia (193.2 KB)

1 Like

Great, thank you ! :smiley:

1 Like

ask… how to make a grid view that way?

Awesome Dora, You are so amazing and wonderful.
Thank you so sooooooooooo :slight_smile: much for your sharing.

Hi Dora
I made a recycler view list using schema. It is about 1000 row and 20 column google sheet data.
The loading is great for all list view that was followed as your guide.
But after first search view(filtered), it is not easy to try second search.
I think, it is need to kind of “Refresh” the all list view when I make the blank search text after once searched.
As your other sample of search in the recycler view list, It is very simple and working fast and good. But I don’t know, mine is not working good.
Would you check my aia?
recyclerTest11.aia (826.0 KB)

Thank you awesome Dora.