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

Application login sample

JSON
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Application Login",
            "horizontalAlignment": "Center",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "TextBlock",
            "text": "Username",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "style": "text",
            "id": "UserVal",
            "isRequired": true
        },
        {
            "type": "TextBlock",
            "text": "Password",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "id": "PassVal",
            "style": "password",
            "isRequired": true
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Login",
            "data": {
                "id": "LoginVal"
            }
        }
    ]
}
Data JSON
{
    "ApplicationInfo": {
        "title": "Application Login"
    }
}
Template JSON
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": " ${ApplicationInfo.title}",
            "horizontalAlignment": "Center",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "TextBlock",
            "text": "Username",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "style": "text",
            "id": "UserVal",
            "isRequired": true
        },
        {
            "type": "TextBlock",
            "text": "Password",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "id": "PassVal",
            "style": "password",
            "isRequired": true
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Login",
            "data": {
                "id": "LoginVal"
            }
        }
    ]
}
Adaptive Card