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

Inputs sample

Data JSON
{
    "ParticipantInfoForm":{
        "title":"Input.Text elements"
    },
    "Survey": {
        "title":"Input ChoiceSet",
        "questions": [
                {
                    "question":"What color do you want? (compact)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question": "What color do you want? (expanded)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question": "What color do you want? (multiselect)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question":"I accept the terms and conditions (True/False)"
                },
                {
                    "question":"Red cars are better than other cars"
                }
            ]
        }
}
Template JSON
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": " ${ParticipantInfoForm.title}",
            "horizontalAlignment": "Center"
        },
        {
            "type": "Input.Text",
            "placeholder": "Name",
            "style": "text",
            "maxLength": 0,
            "id": "SimpleVal"
        },
        {
            "type": "Input.Text",
            "placeholder": "Homepage",
            "style": "Url",
            "maxLength": 0,
            "id": "UrlVal"
        },
        {
            "type": "Input.Text",
            "placeholder": "Email",
            "style": "Email",
            "maxLength": 0,
            "id": "EmailVal"
        },
        {
            "type": "Input.Text",
            "placeholder": "Phone",
            "style": "Tel",
            "maxLength": 0,
            "id": "TelVal"
        },
        {
            "type": "Input.Text",
            "placeholder": "Comments",
            "style": "text",
            "isMultiline": true,
            "maxLength": 0,
            "id": "MultiLineVal"
        },
        {
            "type": "Input.Number",
            "placeholder": "Quantity",
            "min": -5,
            "max": 5,
            "id": "NumVal"
        },
        {
            "type": "Input.Date",
            "placeholder": "Due Date",
            "id": "DateVal",
            "value": "2017-09-20"
        },
        {
            "type": "Input.Time",
            "placeholder": "Start time",
            "id": "TimeVal",
            "value": "16:59"
        },
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${Survey.title} ",
            "horizontalAlignment": "Center"
        },
        {
            "type": "TextBlock",
            "text": "${Survey.questions[0].question}"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "CompactSelectVal",
            "value": "1",
            "choices": [
                {
                    "$data": "${Survey.questions[0].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "${Survey.questions[1].question}"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "SingleSelectVal",
            "style": "expanded",
            "value": "1",
            "choices": [
                {
                    "$data": "${Survey.questions[1].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "${Survey.questions[2].question}"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "MultiSelectVal",
            "isMultiSelect": true,
            "value": "1,3",
            "choices": [
                {
                    "$data": "${Survey.questions[2].items}",
                    "title": "${choice}",
                    "value": "${value}"
                }
            ]
        },
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Input.Toggle",
            "horizontalAlignment": "Center"
        },
        {
            "type": "Input.Toggle",
            "title": "${Survey.questions[3].question}",
            "id": "AcceptsTerms",
            "wrap": false,
            "value": "false"
        },
        {
            "type": "Input.Toggle",
            "title": "${Survey.questions[4].question}",
            "valueOn": "RedCars",
            "valueOff": "NotRedCars",
            "id": "ColorPreference",
            "wrap": false,
            "value": "NotRedCars"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
                "id": "1234567890"
            }
        },
        {
            "type": "Action.ShowCard",
            "title": "Show Card",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "Input.Text",
                        "placeholder": "enter comment",
                        "style": "text",
                        "maxLength": 0,
                        "id": "CommentVal"
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        }
    ]
}
Adaptive Card