CODEWITHSUNDEEP
microsoft-teamsadaptive-cards
Andrew Coad
Andrew Coad

Reputation: 345

What is the correct way to return an AdaptiveCard from a Message Extension?

Environment: Node JS v10.15.3, botbuilder v4.7.2, adaptive cards v2.5

From within handleTeamsMessagingExtensionQuery, I can pass back a simple Hero Card and it displays just fine but I'm stumped on getting an Adaptive Card passed back. Here is the code:

        const card = CardFactory.adaptiveCard({
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
            {
               "type": "TextBlock",
               "text": "This is an adaptive card"
            }
        ],
        "actions": [
            {
               "type": "Action.Submit",
               "title": "OK"
            }
        ]
      });
    const preview = CardFactory.thumbnailCard("Thumbnail card", ['https://www.dropbox.com/s/jb5nhnkla12dcj4/wi-day-lightning.png?dl=1']);

    return {
        composeExtension: {
            type: 'result',
            attachmentLayout: 'list',
            attachments: [{ ...card, preview }]
        }
    };
}

This will display the thumbnail card but not the adaptive card. I checked SO prior to posting this and the only posting that talks about this is this one: How to use Adaptive Cards on Teams Messaging Extension? Unfortunately, I can't get that code to even run so I'm stumped.

Any guidance would be very welcome. (P.S. - there are no examples on MS or adaptivecards.io that cover this case as far as I can see)

Regards, ac

Upvotes: 0

Views: 611

Answers (1)

Andrew Coad
Andrew Coad

Reputation: 345

So I've answered my own question. The code above works just fine. What I didn't know, because the docs don't tell you, is that Teams initially displays the preview card (which, in my case is a thumbnail card). Tap on the thumbnail to render the adaptive card and place it into the message stream.

All along, I was trying, and expecting, to see the adaptive card displayed as the initial display. Thanks to @mnkypete for providing that critical piece of information in this post: Microsoft Teams bot - debug link unfurling

ac

Upvotes: 2

Related Questions