Usually, when we’re chatting with the bot in Copilot Studio, we’re receiving just plain text messages. Did you know that there’s a possibility to tweak them a bit by using an adaptive card? Check out below, where I’m going to describe what is it.
Adaptive card – what’s that?
An adaptive card is a form of sending messages that can, as the name suggests, adapt to your needs. It’s based on the framework prepared by Microsoft. The design is based on the JSON syntax with a proper schema definition. An example adaptive card JSON looks like this:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "${creator.profileImage}",
"altText": "${creator.name}",
"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.3"
}And it produces following card in the designer (see: https://adaptivecards.io/designer/):
Doesn’t it look nice? But…
…there are some limitations!
What you need to consider when creating an adaptive card in Copilot Studio is:
- make sure that you’re using a correct schema version:
When you enter the adaptive card designer, you should quickly notice a warning message. Don’t ignore it:
It states that selected host app (see the top of the screenshot) doesn’t support the schema version that was choosen in the upper right corner. Make sure to choose both the correct host app and the target version to avoid any errors.
- make sure that you’ve choosen a proper host app:
In the dropdown you have, I assume, two options to choose, which apply to Copilot Studio – Bot Framework WebChat and Microsoft Teams:
Option that you’d choose depends on your needs – for a chatbot used in MS Teams the choice is obvious. What you’d need to make sure is that card you’ve designed is supported by all the channels that you’re going to publish to. The best way to check it is to verify what controls are not available for an app here: https://learn.microsoft.com/en-us/adaptive-cards/resources/partners
Unfortunately, Copilot Studio is not mentioned on the Host App list, so sometimes you’d need to try if it works on the test chat, before publishing to production. 😉
Formatting issues
Recently, a lot of people were asking about how to format an adaptive card, so that it can take dynamic values. It’s a very easy task! Let me explain it step by step:
1. Open an adaptive card action’s properties:
2. Select the button Edit JSON and choose Edit formula – that way the adaptive card JSON is being converted to a Power Fx Record type. This enables you to put dynamic values:
3. Type any expression or place a variable as a value of the field that you’d like to edit:
Here I’ve used string interpolation ($”{EXPRESSION}”), which’s a nice feature in Power Fx to make the string look more elegant. 😎 But you could also format it like: Today(). Always make sure though that the result from an expression is of correct type that’s expected by the field.
Summary
Isn’t the feature nice? It gives a lot more freedom in how your messages would look, when chatting with a chatbot. Of course, for simple cases I’d stick to the simple Question action, but if you need to prepare something more fancy, then an adaptive card is definitely a way to go!
Happy designing!
Artur Stepniak
Links:
Schema explorer: https://adaptivecards.io/explorer/
Schema designer: https://adaptivecards.io/designer/
MS Learn resources: https://learn.microsoft.com/en-us/adaptive-cards/
Host app docs: https://learn.microsoft.com/en-us/adaptive-cards/resources/partners
Nice tutorial on adaptive cards: