Повторяющиеся элементы с помощью шаблонов Adaptive Cards

Question

Я создаю адаптивную карту, которая требует повторения некоторых элементов в массиве с помощью Designer . Я пытаюсь создать список элементов для счета-фактуры, поэтому мне нужно повторить элементы в корзине ....

У меня есть шаблон с этим контейнером с элементом, который нужно повторить:

   {
            "type": "Container",
            "items": [
                {
                    "type": "Container",
                    "items": [
                        { 
                            "$data": "${items}",
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "wrap": true,
                                            "text": "${quantity}"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "spacing": "Medium",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "wrap": true,
                                            "text": "${product.name}"
                                        }
                                    ],
                                    "width": "stretch"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "${cost}",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "id": "chevronDown1",
                                    "spacing": "Small",
                                    "verticalContentAlignment": "Center",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "selectAction": {
                                                "type": "Action.ToggleVisibility",
                                                "title": "collapse",
                                                "targetElements": [
                                                    "cardContent1",
                                                    "chevronUp1",
                                                    "chevronDown1"
                                                ]
                                            },
                                            "url": "https://adaptivecards.io/content/down.png",
                                            "width": "20px",
                                            "altText": "collapsed"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "id": "chevronUp1",
                                    "isVisible": false,
                                    "spacing": "Small",
                                    "verticalContentAlignment": "Center",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "selectAction": {
                                                "type": "Action.ToggleVisibility",
                                                "title": "expand",
                                                "targetElements": [
                                                    "cardContent1",
                                                    "chevronUp1",
                                                    "chevronDown1"
                                                ]
                                            },
                                            "url": "https://adaptivecards.io/content/up.png",
                                            "width": "20px",
                                            "altText": "expanded"
                                        }
                                    ],
                                    "width": "auto"
                                }
                            ]
                        },
                        {
                            "type": "Container",
                            "id": "cardContent1",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "Container",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "isSubtle": true,
                                            "wrap": true,
                                            "text": "${product.description}"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                }
            ],
        }

и образцы данных, которые выглядят примерно так:

{
    "items": [
        { 
            "quantity": "1", 
            "unitCost": "55", 
            "cost": "55", 
            "product": {
                "name": "Product 1", 
                "description": "Lorem ipsum dolor sit amet"
            }
        }, { 
            "quantity": "2", 
            "unitCost": "55", 
            "cost": "55", 
            "product": {
                "name": "Product 2", 
                "description": "Lorem ipsum dolor sit amet"
            }
        }
    ]
}

Я следовал примеру здесь , но не могу получить тот же эффект ... Я предполагаю, что это потому что у меня есть вложенные элементы.

Answer 1

чтобы делать то, что вы хотите достичь, вам нужно использовать динамически сгенерированные targetElements и ID.

Я использовал ваш шаблон и исправил его, чтобы здесь был рабочий пример: https://www.madewithcards.io/cards/toggleable-description-in-array

Вот код для справки:

{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [{
        "type": "TextBlock",
        "text": "Items:",
        "size": "Medium",
        "weight": "Bolder"
    },
    {
        "type": "Container",
        "$data": "${items}",
        "items": [{
                "type": "ColumnSet",
                "columns": [{
                        "type": "Column",
                        "items": [{
                            "type": "TextBlock",
                            "wrap": true,
                            "text": "${quantity}"
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "spacing": "Medium",
                        "items": [{
                            "type": "TextBlock",
                            "wrap": true,
                            "text": "${product.name}"
                        }],
                        "width": "stretch"
                    },
                    {
                        "type": "Column",
                        "items": [{
                            "type": "TextBlock",
                            "text": "${cost}",
                            "wrap": true
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "id": "chevronDown${product.name}",
                        "spacing": "Small",
                        "verticalContentAlignment": "Center",
                        "items": [{
                            "type": "Image",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "title": "collapse",
                                "targetElements": [
                                    "${product.name}",
                                    "chevronUp${product.name}",
                                    "chevronDown${product.name}"
                                ]
                            },
                            "url": "https://adaptivecards.io/content/down.png",
                            "width": "20px",
                            "altText": "collapsed"
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "id": "chevronUp${product.name}",
                        "isVisible": false,
                        "spacing": "Small",
                        "verticalContentAlignment": "Center",
                        "items": [{
                            "type": "Image",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "title": "expand",
                                "targetElements": [
                                    "${product.name}",
                                    "chevronUp${product.name}",
                                    "chevronDown${product.name}"
                                ]
                            },
                            "url": "https://adaptivecards.io/content/up.png",
                            "width": "20px",
                            "altText": "expanded"
                        }],
                        "width": "auto"
                    }
                ]
            },
            {
                "type": "Container",
                "id": "${product.name}",
                "isVisible": false,
                "items": [{
                    "type": "Container",
                    "items": [{
                        "type": "TextBlock",
                        "isSubtle": true,
                        "wrap": true,
                        "text": "${product.description}"
                    }]
                }]
            }
        ]
    }
]

}

Данные остаются нетронутыми и взяты из вашего образца.