Adaptive Cards with Microsoft Teams – JSON Templates Part 5
In a continuation of my earlier article, Adaptive Cards with Microsoft Teams with Examples, we continue with the details of how to create these Adaptive Cards authored with 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.
Food Order
Data JSON:
{
"@context":"http://schema.org",
"@type":"Restaurant",
"url":"https://www.thisisarestaurant.com",
"name":"The Restaurant",
"image":"https://www.example.com/image-of-some-restaurant.jpg",
"description":"This is an example restaurant that serves American cuisine.",
"servesCuisine":[
"American cuisine"
],
"hasMenu":{
"@type":"Menu",
"name":"Dine-In Menu",
"description":"Menu for in-restaurant dining only.",
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Steak",
"description":"How would you like your steak prepared?",
"image":"https://contososcubademo.azurewebsites.net/assets/steak.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Chicken",
"description":"Do you have any allergies?",
"image":"https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Potato Skins",
"description":"Small serving of stuffed potato skins.",
"offers":{
"@type":"Offer",
"price":"7.49",
"priceCurrency":"USD"
},
"suitableForDiet":"http://schema.org/GlutenFreeDiet"
}
},
{
"@type":"MenuSection",
"name":"Tofu",
"description":"Would you like it prepared vegan?",
"image":"https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Pea Soup",
"description":"Creamy pea soup topped with melted cheese and sourdough croutons.",
"offers":{
"@type":"Offer",
"price":"3.49",
"priceCurrency":"USD"
}
}
}
]
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Your registration is almost complete",
"size": "Medium",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"text": "What type of food do you prefer?",
"wrap": true
},
{
"type": "ImageSet",
"imageSize": "medium",
"images": [
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[1].image}"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "SteakTemp",
"style": "expanded",
"choices": [
{
"title": "Rare",
"value": "rare"
},
{
"title": "Medium-Rare",
"value": "medium-rare"
},
{
"title": "Well-done",
"value": "well-done"
}
]
},
{
"type": "Input.Text",
"id": "SteakOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Steak"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "ChickenAllergy",
"style": "expanded",
"isMultiSelect": true,
"choices": [
{
"title": "I'm allergic to peanuts",
"value": "peanut"
}
]
},
{
"type": "Input.Text",
"id": "ChickenOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Chicken"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[1].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.Toggle",
"id": "Vegetarian",
"title": "Please prepare it vegan",
"valueOn": "vegan",
"valueOff": "notVegan",
"wrap": false
},
{
"type": "Input.Text",
"id": "VegOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Vegetarian"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
Food Order with Validation
Data JSON:
{
"@context":"http://schema.org",
"@type":"Restaurant",
"url":"https://www.thisisarestaurant.com",
"name":"The Restaurant",
"image":"https://www.example.com/image-of-some-restaurant.jpg",
"description":"This is an example restaurant that serves American cuisine.",
"servesCuisine":[
"American cuisine"
],
"hasMenu":{
"@type":"Menu",
"name":"Dine-In Menu",
"description":"Menu for in-restaurant dining only.",
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Steak",
"description":"How would you like your steak prepared?",
"image":"https://contososcubademo.azurewebsites.net/assets/steak.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Chicken",
"description":"Do you have any allergies?",
"image":"https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Potato Skins",
"description":"Small serving of stuffed potato skins.",
"offers":{
"@type":"Offer",
"price":"7.49",
"priceCurrency":"USD"
},
"suitableForDiet":"http://schema.org/GlutenFreeDiet"
}
},
{
"@type":"MenuSection",
"name":"Tofu",
"description":"Would you like it prepared vegan?",
"image":"https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Pea Soup",
"description":"Creamy pea soup topped with melted cheese and sourdough croutons.",
"offers":{
"@type":"Offer",
"price":"3.49",
"priceCurrency":"USD"
}
}
}
]
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Your registration is almost complete",
"size": "Medium",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"text": "What type of food do you prefer?",
"wrap": true
},
{
"type": "ImageSet",
"imageSize": "medium",
"images": [
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[1].image}"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.ChoiceSet",
"id": "SteakTemp",
"style": "expanded",
"label": "${hasMenu.hasMenuSection[0].description}",
"isRequired": true,
"errorMessage": "Please select one of the above options",
"choices": [
{
"title": "Rare",
"value": "rare"
},
{
"title": "Medium-Rare",
"value": "medium-rare"
},
{
"title": "Well-done",
"value": "well-done"
}
]
},
{
"type": "Input.Text",
"id": "SteakOther",
"isMultiline": true,
"label": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Steak"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Toggle",
"id": "ChickenAllergy",
"valueOn": "noPeanuts",
"valueOff": "peanuts",
"title": "I'm allergic to peanuts",
"label": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}"
},
{
"type": "Input.Text",
"id": "ChickenOther",
"isMultiline": true,
"label": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Chicken"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[1].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Toggle",
"id": "Vegetarian",
"title": "Please prepare it vegan",
"label": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}",
"valueOn": "vegan",
"valueOff": "notVegan"
},
{
"type": "Input.Text",
"id": "VegOther",
"isMultiline": true,
"label": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Vegetarian"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
Input Form
Data JSON:
{
"title": "Tell us about yourself",
"body": "We just need a few more details to get you booked for the trip of a lifetime!",
"disclaimer": "Don't worry, we'll never share or sell your information.",
"properties": [
{
"title" : "Your Name",
"placeholder" : "Last, First"
},
{
"title" : "Your email",
"placeholder" : "[email protected]"
},
{
"title" : "Phone Number",
"placeholder" : "xxx.xxx.xxxx"
}
],
"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${title}",
"weight": "Bolder",
"size": "Medium",
"wrap": true,
"style": "heading"
},
{
"type": "TextBlock",
"text": "${body}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${disclaimer}",
"isSubtle": true,
"wrap": true,
"size": "Small"
},
{
"type": "Container",
"$data": "${properties}",
"items": [
{
"type": "TextBlock",
"text": "${title}",
"wrap": true
},
{
"type": "Input.Text",
"id": "${if(title == 'Your Name', 'myName', if(title == 'Your email', 'myEmail', 'myTel'))}",
"placeholder": "${placeholder}"
}
]
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${thumbnailUrl}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
Input Form with Labels
Data JSON:
{
"title": "Tell us about yourself",
"body": "We just need a few more details to get you booked for the trip of a lifetime!",
"disclaimer": "Don't worry, we'll never share or sell your information.",
"properties": [
{
"id": "myName",
"label": "Your name (Last, First)",
"validation": "^[A-Z][a-z]+, [A-Z][a-z]+$",
"error": "Please enter your name in the specified format"
},
{
"id": "myEmail",
"label": "Your email",
"validation": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
"error": "Please enter a valid email address"
},
{
"id": "myTel",
"label": "Phone Number (xxx-xxx-xxxx)",
"validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
"error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers"
}
],
"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${title}",
"weight": "bolder",
"size": "medium",
"style": "heading"
},
{
"type": "TextBlock",
"text": "${body}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${disclaimer}",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "Container",
"$data": "${properties}",
"items": [
{
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"regex": "${validation}",
"errorMessage": "${error}",
"isRequired": true
}
]
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${thumbnailUrl}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
JSON Scripts and Templates: Microsoft.com
Friday, December 10, 2021
By : Mike Maadarani
0 comment