Generate Customised Schema for use with Dynamic Components

Hello,
I am working on a Social Platform like Twitter and want to make posts in Title Format. Now I have zero knowledge of Schema & how it works. I’ve tried with @iamwsumit 's Schema Generator Tool but I am not able to put the Color, image, font style & font color. I need the community’s help to customise my Schema.
This is the basic layout: (image must change depending on user)

This is the generated Schema.

{
  "name": "post",
  "metadata-version": 1,
  "author": "holmsync",
  "platforms": [
    "App Inventor",
    "Kodular",
    "Niotron"
  ],
  "extensions": {},
  "keys": [
    "id",
    "username",
    "post_title",
    "preview_text"
  ],
  "components": [
    {
      "id": "Card_View1{id}",
      "type": "MakeroidCardView",
      "properties": {
        "ContentPaddingBottom": 5,
        "ContentPaddingLeft": 5,
        "ContentPaddingRight": 5,
        "ContentPaddingTop": 5,
        "Elevation": 0,
        "Width": -2
      },
      "components": [
        {
          "id": "Horizontal_Arrangement1{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignVertical": 2,
            "Width": -2
          },
          "components": [
            {
              "id": "Card_View2{id}",
              "type": "MakeroidCardView",
              "properties": {
                "ContentPaddingBottom": 0,
                "ContentPaddingLeft": 0,
                "ContentPaddingRight": 0,
                "ContentPaddingTop": 0,
                "CornerRadius": 40,
                "Elevation": 0.5,
                "Height": 40,
                "Width": 46
              },
              "components": [
                {
                  "id": "Image1{id}",
                  "type": "Image",
                  "properties": {
                    "Height": -2,
                    "Width": -2,
                    "Picture": "male_avatar.png",
                    "ScalePictureToFit": true
                  }
                }
              ]
            },
            {
              "id": "Label1{id}",
              "type": "Label",
              "properties": {
                "FontBold": true,
                "FontSize": 18,
                "Width": -2,
                "Text": "{username}"
              }
            }
          ]
        },
        {
          "id": "Label2{id}",
          "type": "Label",
          "properties": {
            "FontBold": true,
            "FontSize": 20,
            "Width": -2,
            "Text": "{post_title}"
          }
        },
        {
          "id": "Label4{id}",
          "type": "Label",
          "properties": {
            "FontSize": 14,
            "Width": -2,
            "Text": "{preview_text}"
          }
        },
        {
          "id": "Horizontal_Arrangement2{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignHorizontal": 3,
            "Width": -2
          },
          "components": [
            {
              "id": "Space3{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button1{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 1048575,
                "FontBold": true,
                "FontSize": 20,
                "FontTypeface": 8,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": 15728640
              }
            },
            {
              "id": "Space1{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button2{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 1048575,
                "FontBold": true,
                "FontSize": 18,
                "FontTypeface": 8,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": 15728640
              }
            },
            {
              "id": "Space2{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button3{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 1048575,
                "FontBold": true,
                "FontSize": 20,
                "FontTypeface": 9,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": 15728640
              }
            },
            {
              "id": "Space4{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            }
          ]
        }
      ]
    }
  ]
}

I’ve faced same issue while using Schema generator. Then I’ve changed color values by using Do it option. It was very helpful for me. You might try it. I hope your issue will be solved. And use any image loader extension or component to load image asynchronously to the Image component.

1 Like

I did not Understand Your Solution can explain the steps in detail. or atleast a vague Procedure.

You might show me the expected output from your designer section. It also might be from Companion application. So I can fix the JSON for you with your expectation. Thanks.

Try this modified JSON and let me know the result.

{
  "name": "post",
  "metadata-version": 1,
  "author": "holmsync",
  "platforms": [
    "App Inventor",
    "Kodular",
    "Niotron"
  ],
  "extensions": {},
  "keys": [
    "id",
    "username",
    "post_title",
    "preview_text"
  ],
  "components": [
    {
      "id": "Card_View1{id}",
      "type": "MakeroidCardView",
      "properties": {
        "ContentPaddingBottom": 5,
        "ContentPaddingLeft": 5,
        "ContentPaddingRight": 5,
        "ContentPaddingTop": 5,
        "Elevation": 0,
        "Width": -2
      },
      "components": [
        {
          "id": "Horizontal_Arrangement1{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignVertical": 2,
            "Width": -2
          },
          "components": [
            {
              "id": "Card_View2{id}",
              "type": "MakeroidCardView",
              "properties": {
                "ContentPaddingBottom": 0,
                "ContentPaddingLeft": 0,
                "ContentPaddingRight": 0,
                "ContentPaddingTop": 0,
                "CornerRadius": 40,
                "Elevation": 0.5,
                "Height": 40,
                "Width": 46
              },
              "components": [
                {
                  "id": "Image1{id}",
                  "type": "Image",
                  "properties": {
                    "Height": -2,
                    "Width": -2,
                    "Picture": "male_avatar.png",
                    "ScalePictureToFit": true
                  }
                }
              ]
            },
            {
              "id": "Label1{id}",
              "type": "Label",
              "properties": {
                "FontBold": true,
                "FontSize": 18,
                "Width": -2,
                "Text": "{username}",
                "TextColor": -16777216
              }
            }
          ]
        },
        {
          "id": "Label2{id}",
          "type": "Label",
          "properties": {
            "FontBold": true,
            "FontSize": 20,
            "Width": -2,
            "Text": "{post_title}",
            "TextColor": -16777216
          }
        },
        {
          "id": "Label4{id}",
          "type": "Label",
          "properties": {
            "FontSize": 14,
            "Width": -2,
            "Text": "{preview_text}",
            "TextColor": -16777216
          }
        },
        {
          "id": "Horizontal_Arrangement2{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignHorizontal": 3,
            "Width": -2
          },
          "components": [
            {
              "id": "Space3{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button1{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 16777215,
                "FontBold": true,
                "FontSize": 20,
                "FontTypeface": 8,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": -16777216
              }
            },
            {
              "id": "Space1{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button2{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 16777215,
                "FontBold": true,
                "FontSize": 18,
                "FontTypeface": 8,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": -16777216
              }
            },
            {
              "id": "Space2{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "Button3{id}",
              "type": "Button",
              "properties": {
                "BackgroundColor": 16777215,
                "FontBold": true,
                "FontSize": 20,
                "FontTypeface": 9,
                "HTMLFormat": true,
                "Text": "",
                "TextColor": -16777216
              }
            },
            {
              "id": "Space4{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            }
          ]
        }
      ]
    }
  ]
}
1 Like

Thanks For doing it.
I am away from my PC right now. I 'll check and tell you soon. And Just guide Me with a Small description on how to do the Images stuff ? Like I heard Dynamic Components do not Work in @DevYB 's Image Loader extension

Same here, I’m also away from my computer.
You might follow this steps to load image asynchronously.

2 Likes

It Worked Thanks a Lot

Also Please Can you Tell what changes have you made in the Schema so next time I can Use in other apps too. This schema is very helpful

I did what I said earlier.

1 Like