[Authoring] Expanding from template data doesn't work on arrays ($data: someArray)

Target Application

Microsoft Teams

Application Operating System

Windows

Schema Version

1.3

Problem Description

Hello,

⚠️⚠️⚠️ LE: the issue was due to preview mode turned off, see next comment

I’ve tried using the designer and also the node package for templating (adaptivecards-templating) and both yield the same results.

I have a custom card in the works, but it looks like that not even the designer works.

When binding $data which contains an array the resulting renderer should repeat each item from that array with the corresponding data.

Even the basic example from the designer doesn’t work; I tried it on so many other devices, different browsers, they all don’t populate:

Also the JSON output (with the card payload) from the adaptivecards-templating node package doesn’t complete the placeholders

Expected Outcome

For each item in the array the data should be bound in the resulting render.

Actual Outcome

Only the placeholders are present like ${key}: ${value}.

Card JSON

//payload

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${title}"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "style": "Person",
                            "url": "${creator.profileImage}",
                            "size": "Small"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "Bolder",
                            "text": "${creator.name}",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Created {{DATE(${createdUtc},SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ],
                    "width": "stretch"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "${description}",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${properties}",
                    "title": "${key}:",
                    "value": "${value}"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "Set due date",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "Input.Date",
                        "id": "dueDate"
                    },
                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "placeholder": "Add a comment",
                        "isMultiline": true
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "${viewUrl}"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

//data

{
    "title": "Publish Adaptive Card Schema",
    "description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
    "creator": {
        "name": "Matt Hidinger",
        "profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
    },
    "createdUtc": "2017-02-14T06:08:39Z",
    "viewUrl": "https://adaptivecards.io",
    "properties": [
        {
            "key": "Board",
            "value": "Adaptive Cards"
        },
        {
            "key": "List",
            "value": "Backlog"
        },
        {
            "key": "Assigned to",
            "value": "Matt Hidinger"
        },
        {
            "key": "Due date",
            "value": "Not set"
        }
    ]
}

Repro Steps

No response

[JeanRoca]

Looks like this issue has been resolved? Let us know if there’s anything we can do to help further. Thanks! @JeanRoca J.P. Roca FTE - it might be worth tracking investigating a UX improvement around template binding and needing to click the preview button…

So something that indicates one must be in preview mode before seeing templating changes, right?

Yes 😃 . I’ve checked the designer on multiple different devices and all of them had preview mode off so you’d see placeholders in the rendered card. Also there’s no visual cue to whether the preview mode is on or off

Preview mode defaulting to off is intended behavior. As far as visual cues we currently change the color of the button to indicate selection as shown here:

Preview Mode OFF:

Preview Mode ON:

I do think there is room for improvement though.

[JeanRoca]

Looks like this issue has been resolved? Let us know if there’s anything we can do to help further. Thanks! @JeanRoca - it might be worth tracking investigating a UX improvement around template binding and needing to click the preview button…

Well the “issue” on my second comment. I was under the impression that $data from “level 1” would also be bound to the nested elements underneath it; so then I can reference it (eg: multi-dimensional arrays; for example, rendering an array of countries and each country contains 3 top cities by population)

I see now. Here is an example of how to achieve this:

Card Payload:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "FactSet",
            "$data": "${countries}",
            "facts": [
                {
                    "$data": "${take(topCities, 2)}",
                    "title": "City:",
                    "value": "${cityName}"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

Data Payload:

{
    "countries": [
        {
            "countryName": "Canada",
            "topCities": [
                {
                    "cityName": "Montreal",
                    "population": 1000
                },
                {
                    "cityName": "Vancouver",
                    "population": 2000
                }
            ]
        }
    ]
}