Adaptive Cards with Microsoft Teams – JSON Templates Part 1
In a continuation of my previous article, Adaptive Cards with Microsoft Teams with Examples, we continue with the details of how to create these Adaptive Cards with authored JSON templates. The templates can be used as-is, edited to suit your organization’s needs, or used as a launching point to customize your templates.
Samples and Templates of Adaptive Cards for Microsoft Teams
This is exciting as these select samples and templates are created and offered for Microsoft Teams to show what you can create. These can be copied, edited, and tweaked to create any possible scenario. There are limitless scenarios to design and create.
Part 1 of this series includes templates for Activity Update Sample, Activity Update with Labels, Calendar Reminder, and Calendar Reminder with Labels.
Activity Update Sample
Data JSON:
{
"title": "Publish Adaptive Card Schema",
"description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"creator": {
"name": "Matt Hidinger",
"profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
},
"createdUtc": "2017-02-14T06:08:39Z",
"viewUrl": "https://adaptivecards.io",
"properties": [
{ "key": "Board", "value": "Adaptive Cards" },
{ "key": "List", "value": "Backlog" },
{ "key": "Assigned to", "value": "Matt Hidinger" },
{ "key": "Due date", "value": "Not set" }
]
}
Template JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}",
"wrap": true,
"style": "heading"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "${creator.profileImage}",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${creator.name}",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE(${string(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.0"
}
Activity Update with Labels
Data JSON:
{
"title": "Publish Adaptive Card Schema",
"description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"creator": {
"name": "Matt Hidinger",
"profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
},
"createdUtc": "2017-02-14T06:08:39Z",
"viewUrl": "https://adaptivecards.io",
"properties": [
{ "key": "Board", "value": "Adaptive Cards" },
{ "key": "List", "value": "Backlog" },
{ "key": "Assigned to", "value": "Matt Hidinger" },
{ "key": "Due date", "value": "Not set" }
]
}
Template JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "${title}",
"style": "heading"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "person",
"url": "${creator.profileImage}",
"size": "small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "${creator.name}",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(${string(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",
"label": "Enter the due date",
"id": "dueDate"
},
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"label": "Add a comment"
}
],
"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.0"
}
Calendar Reminder
Data JSON:
{
"kind": "calendar#event",
"etag": "\"3007572097704000\"",
"id": "_6sp3gdjcksmab9kc4rgq1aldjelm8chhcgp66phocg_20191105T150000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=XzZzcDNnZGoxNjBxamdiYjRja3NtYWI5a2M0cmplYjlwNjhyM2diOXA2Z3FtOGNoaGNncDY2cGhvY2dfMjA2xO1UwMDAuZ0Bt",
"created": "2016-12-29T06:35:05.000Z",
"updated": "2018-04-24T14:04:50.184Z",
"summary": "Adaptive Card design session",
"location": "Conf Room 112/3377 (10)",
"creator": {
"email": "[email protected]",
"displayName": "John Doe",
"self": true
},
"organizer": {
"email": "[email protected]",
"displayName": "John Doe",
"self": true
},
"start": {
"dateTime": "2019-11-05T12:30:00-08:00",
"timeZone": "America/Los_Angeles"
},
"end": {
"dateTime": "2019-11-05T13:30:00-08:00",
"timeZone": "America/Los_Angeles"
},
"recurringEventId": "_6sp3gdj160qjgbb4cksmab9kc4rjeb9p68r3gb9p6gqm8chhcgp66phocg",
"originalStartTime": {
"dateTime": "12:30",
"timeZone": "America/Los_Angeles"
},
"visibility": "private",
"iCalUID": "7286a058-de9e-4a77-9268-945d21d2cf8d",
"sequence": 4,
"reminders": {
"useDefault": false,
"overrides": [
{
"method": "popup",
"minutes": "5"
},
{
"method": "popup",
"minutes": "15"
},
{
"method": "popup",
"minutes": "30"
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "Your meeting about \"Adaptive Card design session\" is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pmDo you want to snooze or do you want to send a late notification to the attendees?",
"body": [
{
"type": "TextBlock",
"text": "${summary}",
"size": "Large",
"weight": "Bolder",
"wrap": true,
"style": "heading"
},
{
"type": "TextBlock",
"text": " ${location} ",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}",
"isSubtle": true,
"spacing": "None",
"wrap": true
},
{
"type": "TextBlock",
"text": "Snooze for",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"value": "${reminders.overrides[0].minutes}",
"choices": [
{
"$data": "${reminders.overrides}",
"title": "${minutes} minutes",
"value": "${minutes}"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Snooze",
"data": {
"x": "snooze"
}
},
{
"type": "Action.Submit",
"title": "I'll be late",
"data": {
"x": "late"
}
}
]
}
Calendar Reminder with Labels
Data JSON:
{
"kind": "calendar#event",
"etag": "\"3007572097704000\"",
"id": "_6sp3gdjcksmab9kc4rgq1aldjelm8chhcgp66phocg_20191105T150000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=XzZzcDNnZGoxNjBxamdiYjRja3NtYWI5a2M0cmplYjlwNjhyM2diOXA2Z3FtOGNoaGNncDY2cGhvY2dfMjA2xO1UwMDAuZ0Bt",
"created": "2016-12-29T06:35:05.000Z",
"updated": "2018-04-24T14:04:50.184Z",
"summary": "Adaptive Card design session",
"location": "Conf Room 112/3377 (10)",
"creator": {
"email": "[email protected]",
"displayName": "John Doe",
"self": true
},
"organizer": {
"email": "[email protected]",
"displayName": "John Doe",
"self": true
},
"start": {
"dateTime": "2019-11-05T12:30:00-08:00",
"timeZone": "America/Los_Angeles"
},
"end": {
"dateTime": "2019-11-05T13:30:00-08:00",
"timeZone": "America/Los_Angeles"
},
"recurringEventId": "_6sp3gdj160qjgbb4cksmab9kc4rjeb9p68r3gb9p6gqm8chhcgp66phocg",
"originalStartTime": {
"dateTime": "12:30",
"timeZone": "America/Los_Angeles"
},
"visibility": "private",
"iCalUID": "7286a058-de9e-4a77-9268-945d21d2cf8d",
"sequence": 4,
"reminders": {
"useDefault": false,
"overrides": [
{
"method": "popup",
"minutes": "5"
},
{
"method": "popup",
"minutes": "15"
},
{
"method": "popup",
"minutes": "30"
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "Your meeting about \"Adaptive Card design session\" is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pmDo you want to snooze or do you want to send a late notification to the attendees?",
"body": [
{
"type": "TextBlock",
"text": "${summary}",
"size": "Large",
"weight": "Bolder",
"style": "heading"
},
{
"type": "TextBlock",
"text": " ${location} ",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}",
"isSubtle": true,
"spacing": "None"
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"label": "Snooze for",
"value": "${reminders.overrides[0].minutes}",
"choices": [
{
"$data": "${reminders.overrides}",
"title": "${minutes} minutes",
"value": "${minutes}"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Snooze",
"data": {
"x": "snooze"
}
},
{
"type": "Action.Submit",
"title": "I'll be late",
"data": {
"x": "late"
}
}
]
}
JSON Scripts and Templates: Microsoft.com
Tuesday, November 16, 2021
By : Mike Maadarani
0 comment