How to use Dynamic Components with Schema

EDIT: I will keep this topic for all my questions regarding this project of mine, since this is my first project with Dynamic Components and Schema. I belive many can get answers by reading this topic, since I will edit first post with my questions and solutions. If any moderator is against it please PM me!

1st question: (Get value/text from label)

1st question

Hi.

I have been playing with something I’m not familiar with, but I’ve read many posts and guides to try out how Schema works.

For my family app, I have today a shopping list. But now I also want to make a dinnerlist where me and my family can choose the dinners we want each week. When we choose dinner it will be added to shopping list.

But I have no idea how to get the data from the list I’ve created.

I’ve got alot of help from @dohop96 on PM(Would not manage this if not :blush:) - But I don’t feel I can “use” him for everything I need help with, and that won’t help others looking for same answers :see_no_evil:


I have tried out many suggestions I have read in this forum about creating buttons out of Dynamic Components, and some of them works for me, but it only gives the ID of the component, but not the text within the component, if you know what I mean :hear_no_evil:

I found a way to get the text out from the list, but it only gives me the last data in list(see blocks and picture)

Here are my schema, blocks and a picture of how it looks:

{
  "name": "DynamicTests",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "<your name>",
  "platforms": [
    "creator.kodular.io"
  ],
  "extensions": {},
  "keys": [
    "id",
    "Middagsbilde",
    "Middagsnavn",
    "Ingredienser",
    "Tidsbruk"
    ],
  "components": [
    {
      "id": "Card_View1{id}",
      "type": "MakeroidCardView",
      "properties": {
        "AlignHorizontal": 3,
        "BackgroundColor": 4293848814,
        "CornerRadius": 30,
        "Width": -2
      },
      "components": [
        {
          "id": "Horizontal_Arrangement1{id}",
          "type": "HorizontalArrangement",
          "properties": {
            "AlignVertical": 2,
            "BackgroundColor": 16777215,
            "Height": -2,
            "Width": -2
          },
          "components": [
            {
              "id": "Middagsbilde{id}",
              "type": "Image",
              "properties": {
                "Height": 150,
                "Width": 150,
                "Picture": "{Middagsbilde}"
              }
            },
            {
              "id": "Space1{id}",
              "type": "SpaceView"
            },
            {
              "id": "VA_Navn_og_Ingredienser{id}",
              "type": "VerticalArrangement",
              "properties": {
                "AlignHorizontal": 3,
                "Height": -2
              },
              "components": [
                {
                  "id": "Space5{id}",
                  "type": "SpaceView",
                  "properties": {
                    "Height": 20
                  }
                },
                {
                  "id": "Middagsnavn{id}",
                  "type": "Label",
                  "properties": {
                    "FontBold": true,
                    "FontItalic": true,
                    "FontSize": 15,
                    "Width": 220,
                    "Text": "{Middagsnavn}",
                    "TextAlignment": 1
                  }
                },
                {
                  "id": "Label1{id}",
                  "type": "Label",
                  "properties": {
                    "Text": ".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
                  }
                },
                {
                  "id": "Ingredienser{id}",
                  "type": "Label",
                  "properties": {
                    "Clickable": true,
                    "FontItalic": true,
                    "FontSize": 10,
                    "Width": 220,
                    "Text": "{Ingredienser}",
                    "TextAlignment": 1
                  }
                }
              ]
            },
            {
              "id": "Space4{id}",
              "type": "SpaceView",
              "properties": {
                "Width": -2
              }
            },
            {
              "id": "VA_LeggTil_og_Tidsbruk{id}",
              "type": "VerticalArrangement",
              "properties": {
                "AlignHorizontal": 2,
                "Height": -2
              },
              "components": [
                {
                  "id": "LeggTilHandlevogn{id}",
                  "type": "Image",
                  "properties": {
                    "Clickable": true,
                    "Height": 60,
                    "Width": 60,
                    "Picture": "addtocart.png"
                  }
                },
                {
                  "id": "Space3{id}",
                  "type": "SpaceView",
                  "properties": {
                    "Height": -2
                  }
                },
                {
                  "id": "Tidsbruk{id}",
                  "type": "Label",
                  "properties": {
                    "Text": "{Tidsbruk}"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

As you can see in picture, with these blocks I use I only get the last ingredients, no matter what ‘ingredient label’ I click.

Solution for my 1st question:

Solution

How to use Dynamic Components with Schema - #2 by dora_paz


2nd question: (Get data by pressing image)

2nd question

How to use Dynamic Components with Schema - #4 by Choofa

Solution for 2nd question:

Solution

How to use Dynamic Components with Schema - #8 by dora_paz


3rd question: (Split text(ingredients list) for upload into 3 cells in Airtable)

3rd question

How to use Dynamic Components with Schema - #10 by Choofa

Solution for 3rd question:

Solution

How to use Dynamic Components with Schema - #14 by dora_paz


4th question: (Do something(hide/show) when press on any CardView based on label value inside CardView)

4th question

How to use Dynamic Components with Schema - #16 by Choofa

Solution for 4th question:

Solution

With help in PM I got this solution:

Then I asked how he got that ID, since I had problems finding it. He got a great answer for that, just add a label inside app, than ‘When any “component” click’ set label text to get component ID.

5th question: (Update shoppinglist with new items)

Solution: None yet

2 Likes

Try this

5 Likes

It works :smiley: Thank you so much!

1 Like

Hi again @dora_paz

I know I marked the answer as Solution, and it still is, but I have another question. (Don’t want to make another topic when the question is regarding the same blocks, schema and picture)

As I wrote I want to be able to press the cart image, then the ingredients would be uploaded to airtables(that I think I will manage). But how do I get the data from label when pressing the image?

I’ve tried a few ways now with different blocks, just modified the solution you gave me for the label, but seems like that’s not how I can do this? :thinking:

Here’s my last blocks I tried that does not work.

1 Like

I have the same blocks and its worked fine for me

Your image’s component id is in the form Middagsbilde{number} so when any image click in order to get index you have to replace Middagsbilde with an empty string as I did in my example above. Use Do it to debug your blocks and I’m sure you will find it

How can this work for you with same blocks, but not me?

Ok, I will have a look, but I’ve tried so many ways now it’s frustrating :S
btw, what do you mean when you say " in order to get index you have to replace Middagsbilde with an empty string"?

Try this and see if it works for you

2 Likes

omg, I thought about that at first, but then I figured it can’t be that easy, because the label contains text, not a picture, so I tried with the picture block and so on.

Your blocks works fine :slight_smile:

Thanks again :smiley:

1 Like

Hei again :see_no_evil: :sweat_smile: @dora_paz (Hope it’s ok to tag you, if not please let me know and I will stop :slight_smile: )

What am I doing wrong here? I’ve tried different ways to do this, but I don’t seem to get it right :woozy_face:

It won’t upload to spreadsheet.

What I try to do is split the ingredients by “,” with “\n” when press on marked picture to get new lines, and then upload to spreadsheet. But then I get this error?

Remove select list item list block. Just use make a list → replace all text → global TilHandleKurv

2 Likes

Thanks, but that I have tried, but that solution uploads the three ingredients in a single cell, I want it in 3 cells in a single collumn named “Handleliste”. That’s my problem, I can’t seem to find out how to split the ingredients into a list of 3 and upload that to spreadsheet.

:slight_smile:

So actually you want to add 3 cells in a column

Replace call spreadsheet.create row block in above image with the following and see if it works

2 Likes

It works :smiley: lol, I feel so stupid, but again very happy to be able to get help :slight_smile:

I hope I will manage the rest from now on (fingers crossed) :stuck_out_tongue:

Have a nice day!

1 Like

Hi again.
I’m now trying to do something I can’t figure out. I’m trying the method you showed, but it doesnt seem to work for this?

I’ve tried a few methods, this is my latest, but not working ofc :frowning:

In my menu I have a picture and a label, the label gets the name from Airtables. I want to be able to hide and show arrangements based on the value/text in the label.

Is it possible, and are my blocks very wrong?

Schema:

{
  "name": "Template_Meny",
  "metadata-version": 1,
  "extension_version": 5,
  "author": "<your name>",
  "platforms": [
    "creator.kodular.io"
  ],
  "extensions": {},
  "keys": [
    "id",
    "Menybilde",
    "Menytext"
  ],
  "components": [
    {
      "id": "Menybox{id}",
      "type": "MakeroidCardView",
      "properties": {
"CornerRadius": 30,
        "AlignHorizontal": 3,
        "AlignVertical": 2,
        "BackgroundColor": -7876885,
        "Elevation": 10,
        "FullClickable": true,
        "Height": 200,
        "Width": 250
      },
      "components": [
        {
          "id": "Menybilde{id}",
          "type": "Image",
          "properties": {
            "Height": -2,
            "Picture": "{Menybilde}"
          }
        },
        {
          "id": "Menytext{id}",
          "type": "Label",
          "properties": {
            "FontBold": true,
            "FontItalic": true,
            "FontSize": 18,
            "Text": "{Menytext}"
          }
        }
      ]
    }
  ]
}

Now that I have a shoppinglist that works. I get collumns from airtable that I insert into global lists.
Dynamic Component extension creates the components with templates/schema. Everything works great!

But when I add new items to the shoppinglist from inside app I want the list to be updated. Is this possible when using schema? I’ve searched for solutions, but everything I find is how to do it when not using template/schema.

When you add new items you have to re create the list , so make a procedure that deletes all dynamic components and then re create list

image

1 Like

Ok, but I guess it will remove EVERY used ID? It contains ID of other lists also. The best thing to do then is to use different Dynamic Components? Like Dynamic Components1 - Dynamic Components2 etc.?

1 Like

Is it possible to set property to more then 1 dynamic component? I’m just testing something out, but not matter what I do I can’t get it to work :-/

My last tested blocks: