Samples and Templates

These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label intead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Choose sample:

Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. Note: The binding syntax changed in May 2020. Get started with templating

Show card wizard sample

JSON
{
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "Please provide the following information:",
			"wrap": true
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "1. Name",
			"card": {
				"type": "AdaptiveCard",
				"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
				"body": [
					{
						"type": "Container",
						"id": "nameProperties",
						"items": [
							{
								"type": "Input.Text",
								"label": "First Name",
								"id": "FirstName",
								"isRequired": true,
								"errorMessage": "First Name is required"
							},
							{
								"type": "Input.Text",
								"label": "Middle Name",
								"id": "MiddleName"
							},
							{
								"type": "Input.Text",
								"label": "Last Name",
								"id": "LastName",
								"isRequired": true,
								"errorMessage": "Last Name is required"
							}
						]
					}
				],
				"actions": [
					{
						"type": "Action.ShowCard",
						"title": "2. Address",
						"card": {
							"type": "AdaptiveCard",
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"body": [
								{
									"type": "Container",
									"id": "addressProperties",
									"items": [
										{
											"type": "Input.Text",
											"label": "Address line 1",
											"id": "AddressLine1"
										},
										{
											"type": "Input.Text",
											"label": "Address line 2",
											"id": "AddressLine2"
										},
										{
											"type": "ColumnSet",
											"columns": [
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "City",
															"id": "City"
														}
													]
												},
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "State",
															"id": "State"
														}
													]
												},
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "Zip Code",
															"id": "Zip"
														}
													]
												}
											]
										}
									]
								}
							],
							"actions": [
								{
									"type": "Action.ShowCard",
									"title": "3. Phone/Email",
									"card": {
										"type": "AdaptiveCard",
										"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
										"body": [
											{
												"type": "Input.Text",
												"label": "Cell Number",
												"id": "CellPhone"
											},
											{
												"type": "Input.Text",
												"label": "Home Number",
												"id": "HomePhone"
											},
											{
												"type": "Input.Text",
												"label": "Email Address",
												"id": "Email"
											}
										],
										"actions": [
											{
												"type": "Action.Submit",
												"title": "Submit"
											}
										]
									}
								}
							]
						}
					}
				]
			}
		}
	]
}
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"
                                            }
                                        ]
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        }
    ]
}
Adaptive Card