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

Product video sample

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": "https://adaptivecards.io/content/poster-video.png",
			"altText": "Adaptive Cards overview video",
			"sources": [
				{
					"mimeType": "video/mp4",
					"url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.OpenUrl",
			"title": "Learn more",
			"url": "https://adaptivecards.io"
		}
	]
}
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|admin@a830edad9050849nda1.onmicrosoft.com,#admin@a830edad9050849NDA1.onmicrosoft.com,#admin@a830edad9050849NDA1.onmicrosoft.com,#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"
        }
    ]
}
Adaptive Card