Actionable messages designed using the Adaptive Card format enable you to extend the functionality of sending actionable messages in Microsoft Teams, allowing recipients to take quick action right within the platform. An Adaptive card renders in addition to or in place of the message body. The card provides short information in visually rich layout format that the recipient can read quickly before giving a response.
The card provides short information that the recipient can read quickly before giving a response.
Below we will consider how to create Adaptive Card in MS Teams using Send message action within skybow solution studio. The ‘Send message’ action allows you to send an actionable message in an Adaptive Card format in the chat channel or directly to the user. More information about the action here.
To send message in MS Teams in Adaptive card format you need to do following steps:
1. Create the JSON for the Adaptive Card you want to send. Use the Actionable Message Designer to design your card. Here’s an example of a JSON for an adaptive card:
{ let ownerEmail = [[Manager]];
let userImage = `${[[@Web.Url]]}/_layouts/15/userphoto.aspx?size=S&accountname=${ownerEmail}`;
let members = [[Members]].map(user => user.Email).join(', ');
let urlToRequests = [[@Web.Url]] + "/SitePages/Agenda.aspx";
return JSON.stringify(
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "New Meeting",
"style": "heading",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": userImage,
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Organized by: [[Manager.Title]]",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "[[Manager.Email]]",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "Name:",
"value": [[Title]]
},
{
"title": "Created Date:",
"value": [[Date]]
},
{
"title": "Attendees:",
"value": members
},
{
"title": "Location:",
"value": [[Location]]
},
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "View Details",
"url": urlToRequests,
"role": "Button"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.6"
}); }
2. Add Send message action. This action is available in Scheduled and Triggered actions in skybow solution studio.
3. Paste the JSON code into the "Message" field in Send message action. Set option ‘Message is an adaptive card’ to true:
4. Execute the action.
The following image is an example of the Adaptive card message send in a channel: