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 targeting supports v1.3 you should use label instead 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

Input form with rtl sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
	  {
		"type": "TextBlock",
		"text": "Please select your language:"
	  }
	],
	"actions": [
	  {
		"type": "Action.ShowCard",
		"title": "English",
		"card": {
		  "type": "AdaptiveCard",
		  "body": [
			{
			  "type": "TextBlock",
			  "size": "medium",
			  "weight": "bolder",
			  "text": "Registration Form",
			  "horizontalAlignment": "center",
			  "wrap": true,
			  "style": "heading"
			},
			{
			  "type": "Input.Text",
			  "label": "Name",
			  "style": "text",
			  "id": "SimpleValENG",
			  "isRequired": true,
			  "errorMessage": "Name is required"
			},
			{
			  "type": "Input.Text",
			  "label": "Email",
			  "style": "email",
			  "id": "EmailValENG"
			},
			{
			  "type": "Input.Text",
			  "label": "Phone",
			  "style": "tel",
			  "id": "TelValENG"
			},
			{
			  "type": "Input.Text",
			  "label": "Comments",
			  "style": "text",
			  "isMultiline": true,
			  "id": "MultiLineValENG"
			}
		  ],
		  "actions": [
			{
			  "type": "Action.Submit",
			  "title": "Submit"
			}
		  ]
		}
	  },
	  {
		"type": "Action.ShowCard",
		"title": "عربي",
		"card": {
		  "type": "AdaptiveCard",
		  "rtl": true,
		  "body": [
			{
			  "type": "TextBlock",
			  "size": "medium",
			  "weight": "bolder",
			  "text": "إستمارة تسجيل",
			  "horizontalAlignment": "center",
			  "wrap": true,
			  "style": "heading"
			},
			{
			  "type": "Input.Text",
			  "label": "اسم",
			  "style": "text",
			  "id": "SimpleValARA",
			  "isRequired": true,
			  "errorMessage": "مطلوب اسم"
			},
			{
			  "type": "Input.Text",
			  "label": "بريد الالكتروني",
			  "style": "email",
			  "id": "EmailValARA"
			},
			{
			  "type": "Input.Text",
			  "label": "هاتف",
			  "style": "tel",
			  "id": "TelValARA"
			},
			{
			  "type": "Input.Text",
			  "label": "تعليقات",
			  "style": "text",
			  "isMultiline": true,
			  "id": "MultiLineValARA"
			}
		  ],
		  "actions": [
			{
			  "type": "Action.Submit",
			  "title": "يقدم"
			}
		  ]
		}
	  }
	]
}
Data JSON
{ 
    "FormInfo":{
        "titleENG":"Registration Form",
        "titleARA":"إستمارة تسجيل"
    }
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
	  {
		"type": "TextBlock",
		"text": "Please select your language:"
	  }
	],
	"actions": [
	  {
		"type": "Action.ShowCard",
		"title": "English",
		"card": {
		  "type": "AdaptiveCard",
		  "body": [
			{
			  "type": "TextBlock",
			  "size": "medium",
			  "weight": "bolder",
			  "text": " ${FormInfo.titleENG}",
			  "horizontalAlignment": "center",
			  "wrap": true,
			  "style": "heading"
			},
			{
			  "type": "Input.Text",
			  "label": "Name",
			  "style": "text",
			  "id": "SimpleValENG",
			  "isRequired": true,
			  "errorMessage": "Name is required"
			},
			{
			  "type": "Input.Text",
			  "label": "Email",
			  "style": "email",
			  "id": "EmailValENG"
			},
			{
			  "type": "Input.Text",
			  "label": "Phone",
			  "style": "tel",
			  "id": "TelValENG"
			},
			{
			  "type": "Input.Text",
			  "label": "Comments",
			  "style": "text",
			  "isMultiline": true,
			  "id": "MultiLineValENG"
			}
		  ],
		  "actions": [
			{
			  "type": "Action.Submit",
			  "title": "Submit"
			}
		  ]
		}
	  },
	  {
		"type": "Action.ShowCard",
		"title": "عربي",
		"card": {
		  "type": "AdaptiveCard",
		  "rtl": true,
		  "body": [
			{
			  "type": "TextBlock",
			  "size": "medium",
			  "weight": "bolder",
			  "text": " ${FormInfo.titleARA}",
			  "horizontalAlignment": "center",
			  "wrap": true,
			  "style": "heading"
			},
			{
			  "type": "Input.Text",
			  "label": "اسم",
			  "style": "text",
			  "id": "SimpleValARA",
			  "isRequired": true,
			  "errorMessage": "مطلوب اسم"
			},
			{
			  "type": "Input.Text",
			  "label": "بريد الالكتروني",
			  "style": "email",
			  "id": "EmailValARA"
			},
			{
			  "type": "Input.Text",
			  "label": "هاتف",
			  "style": "tel",
			  "id": "TelValARA"
			},
			{
			  "type": "Input.Text",
			  "label": "تعليقات",
			  "style": "text",
			  "isMultiline": true,
			  "id": "MultiLineValARA"
			}
		  ],
		  "actions": [
			{
			  "type": "Action.Submit",
			  "title": "يقدم"
			}
		  ]
		}
	  }
	]
}
Adaptive Card