Is it possible to customize my URL GSHEET link to directly filter the data from the “data” table as a function of the “category” column to dynamically display the products of the clicked option (rices, flours, oils …) without used any extension by only creating the request on the URL link ???
Hello All
Please Me
The error occurs when I try to add an article in “Basket (My Cart)”. By dynamically creating the list of selected articles.
The corresponding image is not displayed.
Thanks In Advance
{
"name": "test",
"metadata-version": 1,
"author": "Abdoulaye",
"platforms": [
"creator.kodular.io"
],
"extensions": {},
"keys": [
"id",
"imgProd_Item",
"nomProd_Item",
"imgRemove_Item",
"poidProd_Item",
"brisureProd_Item",
"prixProd_Item",
"imgMoins_Item",
"Qty_Item",
"imgPlus_Item",
"TotalProd_Item"
],
"components": [
{
"id": "VA_MyCart{id}",
"type": "VerticalArrangement",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"Height": -2,
"Width": -2
},
"components": [
{
"id": "VSA_Items{id}",
"type": "VerticalScrollArrangement",
"properties": {
"Height": -2,
"Width": -1098
},
"components": [
{
"id": "CV_Cart{id}",
"type": "MakeroidCardView",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"BackgroundColor": -6381922,
"ContentPaddingBottom": 4,
"ContentPaddingRight": 4,
"ContentPaddingTop": 4,
"CornerRadius": 15,
"Height": 150,
"Width": -2
},
"components": [
{
"id": "Horizontal_Arrangement1{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"BackgroundColor": 16777215,
"Height": -2,
"Width": -2
},
"components": [
{
"id": "img_Item{id}",
"type": "Image",
"properties": {
"Clickable": true,
"Height": 110,
"Width": 80,
"Picture": "{imgProd_Item}"
},
"components": []
},
{
"id": "Horizontal_Arrangement2{id}",
"type": "HorizontalArrangement",
"properties": {
"BackgroundColor": 16777215,
"Height": -2,
"Width": -2
},
"components": [
{
"id": "Vertical_Arrangement3{id}",
"type": "VerticalArrangement",
"properties": {
"BackgroundColor": 16777215,
"Height": -2,
"Width": -2
},
"components": [
{
"id": "Horizontal_Arrangement6{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "lblNom_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontItalic": true,
"FontSize": 16.5,
"FontTypeface": 2,
"MaxLines": 200,
"Text": "{nomProd_Item}",
"TextColor": -1
},
"components": []
},
{
"id": "Space3{id}",
"type": "SpaceView",
"properties": {
"Height": 5,
"Width": -2
},
"components": []
},
{
"id": "imgBin_Item{id}",
"type": "Image",
"properties": {
"Clickable": true,
"Height": 25,
"Width": 25,
"Picture": "{imgRemove_Item}",
"ScalePictureToFit": true
},
"components": []
},
{
"id": "Space3_copy{id}",
"type": "SpaceView",
"properties": {
"Height": 5,
"Width": 5
},
"components": []
}
]
},
{
"id": "Horizontal_Arrangement7{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "lblPoids_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 11,
"MaxLines": 50,
"Text": "Poids Net : ",
"TextColor": -1
},
"components": []
},
{
"id": "Poids_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 11,
"Width": -2,
"Text": "{poidProd_Item}",
"TextColor": -1
},
"components": []
},
{
"id": "lblBrisure_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 11,
"Text": "Brisures : ",
"TextColor": -1
},
"components": []
},
{
"id": "Brisure_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 11,
"Width": -2,
"Text": "{brisureProd_Item}",
"TextColor": -1
},
"components": []
}
]
},
{
"id": "Horizontal_Arrangement3_copy{id}",
"type": "HorizontalArrangement",
"properties": {
"BackgroundColor": 16777215,
"Width": -2
},
"components": [
{
"id": "lblInfos_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 10,
"Width": -2,
"Text": "Infos : ",
"TextColor": -1
},
"components": []
}
]
},
{
"id": "Space1{id}",
"type": "SpaceView",
"properties": {
"Height": -2,
"Width": -2
},
"components": []
},
{
"id": "Horizontal_Arrangement3{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 3,
"BackgroundColor": 16777215,
"Width": -2
},
"components": [
{
"id": "CVPrix_Item{id}",
"type": "MakeroidCardView",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"BackgroundColor": -11751600,
"ContentPaddingBottom": 2,
"ContentPaddingLeft": 2,
"ContentPaddingRight": 2,
"ContentPaddingTop": 2,
"CornerRadius": 10,
"Elevation": 0,
"Height": 40,
"Width": 102
},
"components": [
{
"id": "Prix_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 16,
"FontTypeface": 2,
"Width": -2,
"MaxLines": 21,
"Text": "{prixProd_Item}",
"TextAlignment": 1,
"TextColor": -1
},
"components": []
}
]
},
{
"id": "Space1_copy{id}",
"type": "SpaceView",
"properties": {
"Width": -2
},
"components": []
},
{
"id": "CVQty_Item{id}",
"type": "MakeroidCardView",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"BackgroundColor": -1118482,
"ContentPaddingBottom": 2,
"ContentPaddingLeft": 2,
"ContentPaddingRight": 2,
"ContentPaddingTop": 2,
"CornerRadius": 10,
"Elevation": 0,
"Height": 40,
"Width": 128
},
"components": [
{
"id": "Horizontal_Arrangement4{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"Height": -2,
"Width": -2
},
"components": [
{
"id": "Space2{id}",
"type": "SpaceView",
"properties": {
"Width": 3
},
"components": []
},
{
"id": "imgMoins_Qty{id}",
"type": "Image",
"properties": {
"Clickable": true,
"Height": 20,
"Width": 20,
"Picture": "{imgMoins_Item}"
},
"components": []
},
{
"id": "Space2_copy{id}",
"type": "SpaceView",
"properties": {
"Width": 3
},
"components": []
},
{
"id": "tbxQty_Item{id}",
"type": "TextBox",
"properties": {
"BackgroundColor": 16777215,
"CursorColor": -11751600,
"FontBold": true,
"FontSize": 18,
"Height": 45,
"Width": 50,
"Hint": 01,
"Text": "{Qty_Item}",
"InputType": 5,
"MaxLines": 6,
"TextAlignment": 1
},
"components": []
},
{
"id": "Space2_copy_copy{id}",
"type": "SpaceView",
"properties": {
"Width": 3
},
"components": []
},
{
"id": "imgPlus_Qty{id}",
"type": "Image",
"properties": {
"Clickable": true,
"Height": 20,
"Width": 20,
"Picture": "{imgPlus_Item}"
},
"components": []
},
{
"id": "Space2_copy_copy_copy{id}",
"type": "SpaceView",
"properties": {
"Width": 3
},
"components": []
}
]
}
]
}
]
},
{
"id": "Space1_copy1{id}",
"type": "SpaceView",
"properties": {
"Height": -2,
"Width": -2
},
"components": []
},
{
"id": "Horizontal_Arrangement5{id}",
"type": "HorizontalArrangement",
"properties": {
"AlignVertical": 2,
"Width": -2
},
"components": [
{
"id": "lblTotal_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 15,
"FontTypeface": 2,
"Width": 50,
"MaxLines": 21,
"Text": "Total :",
"TextAlignment": 1
},
"components": []
},
{
"id": "Total_Item{id}",
"type": "Label",
"properties": {
"FontBold": true,
"FontSize": 17,
"FontTypeface": 2,
"MaxLines": 21,
"Text": "{TotalProd_Item}"
},
"components": []
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
GreenVTestMyCart.aia (2.3 MB)
Hi Abdoulaye,
global img_item must be a component
Hello @RaYzZz Glad to see you again
So .. is that I am supposed to hang at this level?
Here is what I tried to do but it did not display the image.
Glad to see you too 
I imported your project and noticed there are quite a few areas we could optimize but for now, let’s focus on this specific issue.
When using dynamic schemas to create multiple objects, each instance needs a unique ID, which is usually defined in the JSON file under the
"keys": []
section.
Most commonly, this is done using something like id or a counter.
As you can see in your schema, every component requires a unique id for example:
"id": "VA_MyCart{id}"
Let me give you an example.
In the schema parameters where you defined the ClickedAdd procedure, I replaced the id with the number from the for each loop:
This way, 10 different schemas will be generated with IDs like:
VA_MyCart1, VA_MyCart2, VA_MyCart3, VA_MyCart4...
And accordingly, components like:
img_Item1, img_Item2, img_Item3, img_Item4...
Now here’s the important part:
To use .LoadImage, the first parameter must be the image component.
In our example, that would be something like img_Item1:
I hope that wasn’t too confusing!
Let me know if you still need help.
Happy 
oding
1 Like
Hi @RaYzZz
I hope that wasn’t too confusing!
No, let’s see, you just helped me see clearly of the creation of the creation of dynamic components in general. You have just demystify this extension. 
1 Like
By following and applying your example. Creation has disappeared entirely.
I put the loop at 1 to avoid creating duplicates in VSA_Items
So each “VA_MyCart {id}” which will be created should as you say to be unique except at the level of the img_Item image is still not displayed.
Your interventions have always been impactful.
It pushes me to learn more.
Thank you again
Here is the solution I found according to your logic and it works well.
1 Like
Thank you so much for your kind words 
That’s exactly the kind of spirit I admire, sharing knowledge and inspiring each other to grow.
Keep up the great wor!
1 Like
Hello All
I encounter a small problem of reflection on which approach adopted concerning :
1- Tumping of the action with the Generic Component when any ???. Click who will execute a creation @DynamicComponents via the parameters of a Schema Template.
Objective: to use the components generated by this Schema Template to make them Clickable in order to execute a precise action in particular thanks to this dynamic component.
Solution 1 : Proposed by @Still-learning
This solution is well functional but I cannot specify exactly the name of the clicked component because the blocking “When Any Image.Click” does not limit the clique to the ID of the dynamic component to which I want to affect the action but if I click on another image (Dynamically created or not) in this screen the action is triggered.
Solution 2 : Proposed by @RaYzZz
NB: Here, the trigger uses a static created button
But if I also use “When Any Click” I get the same functional result as the approach of @Still-learning
Questions :
-
How to use a static component as a trigger to create dynamic components with a template Schema by reusing the same GSheet/Tiny DB data?
-
How to specify in “When a component.Click” when one clicks only on a dynamic component of the Schema Model to execute a defined action precisely ? Thus assign each parameter to an action without this action is not carried out by other static components not concerned.
Good now my dear friends that everyone comes to debate their approach 
GValleyMarket.aia (2.3 MB)
Thanks To All
Hi,
I’m not sure I fully understood your questions, but I’ll try to answer 
If your issue is about avoiding duplicates when recreating, for example, a list of dynamic data, there are a few ways you can handle it:
- Add the individual data item to the existing list (recommended)
- Clear all list elements and recreate them from scratch (not recommended as it’s inefficient)
Since I’m not completely sure if this is what you meant, I’ll wait for your reply.
If you need a static image component to trigger a part of your code, you can simply call it like this:
For example
While for dynamic components, you need to use When any Image.Click like this:
Instead of DynamicComponents1.isDynamic, you could also use the not Already Handled block.
Here’s a more detailed explanation (see the Events section):
Again, since I’m not entirely sure if this is what you were asking, I’ll wait for your clarification.
I hope I didn’t write anything silly 
I’m in the middle of moving, and after working all day, I’m completely exhausted.
No my friend, you are absolutely right my questions did not make sense. Sorry, I hadn’t taken the time to make a rereading. : grinning_face_with_smiling_eyes:
Besides, I just corrected
Step 1: When I click I normally open the product detail with the corresponding data in online/offline. So everything is fine 
Step 2: Product details, to add to the basket when I click on the static button it is supposed to open the My Cart “basket” page by creating dynamic components via a Schema and by exporting the corresponding data in addition to the quantity value of the textbox.
I am supposed to use solution 2 to trigger creation but honestly it exceeded me. 
Step 3 : The My Cart page which displays the selected products which creates with the schema the Dynamic components.
- When I click on any dynamic image or not in this screen it triggers this error regardless of the solution I use.
Even this last solution that you have just offered me despite the confusion of ideas and my questions earlier.
Same error if I click on other images !
- How can I add or decrease the quantity and make the dynamic calculation of the total amount according to the value of the textbox created dynamically and also according to the static text which is in the product details page ???
Mine wasn’t a real explanation, I just wanted to make you understand the concept of {id}
@Still-learning’s explanation is perfect for your purpose.
2 Likes
Hi
I was inspired by your solution below to try to trigger an action from a static button otherwise rest assured Big Gran Master What you @Prem_Gupta @Still-learning @Prem_Gupta taught me about the use of {id} was more explicit than the documentation of the creation of the extension on dynamic construction via the Schema template and I assimilated this lesson.
That all this helps other amateurs and enthusiasts of Kodular like me in the future.
With “When Any Image.Click” the two approaches work like honey but why when I click on other images for example I meet this error despite the fact that I specified.
Im sorry what error did you get?
Hello Friends
Someone can help me please
I am trying to create when I click on this static button this result in image.
Thank you for your invaluable support
I cannot trigger the action.
Hi,
You could dynamically create the button by calling it CV_Ajouter{idOfClickedImage} and When Any CardView.Click remove CV_Ajouter from the ComponentID.
Or another method, when you click on the product image you save the id in a global variable and recall it when you go to create the Schema.
Ok i’ll try it