Dynamic category wise list with dynamic item

[rajjangid911 (DEV RDX)]

Hello everyone,

I am facing problem in creating dynamic list with dynamic component extensions. When I create list from this block. The list is taking a long time due to which sometimes the app closes automatically. I do not know why this is happening, if anyone knows the solution to this, then please tell about it.

The full details of the schema of the list are as follows

For Dynamic category arrangements

{
  "name": "sub_cat_ls_arr",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "<your name>",
  "platforms": [
    "creator.kodular.io"
  ],
  "keys": [
    "id",
    "title"
  ],
  "components": [
    {
      "id": "cat_main_arr{id}",
      "type": "VerticalArrangement",
      "properties": {
        "BackgroundColor": 16777215,
        "Width": -2
      },
      "components": [
        {
          "id": "Space4_copy_copy_copy{id}",
          "type": "SpaceView",
          "properties": {
            "Height": 10
          }
        },
        {
          "id": "Horizontal_Arrangement1_copy_copy_copy{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignHorizontal": 3,
            "AlignVertical": 2,
            "BackgroundColor": 16777215,
            "Width": -2
          },
          "components": [
            {
              "id": "Space5_copy_copy_copy{id}",
              "type": "SpaceView",
              "properties": {
                "Width": 10
              }
            },
            {
              "id": "cat_txt{id}",
              "type": "Label",
              "properties": {
                "FontBold": true,
                "Text": "{title}",
                "TextColor": -1
              }
            },
            {
              "id": "Space6_copy_copy_copy{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "see_more_btn{id}",
              "type": "Label",
              "properties": {
                "Clickable": true,
                "FontBold": true,
                "Text": "SEE MORE",
                "TextColor": -16537101
              }
            },
            {
              "id": "Space7_copy_copy_copy{id}",
              "type": "SpaceView",
              "properties": {
                "Width": 10
              }
            }
          ]
        },
        {
          "id": "Space8_copy_copy_copy{id}",
          "type": "SpaceView",
          "properties": {
            "Height": 10
          }
        },
        {
          "id": "Vertical_Arrangement3_copy_copy_copy{id}",
          "type": "VerticalArrangement",
          "properties": {
            "BackgroundColor": -10395295,
            "Height": 1,
            "Width": -2
          }
        },
        {
          "id": "Space9_copy_copy_copy{id}",
          "type": "SpaceView",
          "properties": {
            "Height": 5
          }
        },
        {
          "id": "content_ls_arr{id}",
          "type": "HorizontalScrollArrangement",
          "properties": {
            "AlignVertical": 2,
            "BackgroundColor": 16777215,
            "Width": -2,
            "Scrollbar": false
          }
        }
      ]
    }
  ]
}

For list items schema

{
  "name": "Viral_Player",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "<your name>",
  "platforms": [
    "creator.kodular.io"
  ],
  "keys": [
    "id",
    "thumbnail_image",
    "tag_image"
  ],
  "components": [
    {
      "id": "card{id}",
      "type": "MakeroidCardView",
      "properties": {
        "AlignHorizontal": 3,
        "AlignVertical": 2,
        "ContentPaddingBottom": 0,
        "ContentPaddingLeft": 0,
        "ContentPaddingRight": 0,
        "ContentPaddingTop": 0,
        "CornerRadius": 8,
        "FullClickable": true,
        "Height": -1030,
        "Width": -1042
      },
      "components": [
        {
          "id": "thumbnail_arr{id}",
          "type": "VerticalArrangement",
          "properties": {
            "Height": -2,
            "Width": -2,
            "Image": "{thumbnail_image}"
          },
          "components": [
            {
              "id": "tag_arr{id}",
              "type": "VerticalArrangement",
              "properties": {
                "Height": -2,
                "Width": -2,
                "Image": "{tag_image}"
              }
            }
          ]
        }
      ]
    }
  ]
}

Database of MYSQL

Block section

Please share solution, thankuuuuu …

[Still-learning (1-2-3-4...)]

I hope your solution would be, when you get data from MYSQL first filter and save them as category wise in a variable. and then depending upon length of the each category just create the dynamic component

[rajjangid911 (DEV RDX)]

After my hard work of 4 days I have got success.

Change Schema for list item

{
  "name": "Viral_Player",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "<your name>",
  "platforms": [
    "creator.kodular.io"
  ],
  "keys": [
    "id"
  ],
  "components": [
    {
      "id": "card{id}",
      "type": "MakeroidCardView",
      "properties": {
        "AlignHorizontal": 3,
        "AlignVertical": 2,
        "ContentPaddingBottom": 0,
        "ContentPaddingLeft": 0,
        "ContentPaddingRight": 0,
        "ContentPaddingTop": 0,
        "CornerRadius": 8,
        "FullClickable": true,
        "Height": -1030,
        "Width": -1042
      },
      "components": [
        {
          "id": "thumbnail_arr{id}",
          "type": "VerticalArrangement",
          "properties": {
            "Height": -2,
            "Width": -2
          },
          "components": [
            {
              "id": "tag_arr{id}",
              "type": "VerticalArrangement",
              "properties": {
                "Height": -2,
                "Width": -2
              }
            }
          ]
        }
      ]
    }
  ]
}

I used DevYBImageLoader Thank you… DevYB

Block image