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

Order confirmation sample

JSON
{ 
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "Please confirm your order:",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Name",
                    "value": "John Smith"
                },
                {
                    "title": "Phone number",
                    "value": "(555) 555-5555"
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "FactSet",
                    "facts": [
                        {
                            "title": "1x",
                            "value": "Steak"
                        },
                        {
                            "title": "2x",
                            "value": "Side Rice"
                        },
                        {
                            "title": "1x",
                            "value": "Soft Drink"
                        }
                    ],
                    "spacing": "Small"
                }
            ],
            "spacing": "Small"
        }
    ],
    "actions": [
        {
            "type": "Action.Execute",
            "title": "Place Order"
        },
        {
            "type": "Action.Execute",
            "title": "Edit Order",
            "data": "edit",
            "mode": "secondary"
        },
        {
            "type": "Action.Execute",
            "title": "Save Order",
            "data": "save",
            "mode": "secondary"
        }
    ]
}
Data JSON
{
    "title": "Please confirm your order:",
    "customer": [{
        "firstName": "John",
        "lastName": "Smith",
        "phone": "(555) 555-5555"
    }
    ]
}
Template JSON
{ 
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "${title}",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Name",
                    "value": "${customer[0].firstName} ${customer[0].lastName}"
                },
                {
                    "title": "Phone number",
                    "value": "${customer[0].phone}"
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "FactSet",
                    "facts": [
                        {
                            "title": "1x",
                            "value": "Steak"
                        },
                        {
                            "title": "2x",
                            "value": "Side Rice"
                        },
                        {
                            "title": "1x",
                            "value": "Soft Drink"
                        }
                    ],
                    "spacing": "Small"
                }
            ],
            "spacing": "Small"
        }
    ],
    "actions": [
        {
            "type": "Action.Execute",
            "title": "Place Order"
        },
        {
            "type": "Action.Execute",
            "title": "Edit Order",
            "data": "edit",
            "mode": "secondary"
        },
        {
            "type": "Action.Execute",
            "title": "Save Order",
            "data": "save",
            "mode": "secondary"
        }
    ]
}
Adaptive Card