Designing Adaptive Cards for your Microsoft Teams app

Do: In this screen, there are two columns at the bottom of the card. The input component width is set to stretch, while the Select button width is set to auto. This ensures the button remains completely in view.

👁 The screenshot shows how to set column width for Adaptive Cards.

Don't: In this screen, both columns have width set to auto. This causes the Select button on the right to be cut off slightly compared to the input.

👁 The screenshot shows how not to set column width in Adaptive Cards.

Here's the code for implementing the design example you should follow.

{
 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 "type": "AdaptiveCard",
 "version": "1.2",
 "body": [
 {
 "type": "TextBlock",
 "text": "I wasn't able to identify the type of expense. Select from the list:",
 "wrap": true,
 "id": "typePrompt",
 "spacing": "Medium",
 "size": "Medium"
 },
 {
 "type": "ActionSet",
 "actions": [
 {
 "type": "Action.Submit",
 "title": "Phone Bill",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Phone Bill",
 "action": "Phone Bill"
 },
 "action": "Phone Bill"
 }
 },
 {
 "type": "Action.Submit",
 "title": "Taxi and Other Transportation",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Taxi and Other Transportation",
 "action": "Taxi and Other Transportation"
 },
 "action": "Taxi and Other Transportation"
 }
 },
 {
 "type": "Action.Submit",
 "title": "Entertainment_misc",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Entertainment_misc",
 "action": "Entertainment_misc"
 },
 "action": "Entertainment_misc"
 }
 },
 {
 "type": "Action.Submit",
 "title": "Car Rental",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Car Rental",
 "action": "Car Rental"
 },
 "action": "Car Rental"
 }
 },
 {
 "type": "Action.Submit",
 "title": "Airfare",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Airfare",
 "action": "Airfare"
 },
 "action": "Airfare"
 }
 }
 ],
 "spacing": "Medium"
 },
 {
 "type": "TextBlock",
 "text": " ",
 "wrap": true
 },
 {
 "type": "ColumnSet",
 "columns": [
 {
 "type": "Column",
 "width": "stretch",
 "items": [
 {
 "type": "Input.ChoiceSet",
 "choices": [
 {
 "title": "Meals",
 "value": "Meals"
 },
 {
 "title": "Parking/Tolls",
 "value": "Parking/Tolls"
 },
 {
 "title": "Accommodation",
 "value": "Accommodation"
 },
 {
 "title": "Fuel-Gas/Petrol/Diesel",
 "value": "Fuel-Gas/Petrol/Diesel"
 },
 {
 "title": "Hotel",
 "value": "Hotel"
 },
 {
 "title": "Meals - Employees Only",
 "value": "Meals - Employees Only"
 },
 {
 "title": "Accommodations",
 "value": "Accommodations"
 },
 {
 "title": "Misc.Expenses",
 "value": "Misc.Expenses"
 },
 {
 "title": "Please Categorize",
 "value": "Please Categorize"
 }
 ],
 "placeholder": "All",
 "id": "expenseTypes",
 "value": "Meals - Employees Only"
 }
 ]
 },
 {
 "type": "Column",
 "width": "auto",
 "items": [
 {
 "type": "ActionSet",
 "actions": [
 {
 "type": "Action.Submit",
 "title": "Select",
 "data": {
 "msteams": {
 "type": "messageBack",
 "displayText": "Select",
 "action": "applyType"
 },
 "action": "applyType"
 }
 }
 ]
 }
 ]
 }
 ],
 "spacing": "ExtraLarge"
 }
 ]
}

When the size of something you're displaying doesn't need to change, set you columns to a specific pixel width. This example shows the left column sized at 50 pixels, while the descriptions next to the thumbnails stretch the length of the card.

👁 The screenshot shows how to set column width in Adaptive Cards.

Here's the code for implementing the design example.

{
 "type": "AdaptiveCard",
 "version": "1.0",
 "body": [
 {
 "type": "TextBlock",
 "text": "Pick up where you left off?",
 "weight": "bolder"
 },
 {
 "type": "ColumnSet",
 "spacing": "medium",
 "columns": [
 {
 "type": "Column",
 "width": "50px",
 "items": [
 {
 "type": "Image",
 "url": "https://unsplash.it/80?image=1083",
 "size": "medium"
 }
 ]
 },
 {
 "type": "Column",
 "width": "stretch",
 "items": [
 {
 "type": "TextBlock",
 "text": "Silver Star Mountain Range"
 },
 {
 "type": "TextBlock",
 "text": "Maps",
 "isSubtle": true,
 "spacing": "none"
 }
 ]
 }
 ],
 "selectAction": {
 "type": "Action.OpenUrl",
 "url": "https://www.msn.com"
 }
 },
 {
 "type": "ColumnSet",
 "columns": [
 {
 "type": "Column",
 "width": "50px",
 "items": [
 {
 "type": "Image",
 "url": "https://unsplash.it/80?image=1082",
 "size": "medium"
 }
 ]
 },
 {
 "type": "Column",
 "width": "stretch",
 "style": "emphasis",
 "items": [
 {
 "type": "TextBlock",
 "text": "Kitchen Remodel for Homes"
 },
 {
 "type": "TextBlock",
 "text": "With EMPHASIS",
 "isSubtle": true,
 "spacing": "none"
 }
 ]
 }
 ],
 "selectAction": {
 "type": "Action.OpenUrl",
 "url": "https://adaptivecards.microsoft.com/?topic=welcome"
 }
 },
 {
 "type": "ColumnSet",
 "columns": [
 {
 "type": "Column",
 "width": "50px",
 "items": [
 {
 "type": "Image",
 "url": "https://unsplash.it/80?image=1080",
 "size": "medium"
 }
 ]
 },
 {
 "type": "Column",
 "width": "stretch",
 "items": [
 {
 "type": "TextBlock",
 "text": "The Witcher: A Series"
 },
 {
 "type": "TextBlock",
 "text": "Netflix",
 "isSubtle": true,
 "spacing": "none"
 }
 ]
 }
 ],
 "selectAction": {
 "type": "Action.OpenUrl",
 "url": "https://www.outlook.com"
 }
 }
 ],
 "actions": [
 {
 "type": "Action.OpenUrl",
 "title": "Resume all",
 "url": "ms-cortana:resume-all"
 },
 {
 "type": "Action.OpenUrl",
 "title": "More activities",
 "url": "ms-cortana:more-activities"
 }
 ]
}

Do: In this screen, the card has a wrap property set to true. This allows the text to fit to any screen size.

👁 The screenshot shows how to wrap text in Adaptive Cards.

Don't: In this screen, the card doesn't use the wrap property, so the text cuts off on a mobile screen.

👁 The screenshot shows what can happen if you don't wrap text in Adaptive Cards.

Here's the code for implementing the design example you should follow.

{
 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 "type": "AdaptiveCard",
 "version": "1.0",
 "body": [
 {
 "type": "TextBlock",
 "text": "What cuisine do you want?"
 },
 {
 "type": "Input.ChoiceSet",
 "id": "myColor",
 "style": "compact",
 "isMultiSelect": false,
 "value": "1",
 "choices": [
 {
 "title": "Chinese",
 "value": "1"
 },
 {
 "title": "Indian",
 "value": "2"
 },
 {
 "title": "Italian",
 "value": "3"
 }
 ]
 },
 {
 "type": "TextBlock",
 "text": "Select the dishes that you like?"
 },
 {
 "type": "Input.ChoiceSet",
 "id": "myColor2",
 "style": "expanded",
 "wrap" : true,
 "isMultiSelect": false,
 "value": "1",
 "choices": [
 {
 "title": "Cauliflower with potatoes sautéed with garam masala",
 "wrap" : true,
 "value": "1"
 },
 {
 "title": "Patties of potato mixed with some vegetables fried",
 "wrap" : true,
 "value": "2"
 },
 {
 "title": "Green capsicum with potatoes sautéed with cumin seeds",
 "wrap" : true,
 "value": "3"
 }
 ]
 }
 ]
}