Adaptive Cards with Microsoft Teams – JSON Templates Part 6
Tuesday, December 14, 2021- By : Mike Maadarani
0 comment
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.
In Part 6, we have included Inputs, Inputs with Validation, and Restaurant templates.
Inputs
Data JSON:
{
"ParticipantInfoForm":{
"title":"Input.Text elements"
},
"Survey": {
"title":"Input ChoiceSet",
"questions": [
{
"question":"What color do you want? (compact)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question": "What color do you want? (expanded)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question": "What color do you want? (multiselect)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question":"I accept the terms and conditions (True/False)"
},
{
"question":"Red cars are better than other cars"
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": " ${ParticipantInfoForm.title}",
"horizontalAlignment": "Center",
"wrap": true,
"style": "heading"
},
{
"type": "TextBlock",
"text": "Name",
"wrap": true
},
{
"type": "Input.Text",
"style": "text",
"id": "SimpleVal"
},
{
"type": "TextBlock",
"text": "Homepage",
"wrap": true
},
{
"type": "Input.Text",
"style": "url",
"id": "UrlVal"
},
{
"type": "TextBlock",
"text": "Email",
"wrap": true
},
{
"type": "Input.Text",
"style": "email",
"id": "EmailVal"
},
{
"type": "TextBlock",
"text": "Phone",
"wrap": true
},
{
"type": "Input.Text",
"style": "tel",
"id": "TelVal"
},
{
"type": "TextBlock",
"text": "Comments",
"wrap": true
},
{
"type": "Input.Text",
"style": "text",
"isMultiline": true,
"id": "MultiLineVal"
},
{
"type": "TextBlock",
"text": "Quantity",
"wrap": true
},
{
"type": "Input.Number",
"min": -5,
"max": 5,
"value": 1,
"id": "NumVal"
},
{
"type": "TextBlock",
"text": "Due Date",
"wrap": true
},
{
"type": "Input.Date",
"id": "DateVal",
"value": "2017-09-20"
},
{
"type": "TextBlock",
"text": "Start time",
"wrap": true
},
{
"type": "Input.Time",
"id": "TimeVal",
"value": "16:59"
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${Survey.title} ",
"horizontalAlignment": "Center",
"wrap": true,
"style": "heading"
},
{
"type": "TextBlock",
"text": "${Survey.questions[0].question}",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[0].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "TextBlock",
"text": "${Survey.questions[1].question}",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "SingleSelectVal",
"style": "expanded",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[1].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "TextBlock",
"text": "${Survey.questions[2].question}",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "MultiSelectVal",
"isMultiSelect": true,
"value": "1,3",
"choices": [
{
"$data": "${Survey.questions[2].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Input.Toggle",
"horizontalAlignment": "Center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Toggle",
"title": "${Survey.questions[3].question}",
"id": "AcceptsTerms",
"wrap": false,
"value": "false"
},
{
"type": "Input.Toggle",
"title": "${Survey.questions[4].question}",
"valueOn": "RedCars",
"valueOff": "NotRedCars",
"id": "ColorPreference",
"wrap": false,
"value": "NotRedCars"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "1234567890"
}
},
{
"type": "Action.ShowCard",
"title": "Show Card",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Enter comment",
"wrap": true
},
{
"type": "Input.Text",
"style": "text",
"id": "CommentVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
Inputs with Validation
Data JSON:
{
"ParticipantInfoForm":{
"title":"Input.Text elements"
},
"Survey": {
"title":"Input ChoiceSet",
"questions": [
{
"question":"What color do you want? (compact)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question": "What color do you want? (expanded)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question": "What color do you want? (multiselect)",
"items": [
{
"choice":"Red",
"value":"1"
},
{
"choice":"Green",
"value":"2"
},
{
"choice":"Blue",
"value":"3"
}
]
},
{
"question":"I accept the terms and conditions (True/False)"
},
{
"question":"Red cars are better than other cars"
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": " ${ParticipantInfoForm.title}",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"label": "Name",
"style": "text",
"id": "SimpleVal",
"isRequired": true,
"errorMessage": "Name is required"
},
{
"type": "Input.Text",
"label": "Homepage",
"style": "url",
"id": "UrlVal"
},
{
"type": "Input.Text",
"label": "Email",
"style": "email",
"id": "EmailVal"
},
{
"type": "Input.Text",
"label": "Phone",
"style": "tel",
"id": "TelVal"
},
{
"type": "Input.Text",
"label": "Comments",
"style": "text",
"isMultiline": true,
"id": "MultiLineVal"
},
{
"type": "Input.Number",
"label": "Quantity",
"min": -5,
"max": 5,
"value": 1,
"id": "NumVal",
"errorMessage": "The quantity must be between -5 and 5"
},
{
"type": "Input.Date",
"label": "Due Date",
"id": "DateVal",
"value": "2017-09-20"
},
{
"type": "Input.Time",
"label": "Start time",
"id": "TimeVal",
"value": "16:59"
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "${Survey.title} ",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal",
"label": "${Survey.questions[0].question}",
"style": "compact",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[0].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "SingleSelectVal",
"label": "${Survey.questions[1].question}",
"style": "expanded",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[1].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "MultiSelectVal",
"label": "${Survey.questions[2].question}",
"isMultiSelect": true,
"value": "1,3",
"choices": [
{
"$data": "${Survey.questions[2].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Input.Toggle",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Toggle",
"label": "Please accept the terms and conditions:",
"title": "${Survey.questions[3].question}",
"valueOn": "true",
"valueOff": "false",
"id": "AcceptsTerms",
"isRequired": true,
"errorMessage": "Accepting the terms and conditions is required"
},
{
"type": "Input.Toggle",
"label": "How do you feel about red cars?",
"title": "${Survey.questions[4].question}",
"valueOn": "RedCars",
"valueOff": "NotRedCars",
"id": "ColorPreference"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "1234567890"
}
},
{
"type": "Action.ShowCard",
"title": "Show Card",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"label": "enter comment",
"style": "text",
"id": "CommentVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}
Restaurant
Data JSON:
{
"@context": "http://schema.org/",
"@type": "LocalBusiness",
"name": "Malt \u0026 Vine",
"url": "https://www.yelp.com/biz/malt-and-vine-redmond",
"address": {
"addressLocality": "Redmond",
"addressRegion": "WA",
"streetAddress": "16851 Redmond Way",
"postalCode": "98052",
"addressCountry": "US"
},
"image": "https://s3-media1.fl.yelpcdn.com/bphoto/HD_NsxwaCTwKRxvOZs2Shw/ls.jpg",
"imageAlt": "image of beer growlers on a table",
"telephone": "+14258816461",
"aggregateRating": {
"reviewCount": 176,
"@type": "AggregateRating",
"ratingValue": 4.5
},
"review": [{
"reviewRating": {
"ratingValue": 4
},
"datePublished": "2014-11-28",
"description": "Great concept and a wide selection of beers both on tap and bottled! Smaller wine selection than I wanted, but the variety of beers certainly made up for that. Although I didn't order anything, my boyfriend got a beer and he loved it. Their prices are fair too. \n\nThe concept is really awesome. It's a bar/store that you can bring outside food into. The place was pretty packed tonight. I wish we had stayed for more than one drink. I would have loved to sample everything!",
"author": "Blaire S."
}],
"priceRange": "mid-priced"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"speak": "Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${address.addressLocality}, ${address.addressRegion}",
"wrap": true
},
{
"type": "TextBlock",
"text": "${name}",
"weight": "bolder",
"size": "extraLarge",
"spacing": "none",
"wrap": true
},
{
"type": "TextBlock",
"$when": "${aggregateRating.ratingValue <= 1}",
"text": "${aggregateRating.ratingValue} star (${aggregateRating.reviewCount} reviews) · ${priceRange}",
"isSubtle": true,
"spacing": "none",
"wrap": true
},
{
"type": "TextBlock",
"$when": "${aggregateRating.ratingValue >= 2}",
"text": "${aggregateRating.ratingValue} stars (${aggregateRating.reviewCount} reviews) · ${priceRange}",
"isSubtle": true,
"spacing": "none",
"wrap": true
},
{
"type": "TextBlock",
"text": "**${review[0].author}** said \"${review[0].description}\"",
"size": "small",
"wrap": true,
"maxLines": 3
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${image}",
"altText": "${imageAlt}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "More Info",
"url": "${url}"
}
]
}
JSON Scripts and Templates: Microsoft.com
Adaptive Cards with Microsoft Teams – JSON Templates Part 5
- Friday, December 10, 2021
- By : Mike Maadarani
-
0 comment
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
Adaptive Cards with Microsoft Teams – JSON Templates Part 4
- Tuesday, December 07, 2021
- By : Mike Maadarani
-
0 comment
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 limitless scenarios.
Expense Report with Labels
Data JSON:
{
"code": "ER-13052",
"message": "success",
"created_by_name" : "Matt Hidinger",
"created_date" : "2019-07-15T18:33:12+0800",
"submitted_date": "2019-04-14T18:33:12+0800",
"creater_email" : "[email protected]",
"status" : "Pending",
"status_url" : "https://adaptivecards.io/content/pending.png",
"approver": "Thomas",
"purpose" : "Trip to UAE",
"approval_date" : "2019-07-15T22:33:12+0800",
"approver" : "Thomas",
"approver_email" : "[email protected]",
"other_submitter" : "David",
"other_submitter_email" : "[email protected]",
"expenses": [
{
"expense_id": "16367000000083065",
"approver" : "Thomas",
"date": "2017-02-21",
"description": "Air Travel Expense",
"created_by": "636965431200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 300,
"total_without_tax": 300,
"is_billable": true,
"is_reimbursable": true,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "approved",
"created_time": "2019-06-19T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": "Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM."
},
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": "Leg 2 on Tue, Jun 19th, 2019 at 7:15 PM."
}
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
},
{
"expense_id": "16367000000083065",
"date": "2019-06-19",
"description": "Auto Mobile Expense",
"created_by": "636965431200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 100,
"total_without_tax": 100,
"is_billable": true,
"is_reimbursable": true,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "submitted",
"created_time": "2019-06-19T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": " Contoso Car Rentrals, Tues 6/19 at 7:00 AM"
}
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
},
{
"expense_id": "16367000000083065",
"date": "2019-06-21",
"description": "Excess Baggage Cost",
"created_by": "636967159200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 50.38,
"total_without_tax": 4.3,
"is_billable": true,
"is_reimbursable": false,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "submitted",
"created_time": "2019-06-21T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
}
]
}
Template JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "large",
"weight": "bolder",
"text": "**EXPENSE APPROVAL**",
"style": "heading"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "${status_url}",
"altText": "${status}",
"height": "30px"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "${purpose}",
"wrap": true,
"style": "heading"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "EXPORT AS PDF",
"url": "https://adaptivecards.io"
}
]
}
],
"width": "auto"
}
]
},
{
"type": "TextBlock",
"spacing": "small",
"size": "small",
"weight": "bolder",
"text": "[${code}](https://adaptivecards.io)"
},
{
"type": "FactSet",
"spacing": "large",
"facts": [
{
"title": "Submitted By",
"value": "**${created_by_name}** ${creater_email}"
},
{
"title": "Duration",
"value": "${formatTicks(min(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')} - ${formatTicks(max(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')}"
},
{
"title": "Submitted On",
"value": "${formatDateTime(submitted_date, 'yyyy-MM-dd')}"
},
{
"title": "Reimbursable Amount",
"value": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}"
},
{
"title": "Awaiting approval from",
"value": "**${approver}** ${approver_email}"
},
{
"title": "Submitted to",
"value": "**${other_submitter}** ${other_submitter_email}"
}
]
}
]
},
{
"type": "Container",
"spacing": "large",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "DATE"
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "large",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "CATEGORY"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "AMOUNT"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"$data": "${expenses}",
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "${formatDateTime(created_time, 'MM-dd')}",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$${formatNumber(total, 2)}",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "small",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent${$index}",
"chevronDown${$index}",
"chevronUp${$index}"
]
},
"verticalContentAlignment": "center",
"items": [
{
"type": "Image",
"id": "chevronDown${$index}",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "Details collapsed"
},
{
"type": "Image",
"id": "chevronUp${$index}",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "Details expanded",
"isVisible": false
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent${$index}",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"$data": "${custom_fields}",
"type": "TextBlock",
"text": "* ${value}",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment${$index}",
"label": "Add your comment here"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 1
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "Total Expense Amount \t",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "Non-reimbursable Amount",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "Advance Amount",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$${formatNumber(sum(select(expenses, x, x.total)), 2)}"
},
{
"type": "TextBlock",
"text": "(-) $${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, 0, x.total))), 2)} \t"
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "Amount to be Reimbursed",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent4",
"showHistory",
"hideHistory"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"id": "showHistory",
"horizontalAlignment": "right",
"color": "accent",
"text": "Show history",
"wrap": true
},
{
"type": "TextBlock",
"id": "hideHistory",
"horizontalAlignment": "right",
"color": "accent",
"text": "Hide history",
"wrap": true,
"isVisible": false
}
],
"width": 1
}
]
},
{
"type": "Container",
"id": "cardContent4",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Expense submitted by **${created_by_name}** on {{DATE(${formatDateTime(created_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Expense ${expenses[0].status} by **${expenses[0].approver}** on {{DATE(${formatDateTime(approval_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"label": "Please specify an appropriate reason for rejection",
"isMultiline": true,
"isRequired": true,
"errorMessage": "A reason for rejection is necessary"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
Show Card Wizard
Data JSON:
{
"formTitle": "Please provide the following information:",
"nameCard": {
"title": "Name",
"idPrefix": "name",
"fields": [
{
"label": "First Name",
"id": "FirstName",
"required": true
},
{
"label": "Middle Name",
"id": "MiddleName",
"required": false
},
{
"label": "Last Name",
"id": "LastName",
"required": true
}
]
},
"addressCard": {
"title": "Address",
"idPrefix": "address",
"textInputFields": [
{
"label": "Address line 1",
"id": "addressLine1",
"required": true
},
{
"label": "Address line 2",
"id": "addressLine2",
"required": false
}
],
"columnFields": [
{
"label": "City",
"id": "city",
"required": false
},
{
"label": "State",
"id": "state",
"required": false
},
{
"label": "Zip Code",
"id": "zip",
"required": true
}
]
},
"contactCard": {
"title": "Phone/Email",
"idPrefix": "contact",
"fields": [
{
"label": "Mobile number",
"id": "mobileNumber",
"required": false
},
{
"label": "Home number",
"id": "homeNumber",
"required": false
},
{
"label": "Email address",
"id": "emailAddress",
"required": true
}
]
}
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "${formTitle}",
"wrap": true
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${nameCard.title}",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "${nameCard.idPrefix}Properties",
"items": [
{
"$data": "${nameCard.fields}",
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"isRequired": "${required}",
"errorMessage": "'${label}' is required"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${addressCard.title}",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "${addressCard.idPrefix}Properties",
"items": [
{
"$data": "${addressCard.textInputFields}",
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"isRequired": "${required}",
"errorMessage": "'${label} is required"
},
{
"type": "ColumnSet",
"columns": [
{
"$data": "${addressCard.columnFields}",
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"isRequired": "${required}",
"errorMessage": "'${label}' is required"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${contactCard.title}",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"$data": "${contactCard.fields}",
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"isRequired": "${required}",
"errorMessage": "'${label}' is required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
}
]
}
}
]
}
}
]
}
JSON Scripts and Templates: Microsoft.com
Adaptive Cards with Microsoft Teams – JSON Templates Part 3
- Saturday, December 04, 2021
- By : Mike Maadarani
-
0 comment
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.
Product Video
Data JSON:
{
"odata.metadata": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/$metadata#SP.ApiData.VideoItems/@Element",
"odata.type": "SP.Publishing.VideoItem",
"odata.id": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')",
"odata.editLink": "VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')",
"ChannelID": "1833f204-bb2a-4e93-b8dd-b236daeccae8",
"CreatedDate": "2015-07-08T05:05:06Z",
"Description": "",
"DisplayFormUrl": "https://a830edad9050849nda1.sharepoint.com/portals/Red-Channel/pVid/Forms/DispForm.aspx?ID=5",
"FileName": "Divers - Future of Productivity.mp4",
"OwnerName": "TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#i:0#.f|membership|[email protected],#[email protected],#[email protected],#TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#https://a830edad9050849nda1-my.sharepoint.com:443/User%20Photos/Profile%20Pictures/admin_a830edad9050849nda1_onmicrosoft_com_MThumb.jpg,#,#",
"ServerRelativeUrl": "/portals/Red-Channel/pVid/Divers - Future of Productivity.mp4",
"ThumbnailUrl": "https://adaptivecards.io/content/poster-video.png",
"Title": "Divers - Future of Productivity",
"ID": "6b518eae-b0d9-4951-b6da-1e5f58a43daa",
"Url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4",
"VideoDurationInSeconds": 388,
"VideoProcessingStatus": 2,
"ViewCount": -1,
"YammerObjectUrl": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_layouts/15/videoplayer.aspx?v=https%3A%2F%2Fa830edad9050849nda1%2Esharepoint%2Ecom%2Fportals%2FRed%2DChannel%2FpVid%2FDivers%20%2D%20Future%20of%20Productivity%2Emp4"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.1",
"fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!",
"body": [
{
"type": "Media",
"poster": "${ThumbnailUrl}",
"sources": [
{
"mimeType": "video/mp4",
"url": "${Url}"
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Learn more",
"url": "https://adaptivecards.io"
}
]
}
Expense Report
Data JSON:
{
"code": "ER-13052",
"message": "success",
"created_by_name" : "Matt Hidinger",
"created_date" : "2019-07-15T18:33:12+0800",
"submitted_date": "2019-04-14T18:33:12+0800",
"creater_email" : "[email protected]",
"status" : "Pending",
"status_url" : "https://adaptivecards.io/content/pending.png",
"approver": "Thomas",
"purpose" : "Trip to UAE",
"approval_date" : "2019-07-15T22:33:12+0800",
"approver" : "Thomas",
"approver_email" : "[email protected]",
"other_submitter" : "David",
"other_submitter_email" : "[email protected]",
"expenses": [
{
"expense_id": "16367000000083065",
"approver" : "Thomas",
"date": "2017-02-21",
"description": "Air Travel Expense",
"created_by": "636965431200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 300,
"total_without_tax": 300,
"is_billable": true,
"is_reimbursable": true,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "approved",
"created_time": "2019-06-19T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": "Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM."
},
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": "Leg 2 on Tue, Jun 19th, 2019 at 7:15 PM."
}
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
},
{
"expense_id": "16367000000083065",
"date": "2019-06-19",
"description": "Auto Mobile Expense",
"created_by": "636965431200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 100,
"total_without_tax": 100,
"is_billable": true,
"is_reimbursable": true,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "submitted",
"created_time": "2019-06-19T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
{
"customfield_id": "16367000000277001",
"label": "Other Name",
"value": " Contoso Car Rentrals, Tues 6/19 at 7:00 AM"
}
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
},
{
"expense_id": "16367000000083065",
"date": "2019-06-21",
"description": "Excess Baggage Cost",
"created_by": "636967159200000000",
"created_by_name": "PATRICIA",
"employee_number": "E001",
"currency_id": "16367000000000097",
"currency_code": "USD",
"paid_through_account_id": "16367000000036003",
"paid_through_account_name": "Employee Reimbursements",
"bcy_total": 13900.79,
"bcy_subtotal": 13900.79,
"total": 50.38,
"total_without_tax": 4.3,
"is_billable": true,
"is_reimbursable": false,
"reference_number": "DD145",
"due_days": "Due in 15 days",
"merchant_id": "16367000000074027",
"merchant_name": "ABS Solutions",
"status": "submitted",
"created_time": "2019-06-21T18:33:12+0800",
"last_modified_time": "2017-02-21T18:42:46+0530",
"receipt_name": "receipt1.jpg",
"report_id": "16367000000083075",
"mileage_type": "non_mileage",
"report_name": "Purchase",
"is_receipt_only": false,
"distance": 0,
"per_diem_rate": 0,
"per_diem_days": 0,
"per_diem_id": "",
"per_diem_name": "",
"expense_type": "non_mileage",
"location": "Washington",
"receipt_type": "jpg",
"policy_violated": false,
"comments_count": 0,
"report_status": "submitted",
"price_precision": 2,
"mileage_rate": 0,
"mileage_unit": "km",
"receipt_status": "processed",
"is_uncategorized": false,
"is_expired": false,
"gl_code": "LG001",
"exchange_rate": 66.943366,
"start_reading": "",
"end_reading": "",
"payment_mode": "Check",
"customer_id": "27927000000075081",
"customer_name": "ACME Corp.",
"custom_fields": [
],
"project_id": "27927000001243001",
"project_name": "Coffee Research",
"transaction_description": "",
"tax_id": "16367000000086001",
"tax_name": "Sales Tax",
"tax_percentage": 2,
"amount": 207.65,
"is_inclusive_tax": false,
"vehicle_type": "Bike",
"vehicle_id": "17456000000078029",
"fuel_type": "lpg",
"engine_capacity_range": "between_1401cc_and_1600cc",
"is_personal": false,
"policy_id": "16367000000092011",
"policy_name": "LIC",
"documents": [
{
"file_name": "receipt1.jpg",
"file_size_formatted": "71.8 KB",
"attachment_order": 1,
"document_id": "16367000000083071"
}
],
"reimbursement_reference": "",
"reimbursement_date": "",
"reimbursement_paid_through_account_id": "",
"reimbursement_paid_through_account_name": "",
"reimbursement_currency_id": "",
"reimbursement_currency_code": ""
}
]
}
Template JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**EXPENSE APPROVAL**",
"wrap": true,
"style": "heading"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "${status_url}",
"altText": "${status}",
"height": "30px"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "${purpose}",
"wrap": true,
"style": "heading"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "EXPORT AS PDF",
"url": "https://adaptivecards.io"
}
]
}
],
"width": "auto"
}
]
},
{
"type": "TextBlock",
"spacing": "Small",
"size": "Small",
"weight": "Bolder",
"text": "[${code}](https://adaptivecards.io)",
"wrap": true
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Submitted By",
"value": "**${created_by_name}** ${creater_email}"
},
{
"title": "Duration",
"value": "${formatTicks(min(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')} - ${formatTicks(max(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')}"
},
{
"title": "Submitted On",
"value": "${formatDateTime(submitted_date, 'yyyy-MM-dd')}"
},
{
"title": "Reimbursable Amount",
"value": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}"
},
{
"title": "Awaiting approval from",
"value": "**${approver}** ${approver_email}"
},
{
"title": "Submitted to",
"value": "**${other_submitter}** ${other_submitter_email}"
}
]
}
]
},
{
"type": "Container",
"spacing": "Large",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "DATE",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Large",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "CATEGORY",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "AMOUNT",
"wrap": true
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"$data": "${expenses}",
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "${formatDateTime(created_time, 'MM-dd')}",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$${formatNumber(total, 2)}",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Small",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent${$index}",
"chevronDown${$index}",
"chevronUp${$index}"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"id": "chevronDown${$index}",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "${description} $${total} collapsed"
},
{
"type": "Image",
"id": "chevronUp${$index}",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "${description} $${total} expanded",
"isVisible": false
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent${$index}",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"$data": "${custom_fields}",
"type": "TextBlock",
"text": "* ${value}",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment${$index}",
"placeholder": "Add your comment here."
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 1
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "Large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Total Expense Amount \t",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Non-reimbursable Amount",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Advance Amount",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$${formatNumber(sum(select(expenses, x, x.total)), 2)}",
"wrap": true
},
{
"type": "TextBlock",
"text": "(-) $${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, 0, x.total))), 2)} \t",
"wrap": true
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Amount to be Reimbursed",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent4",
"showHistory",
"hideHistory"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"id": "showHistory",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Show history",
"wrap": true
},
{
"type": "TextBlock",
"id": "hideHistory",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Hide history",
"wrap": true,
"isVisible": false
}
],
"width": 1
}
]
},
{
"type": "Container",
"id": "cardContent4",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Expense submitted by **${created_by_name}** on {{DATE(${formatDateTime(created_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Expense ${expenses[0].status} by **${expenses[0].approver}** on {{DATE(${formatDateTime(approval_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
JSON Scripts and Templates: Microsoft.com