I’m creating a product review using Dynamic Components extension. I have created a JSON template already. Is it possible to loop or display the images (e.g. 1 to 5 images) within the template? If yes, how? If no, what would be the best way to add images in reviews?
Welcome !
2 Likes
Thank you, but how can I add an (n) number of images in every list?
Use loop with length of image list
2 Likes
I have tried but I can’t figure it out how. I always get an error “expected unique ID.” Can you please elaborate how could I make it?
Post your schema here
2 Likes
In “Horizontal_Scroll_Arrangement1” part where I want to add images.
{
"name": "Sample",
"metadata-version": 1,
"extension_version": 5,
"author": "<Joel Villena>",
"platforms": [
"creator.kodular.io"
],
"keys": [
"id",
"profile",
"name",
"date",
"feedback",
"image",
"index"
],
"components": [
{
"id": "Card_View1{id}",
"type": "MakeroidCardView",
"properties": {
"Width": -2
},
"components": [
{
"id": "Vertical_Arrangement1{id}",
"type": "VerticalArrangement",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"BackgroundColor": 16777215,
"Width": -2,
"isCard": true
},
"components": [
{
"id": "Horizontal_Arrangement1{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Profile_Image{id}",
"type": "Image",
"properties": {
"Height": 50,
"Width": 50,
"Picture": "{profile}",
"ScalePictureToFit": true
}
},
{
"id": "Space6{id}",
"type": "SpaceView",
"properties": {
"Width": 20
}
},
{
"id": "Name_Label{id}",
"type": "Label",
"properties": {
"FontSize": 16,
"Text": "{name}"
}
}
]
},
{
"id": "Space3_copy{id}",
"type": "SpaceView",
"properties": {
"Height": 10
}
},
{
"id": "Horizontal_Arrangement2{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Date_Label{id}",
"type": "Label",
"properties": {
"FontSize": 12,
"Text": "{date}"
}
}
]
},
{
"id": "Space3{id}",
"type": "SpaceView",
"properties": {
"Height": 15
}
},
{
"id": "Horizontal_Arrangement3{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Space10{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Feedback_Label{id}",
"type": "Label",
"properties": {
"Text": "{feedback}"
}
}
]
},
{
"id": "Space5{id}",
"type": "SpaceView",
"properties": {
"Height": 15
}
},
{
"id": "Horizontal_Scroll_Arrangement1{id}",
"type": "HorizontalScrollArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Photos_Image{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image_copy{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image_copy1{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy1{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image_copy2{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy3{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image_copy3{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
}
]
}
]
}
]
}
]
}
Something like this ?
1 Like
Yes, how could you make it?
I modified you schema
{
"name": "Sample",
"metadata-version": 1,
"extension_version": 5,
"author": "<Joel Villena>",
"platforms": [
"creator.kodular.io"
],
"keys": [
"id",
"profile",
"name",
"date",
"feedback",
"image",
"index"
],
"components": [
{
"id": "Card_View1{id}",
"type": "MakeroidCardView",
"properties": {
"Width": -2
},
"components": [
{
"id": "Vertical_Arrangement1{id}",
"type": "VerticalArrangement",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"BackgroundColor": 16777215,
"Width": -2,
"isCard": true
},
"components": [
{
"id": "Horizontal_Arrangement1{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Profile_Image{id}",
"type": "Image",
"properties": {
"Height": 50,
"Width": 50,
"Picture": "{profile}",
"ScalePictureToFit": true
}
},
{
"id": "Space6{id}",
"type": "SpaceView",
"properties": {
"Width": 20
}
},
{
"id": "Name_Label{id}",
"type": "Label",
"properties": {
"FontSize": 16,
"Text": "{name}"
}
}
]
},
{
"id": "Space3_copy{id}",
"type": "SpaceView",
"properties": {
"Height": 10
}
},
{
"id": "Horizontal_Arrangement2{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Date_Label{id}",
"type": "Label",
"properties": {
"FontSize": 12,
"Text": "{date}"
}
}
]
},
{
"id": "Space3{id}",
"type": "SpaceView",
"properties": {
"Height": 15
}
},
{
"id": "Horizontal_Arrangement3{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Space10{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Feedback_Label{id}",
"type": "Label",
"properties": {
"Text": "{feedback}"
}
}
]
},
{
"id": "Space5{id}",
"type": "SpaceView",
"properties": {
"Height": 15
}
},
{
"id": "Horizontal_Scroll_Arrangement1{id}",
"type": "HorizontalScrollArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "Photos_Image1{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image2{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image3{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy1{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image4{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
},
{
"id": "Space11_copy3{id}",
"type": "SpaceView",
"properties": {
"Width": 10
}
},
{
"id": "Photos_Image5{id}",
"type": "Image",
"properties": {
"Height": 150,
"Width": 150,
"Picture": "{image}im{index}"
}
}
]
}
]
}
]
}
]
}
Blocks
1 Like
Thank you so much! 
This is it! I didn’t think this way before. 
May I ask which part of my schema have you modified?
"id": "Photos_Image{id}"
"id": "Photos_Image_copy{id}
"id": "Photos_Image_copy1{id}"
"id": "Photos_Image_copy2{id}"
"id": "Photos_Image_copy3{id}"
Changed them to
"id": "Photos_Image1{id}"
"id": "Photos_Image2{id}
"id": "Photos_Image3{id}"
"id": "Photos_Image4{id}"
"id": "Photos_Image5{id}"
1 Like
Thank you!
In additional, can I leave it just blank string value to some Photo_Image(s) if the user only sent a less than of 5 images?
Thank you once again. 
I’ll just try it my self to do trial and error. I think, I have to add visibility of the images.
1 Like
will i need to add physical component in new screen if i want to use schema or i can use schema without adding components first in that screen ??? If no need to add physical components so how to add click event in component ??
You have to add which where you place your schema components.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.