使用自适应卡片模板重复元素

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"
            }
        }
    ]
}

我遵循了 example here 但我无法获得相同的效果...我假设这是因为我有嵌套元素。

Answer 1

要实现您想实现的目标，您需要使用动态生成的目标元素和 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}"
                    }]
                }]
            }
        ]
    }
]

}

数据未受影响，取自您的样本。

使用自适应卡片模板重复元素

Repeating elements with Adaptive Cards Templating

adaptive-cards