備註
你正在建立由 Adaptive Cards 驅動的 Copilot、Teams 或 Outlook 應用場景嗎？ 造訪 Adaptive Card Documentation Hub，這個全新的一站式平台，滿足您所有 Adaptive Card 的需求！ 它擁有你所需的所有資源，包括許多新功能的完整文件，例如響應式版面、圖示、徽章、旋轉木馬、圖表等等！
這些範例只是你可以製作卡片類型的 預告 。 去調整它們，使任何情境都能實現！
關於無障礙的重要說明： 在結構的 1.3 版本中，我們在 Inputs 上引入 了標籤 屬性以提升可及性。 如果你目標的 主機應用程式 支援 v1.3，建議使用 label 而非 TextBlock ，如下方範例所示。 當大多數 Host 應用程式更新到最新版本後，我們會相應更新樣本。
帶有驗證樣本的輸入
以下章節展示「帶驗證的輸入」Adaptive Card 範例的 JSON，分別顯示使用模板和不使用模板的情況。
JSON 程式碼（無模板）
JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Input.Text elements",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"label": "Name",
"style": "text",
"id": "SimpleVal",
"isRequired": true,
"errorMessage": "Name is required",
"placeholder": "Enter your name"
},
{
"type": "Input.Text",
"label": "Homepage",
"style": "url",
"id": "UrlVal",
"placeholder": "Enter your homepage url"
},
{
"type": "Input.Text",
"label": "Email",
"style": "email",
"id": "EmailVal",
"placeholder": "Enter your email"
},
{
"type": "Input.Text",
"label": "Phone",
"style": "tel",
"id": "TelVal",
"placeholder": "Enter your phone number"
},
{
"type": "Input.Text",
"label": "Comments",
"style": "text",
"isMultiline": true,
"id": "MultiLineVal",
"placeholder": "Enter any comments"
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Input.Text InlineAction",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"label": "Text input with an inline action with no icon",
"id": "textInlineActionId",
"placeholder": "Enter text",
"inlineAction": {
"type": "Action.OpenUrl",
"title": "Reply",
"tooltip": "Reply to this message",
"url": "https://adaptivecards.io",
"role": "button"
}
},
{
"type": "Input.Number",
"label": "Quantity (Minimum -5, Maximum 5)",
"min": -5,
"max": 5,
"value": 1,
"id": "NumVal",
"errorMessage": "The quantity must be between -5 and 5"
},
{
"type": "Input.Date",
"label": "Due Date",
"id": "DateVal",
"value": "2017-09-20"
},
{
"type": "Input.Time",
"label": "Start time",
"id": "TimeVal",
"value": "16:59"
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Input.ChoiceSet",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal",
"label": "What color do you want? (compact)",
"style": "compact",
"value": "1",
"choices": [
{
"title": "Red",
"value": "1"
},
{
"title": "Green",
"value": "2"
},
{
"title": "Blue",
"value": "3"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "SingleSelectVal",
"label": "What color do you want? (expanded)",
"style": "expanded",
"value": "1",
"choices": [
{
"title": "Red",
"value": "1"
},
{
"title": "Green",
"value": "2"
},
{
"title": "Blue",
"value": "3"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "MultiSelectVal",
"label": "What colors do you want? (multiselect)",
"isMultiSelect": true,
"value": "1,3",
"choices": [
{
"title": "Red",
"value": "1"
},
{
"title": "Green",
"value": "2"
},
{
"title": "Blue",
"value": "3"
}
]
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Input.Toggle",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Toggle",
"label": "Please accept the terms and conditions:",
"title": "I accept the terms and conditions (True/False)",
"valueOn": "true",
"valueOff": "false",
"id": "AcceptsTerms",
"isRequired": true,
"errorMessage": "Accepting the terms and conditions is required"
},
{
"type": "Input.Toggle",
"label": "How do you feel about red cars?",
"title": "Red cars are better than other cars",
"valueOn": "RedCars",
"valueOff": "NotRedCars",
"id": "ColorPreference"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "1234567890"
}
},
{
"type": "Action.ShowCard",
"title": "Show Card",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"label": "Enter comment",
"style": "text",
"id": "CommentVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}
JSON 程式碼（含模板）
資料 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 colors 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"
}
]
}
}
範本 JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": " ${ParticipantInfoForm.title}",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Text",
"label": "Name",
"style": "text",
"id": "SimpleVal",
"isRequired": true,
"errorMessage": "Name is required",
"placeholder": "Enter your name"
},
{
"type": "Input.Text",
"label": "Homepage",
"style": "url",
"id": "UrlVal",
"placeholder": "Enter your homepage url"
},
{
"type": "Input.Text",
"label": "Email",
"style": "email",
"id": "EmailVal",
"placeholder": "Enter your email"
},
{
"type": "Input.Text",
"label": "Phone",
"style": "tel",
"id": "TelVal",
"placeholder": "Enter your phone number"
},
{
"type": "Input.Text",
"label": "Comments",
"style": "text",
"isMultiline": true,
"id": "MultiLineVal",
"placeholder": "Enter any comments"
},
{
"type": "Input.Number",
"label": "Quantity (Minimum -5, Maximum 5)",
"min": -5,
"max": 5,
"value": 1,
"id": "NumVal",
"errorMessage": "The quantity must be between -5 and 5"
},
{
"type": "Input.Date",
"label": "Due Date",
"id": "DateVal",
"value": "2017-09-20"
},
{
"type": "Input.Time",
"label": "Start time",
"id": "TimeVal",
"value": "16:59"
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "${Survey.title} ",
"horizontalAlignment": "center",
"wrap": true,
"style": "heading"
},
{
"type": "Input.ChoiceSet",
"id": "CompactSelectVal",
"label": "${Survey.questions[0].question}",
"style": "compact",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[0].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "SingleSelectVal",
"label": "${Survey.questions[1].question}",
"style": "expanded",
"value": "1",
"choices": [
{
"$data": "${Survey.questions[1].items}",
"title": "${choice}",
"value": "${value}"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "MultiSelectVal",
"label": "${Survey.questions[2].question}",
"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",
"wrap": true,
"style": "heading"
},
{
"type": "Input.Toggle",
"label": "Please accept the terms and conditions:",
"title": "${Survey.questions[3].question}",
"valueOn": "true",
"valueOff": "false",
"id": "AcceptsTerms",
"isRequired": true,
"errorMessage": "Accepting the terms and conditions is required"
},
{
"type": "Input.Toggle",
"label": "How do you feel about red cars?",
"title": "${Survey.questions[4].question}",
"valueOn": "RedCars",
"valueOff": "NotRedCars",
"id": "ColorPreference"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "1234567890"
}
},
{
"type": "Action.ShowCard",
"title": "Show Card",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"label": "Enter comment",
"style": "text",
"id": "CommentVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}