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!

Choose sample:

Adaptive Card 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. More about templating

Input form sample

Data JSON 
{
        "title": "Tell us about yourself",
        "body": "We just need a few more details to get you booked for the trip of a lifetime!",
        "disclaimer": "Don't worry, we'll never share or sell your information.",
        "properties": [ 
            { 
                "title" : "Your Name",                       
                "placeholder" : "Last, First"
            },
            { 
                "title" : "Your email",                
                "placeholder" : "youremail@example.com"
            },
            { 
                "title" : "Phone Number",
                "placeholder" : "xxx.xxx.xxxx"
            }        
        ],
        "thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg"
}
Template JSON 
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${title}",
                            "weight": "Bolder",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "${body}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "${disclaimer}",
                            "isSubtle": true,
                            "wrap": true,
                            "size": "Small"
                        },
                        {
                            "type": "TextBlock",
                            "text": "${properties[0].title}",
                            "wrap": true
                        },
                        {
                            "type": "Input.Text",
                            "id": "myName",
                            "placeholder": "${properties[0].placeholder}"
                        },
                        {
                            "type": "TextBlock",
                            "text": "${properties[1].title}",
                            "wrap": true
                        },
                        {
                            "type": "Input.Text",
                            "id": "myEmail",
                            "placeholder": "${properties[1].placeholder}",
                            "style": "Email"
                        },
                        {
                            "type": "TextBlock",
                            "text": "${properties[2].title}"
                        },
                        {
                            "type": "Input.Text",
                            "id": "myTel",
                            "placeholder": "${properties[2].placeholder}",
                            "style": "Tel"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "Image",
                            "url": "${thumbnailUrl}",
                            "size": "auto"
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}
Adaptive Card