This is my first time asking in the community, and I am a total newbie to Kodular.
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
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"
}
]
}