Adaptive card Bot Framework composer

Question

I am learning Bot framework composer. I am trying to add adaptive card using https://adaptivecards.io/designer. I copied the card payload and paste it in the bot responses. It look like this

[import](common.lg)

#title()
-adaptive card

# adaptivecardjson()

- ```
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${title}",
            "wrap": true,
            "style": "heading",
            
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}```


# AdaptiveCard()
[Activity
    Attachments = ${json(adaptivecardjson())}
]

In send a response

- ${AdaptiveCard()}

I tested the bot in web chat but I'm getting output like this

{

“type”: “AdaptiveCard”,

“version”: “1.0”,

“body”: [

{

  "type": "TextBlock",

  "text": "Pick up where you left off?",

  "weight": "bolder"

},

Can anyone please help me to implement adaptive cards in bot framework composer.

Answer 1

If the send response is "- ${AdaptiveCard()}" then it sounds like you are setting the Text property of the response instead of the attachments. Cards need to be added to the attachments.

You can add attachments via the plus menu like this

Then add a new attachment using the Adaptive Card template in the subsequent menu and replace the default card with yours.

In the end, your send activity should look like this if you view it in the code

# SendActivity_BlahBlah
[Activity
    Attachments = ${json(adaptivecardjson())} 
]