How to get data from Firebase to create a dynamic component list with a Schema template?

This is my first time asking in the community, and I am a total newbie to Kodular. :bowing_woman:
My goal is to make a list of posts based on the data found in the firebase Realtime database.
Also, I want the post to be clickable for making an application, but it should be a later task.

I have read a lot of topics about dynamic component lists, and I followed the guides and imitated some samples. Here are some references.
Tutorials from a-z, How to create schema templates with DynamicComponents and Python
Blank dynamic component list

However, I still cannot produce the posts, which are blank. Below is the background of my app.
Could anyone help me to solve this issue? Thank you :pray:

Used Extensions

  • JsonToDictionary
  • DynamicComponents

Sample of the Real-time database
I make up this by myself (Not sure whether it looks like this).

Kodular blocks and my designed UI schema template for the dynamic components
The desired outcome of the list of posts is changing the yellow-highlighted words
Actually, I am not quite sure what is happening in the procedure of “Posting”.
Could anyone also explain it to me, please?

The UI schema template in the JSON:
I believe “id” is used to define the posts, while the other 10 keys are included in my list of posts.
I have followed the guide to add those {} for changing the variables
(Hopefully, I do not carelessly miss anything.)

{
    "name": "Test_1",
    "metadata-version": 1,
    "extension_version": 5,
    "author": "<your name>",
    "platforms": [
        "creator.kodular.io"
    ],
    "keys": [
    "ID",
    "postid",
    "initiatorname",
    "venue",
    "district",
    "fee",
    "date",
    "level",
    "time",
    "playerno",
    "playertotal"
    ],
    "components": [
        {
            "id": "Card_View1{id}",
            "type": "MakeroidCardView",
            "properties": {
                "ContentPaddingBottom": 2,
                "ContentPaddingLeft": 2,
                "ContentPaddingRight": 2,
                "ContentPaddingTop": 2,
                "FullClickable": true,
                "Height": -1023,
                "Width": -2
            },
            "components": [
                {
                    "id": "Vertical_Arrangement1{id}",
                    "type": "VerticalArrangement",
                    "properties": {
                        "Width": -2
                    },
                    "components": [
                        {
                            "id": "Horizontal_Arrangement14{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Height": -1005,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement15{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "icon_ID{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "Width": -1008,
                                                "Text": "ID",
                                                "TextAlignment": 1
                                            }
                                        },
                                        {
                                            "id": "Label_Text_ID{id}",
                                            "type": "Label",
                                            "properties": {
                                                "Width": -2,
                                                "Text": "{postid}"
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Initiator{id}",
                                            "type": "Label",
                                            "properties": {
                                                "Width": -2,
                                                "Text": "{initiatorname}",
                                                "TextAlignment": 2
                                            }
                                        },
                                        {
                                            "id": "icon_Initiator{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "account_box",
                                                "TextAlignment": 1
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement1{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "Height": -1004,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement5{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "icon_Venue{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "place",
                                                "TextAlignment": 1
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Venue{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{venue}"
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement2{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "Height": -1004,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement7{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "icon_District{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "my_location",
                                                "TextAlignment": 1
                                            }
                                        },
                                        {
                                            "id": "Label_Text_District{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{district}"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "id": "Horizontal_Arrangement8{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 2,
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "Label_Text_Fee{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{fee}"
                                            }
                                        },
                                        {
                                            "id": "icon_Fee{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "monetization_on",
                                                "TextAlignment": 1
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement3{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "Height": -1004,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement9{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "icon_Date{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "today",
                                                "TextAlignment": 1
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Date{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{date}"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "id": "Horizontal_Arrangement10{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 2,
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "Label_Text_Level{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{level}"
                                            }
                                        },
                                        {
                                            "id": "icon_Level{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontBold": true,
                                                "FontSize": 14,
                                                "Width": -1008,
                                                "Text": "lvl",
                                                "TextAlignment": 1
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "Horizontal_Arrangement4{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "Height": -1004,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement11{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "icon_Time{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "watch_later",
                                                "TextAlignment": 1
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Time{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{time}"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "id": "Horizontal_Arrangement12{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignHorizontal": 2,
                                        "AlignVertical": 2,
                                        "Height": -2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "Label_Text_Playerno{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{playerno}"
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Slash{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "/"
                                            }
                                        },
                                        {
                                            "id": "Label_Text_Playertotal{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontSize": 14,
                                                "Text": "{playertotal}"
                                            }
                                        },
                                        {
                                            "id": "icon_PlayerNo{id}",
                                            "type": "Label",
                                            "properties": {
                                                "FontTypeface": 7,
                                                "Width": -1008,
                                                "Text": "people_alt",
                                                "TextAlignment": 1
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": "Color_Utilities1{id}",
            "type": "KodularColorUtilities"
        },
        {
            "id": "Decoration1{id}",
            "type": "Decoration"
        }
    ]
}

Why this blocks?

Also click on some global variable to show us what is printed?

Already you are having the list when web got text then again why do you preparing another list? What happen when you use the same list created on web got text in schema?

Thank you for your response!

Actually, these game posts will be generated after the users have submitted their selected options based on the global variables (=keys in schema), and the variables have tons of options:

  • postid = some number assigned [Every post is different]
  • initiatorname = username [Every post is different]
  • venue: a lot of options → pick 1
  • district: a lot of options → pick 1
  • fee: a few options → pick 1
  • date: date picker → pick 1
  • time: time picker → pick 1
  • level: a few options → pick 1
  • playerno [0 at first, and increase by 1 if other users apply the post]
  • playertotal: a few options → pick 1

This process will be done on another screen, which I do not handle it.
So, I made up some data to the Firebase first (the format maybe wrong) to check whether I could retrieve the data to create a formatted list of posts on a new screen.

For the localtempXXXX part, I imitate them from the reference samples.
To be honest, I am not sure what is happening, and I guess they are some dummy variables…
I also think this part may be useless for my screen… Ok, I will delete them!

this block alone is enough,

EDIT:

Found your error

you have made two mistakes

Point 1; Change the ID into id (small case)
image

Point 2: there are 11 items are there but you have added only ten items in parameter
image

image

See i have made the above changes and tested with numbers, and i get the output successfully

OUTPUT in app

(EDIT)

Please make sure your are getting values in global variable… But i dont think you are getting result because you are getting values from Test.json but in dictionary path way you have failed to add Posting and Post1

see to this point also… Before posting query make sure in all global variable you are getting the result

EDIT

this is my json struture

FB struture

image

Blocks part

And the output is (Based on your schema)

2 Likes

Thank you very much for your solution!
My problem is solved.

1 Like