1

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.

ye_c_
  • 85
  • 6

1 Answers1

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

Add Attachment Menu

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())} 
]
Negative Eddy
  • 401
  • 2
  • 4
  • @eddy How to add an image...suppose if I have template json and data json...how to implement it? – ye_c_ Dec 03 '21 at 05:38
  • Images are just links set in the various card types. https://learn.microsoft.com/en-us/composer/how-to-send-cards?tabs=v2x. In an Adaptive Card it would be the image item and you set the URL property, – Negative Eddy Dec 04 '21 at 14:10