Tutorials from a-z, How to create schema templates with DynamicComponents and Python

How can I make my own Schema template?

Step 1: Download zip from github

Step 2: Download and install version 3.x of python (any version starting with 3) You need to check the box “Add Python 3.x to PATH” in the first screen of the installation.

See details in this video
Tutorials from a-z, How to create schema templates with DynamicComponents & Python Part 1 | Kodolar - YouTube

Step 3: Create your model in a separate screen in kodular. In my case I created a cardView with lots of buttons, whitespace, layout and it works. This Schema will be converted to JSON code then and you will be able to change some properties like the label’s text, background color and other attributes.

See details in this video
Tutorials from a-z, How to create schema templates with DynamicComponents & Python Part 2 | Kodolar - YouTube

Tutorials from a-z, How to create schema templates with DynamicComponents & Python Part 3 | Kodolar - YouTube
The template I created in this video
test123.aia (66.6 KB)

schema template

{
    "name": "test",
    "metadata-version": 1,
    "extension_version": 5,
    "author": "<your name>",
    "platforms": [
        "creator.kodular.io"
    ],
    "keys": [
	"id",
	"title",
	"sub",
	"view",
	"time",
	"image"
	],
    "components": [
        {
            "id": "Card_View1{id}",
            "type": "MakeroidCardView",
            "properties": {
                "ContentPaddingBottom": 0,
                "ContentPaddingLeft": 0,
                "ContentPaddingRight": 0,
                "ContentPaddingTop": 0,
                "CornerRadius": 20,
                "FullClickable": true,
                "Width": -2
            },
            "components": [
                {
                    "id": "Vertical_Arrangement1{id}",
                    "type": "VerticalArrangement",
                    "properties": {
                        "Width": -2
                    },
                    "components": [
                        {
                            "id": "Card_View3{id}",
                            "type": "MakeroidCardView",
                            "properties": {
                                "BackgroundColor": 16777215,
                                "CornerRadius": 0,
                                "Elevation": 0,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Horizontal_Arrangement1{id}",
                                    "type": "HorizontalArrangement",
                                    "properties": {
                                        "AlignVertical": 2,
                                        "Width": -2
                                    },
                                    "components": [
                                        {
                                            "id": "Vertical_Arrangement2{id}",
                                            "type": "VerticalArrangement",
                                            "properties": {
                                                "Width": -2
                                            },
                                            "components": [
                                                {
                                                    "id": "Label1{id}",
                                                    "type": "Label",
                                                    "properties": {
                                                        "FontBold": true,
                                                        "FontSize": 16.0,
                                                        "Text": "{title}",
														"TextColor": -769226
                                                    }
                                                },
                                                {
                                                    "id": "Label2{id}",
                                                    "type": "Label",
                                                    "properties": {
                                                        "Text": "{sub}",
                                                        "TextColor": -7566180
                                                    }
                                                },
                                                {
                                                    "id": "Horizontal_Arrangement2{id}",
                                                    "type": "HorizontalArrangement",
                                                    "properties": {
                                                        "AlignVertical": 2,
                                                        "Width": -2
                                                    },
                                                    "components": [
                                                        {
                                                            "id": "Label3{id}",
                                                            "type": "Label",
                                                            "properties": {
                                                                "FontTypeface": 7,
                                                                "Text": "visibility"
                                                            }
                                                        },
                                                        {
                                                            "id": "Label4{id}",
                                                            "type": "Label",
                                                            "properties": {
                                                                "Text": "{view}"
                                                            }
                                                        },
                                                        {
                                                            "id": "Space1{id}",
                                                            "type": "SpaceView",
                                                            "properties": {
                                                                "Width": -2
                                                            }
                                                        },
                                                        {
                                                            "id": "Label5{id}",
                                                            "type": "Label",
                                                            "properties": {
                                                                "Text": "{time}"
                                                            }
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        {
                                            "id": "Card_View2{id}",
                                            "type": "MakeroidCardView",
                                            "properties": {
                                                "ContentPaddingBottom": 0,
                                                "ContentPaddingLeft": 0,
                                                "ContentPaddingRight": 0,
                                                "ContentPaddingTop": 0,
                                                "CornerRadius": 20,
                                                "Elevation": 0
                                            },
                                            "components": [
                                                {
                                                    "id": "Image1{id}",
                                                    "type": "Image",
                                                    "properties": {
                                                        "Height": 200,
                                                        "Width": 150,
                                                        "Picture": "{image}",
                                                        "ScalePictureToFit": true
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Here are some of the designs I created with that tool

564564564644

54694654654564 56454845454664 65654654654454 545465454464654 564649498489447 564654564545465 654684894894684 3546655464654498 56464646546844564 63574654687496874 354654546544895496 654894758746465485 5637563876875638638

7 Likes

I Will try with my example, inspires by Dribbble.
This is just the UI, with no functionality.

4 Likes

what are deferent if i create design by dynamic components and this method.?

What difficulty do you pick up? Let me know, I can help you.

see the steps in my tutorial.

1 Like

can image load from link like image utility?

not difficult. I want to say what are the deferent this method from general dynamic designs

It will reduce blocks with complex designs,This method will automatically generate Json for the designs and no need to write Json code anymore

1 Like

please can you send me link

Please add like this so you want to load the image

32454

type "type": "Image", = component_method

type "type": "HorizontalArrangement", or "type": "VerticalArrangement", = imageHV

2 Likes

This method save lots of time.

2 Likes

thanks for your contribution. I tried this method. I was getting an error on the cmd


do you know why this error was showing

have you installed the module by executing pip install -r requirements.txt?

No.i didn’t install module.how can i

You can see the details of the post in my videos, how I tried to execute the command.

1 Like

thanks, I did it. I skip some parts.

1 Like

How can i added spinner eliments from parameters.
i tried this
"Elements":"{variation}"
I pass the list from parameters but the spinner was showing the default value

2 Likes

I was puzzled between these two
Screenshot (3)

{
  "name": "spinner",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "Developer DXH",
  "platforms": [
    "creator.kodular.io"
  ],
  "keys": [
    "ID",
    "VALUE"
  ],
  "components": [
    {
      "id": "Spinner1{ID}",
      "type": "Spinner",
      "properties": {
        "SpinnerTextSize": 24,
        "ElementsFromString": "{VALUE}",
        "FontTypeface": 1
      }
    }
  ]
}