How-To Design Adaptive Cards
Introduction
Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into a native UI that automatically adapts to its surroundings. It helps design and integrate lightweight UI for all major platforms and frameworks.
Instructions
Webhook Cards Design
You can use Adaptive Cards and Types of Adaptive Cards to generate your MS Teams notifications design.
You can also look into a list of sample adaptive cards created by Microsoft at Samples and Templates and you can use this to adapt your adaptive card design.
You can also navigate to this medium article: How to send Messages in Microsoft Teams using Incoming Webhook Adaptive Card. There it is explained how you can send a very simple webhook with the following body:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"contentUrl": null,
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)"
},
{
"type": "Image",
"url": "https://www.film-tv-video.de/wp-content/uploads/2020/09/B_0920_logotechtriq.jpg"
}
]
}
}
]
}You can do that either using Postman and sending a POST call to the webhook URL with the above JSON body or using curl:
curl -X POST \
-H "Content-Type: application/json" \
-d @<path_to_your_file>/filename.json \
<webhook_url> Where the <path_to_your_file> is the path to your JSON file, containing the adaptive card design and the <webhook_url> is the webhook URL generated by Microsoft when creating the hook.
If everything is OK, you should get a 200 status code and receive the notification in the MS Teams channel:
Incoming Notification
And here you can notice that the image and the name we configured earlier in the webhook configuration are displayed as the logo and the sender’s name.
Adaptive Cards Designer
Microsoft is even providing a dedicated designer for those notifications, where you can easily design your custom notification (Designer | Adaptive Cards).
The Designer is a great tool to get more familiar with the webhook card design.
After you finish your card design, you need to click on the Copy card payload button to copy the JSON payload of your card.
Export the Adaptive Card JSON
If you are using the designer, you MUST change the JSON structure to this:
{
"type":"message",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.adaptive",
"contentUrl":null,
"content":{
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
"type":"AdaptiveCard",
"version":"1.5",
"msTeams":{
"width":"full"
},
"body":[
"<adaptiveCardsBody>"
]
}
}
]
}Where the <adaptiveCardsBody> is the actual body of the adaptive card.
Adaptive Card Example
Here I have included a little bit more complicated Adaptive card design, created mostly using the Adaptive Cards Designer:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"contentUrl": null,
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"msTeams": {
"width": "full"
},
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://www.telestream.net/company/press-kit/download/Logos/Logo-TelestreamCloud.png",
"size": "Medium"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Quality Control Report"
},
{
"type": "TextBlock",
"size": "Small",
"text": "Generated {{DATE(2022-06-03T06:08:39Z,SHORT)}}",
"isSubtle": true,
"spacing": "None"
}
],
"width": "full"
}
]
},
{
"type": "TextBlock",
"text": "Filename *${filename}*",
"wrap": true,
"horizontalAlignment": "Center",
"size": "Medium",
"weight": "Bolder",
"color": "Attention",
"separator": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Critical Errors:",
"value": "5"
},
{
"title": "Warnings:",
"value": "3"
},
{
"title": "Info:",
"value": "7"
}
],
"separator": true,
"spacing": "Large"
},
{
"type": "TextBlock",
"text": "You can download the quality control report from the links below:",
"wrap": true,
"separator": true
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Download PDF Report",
"url": "${pdfUrl}"
},
{
"type": "Action.OpenUrl",
"title": "Download XML Report",
"url": "${xmlUrl}"
}
]
}
}
]
}This above JSON body would generate a notification with the following design in MS Teams:
MS Teams Notification Card