Adaptive Cards with Microsoft Teams – JSON Templates Part 6

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
  • Tuesday, December 14, 2021 By : Mike Maadarani    0 comment

Activities

Archives

Latest Tweets