비고
적응형 카드로 구동되는 코필로트, Teams 또는 Outlook 시나리오를 빌드하고 있나요? 적응형 카드 요구 사항을 충족하는 새로운 원스톱 상점인 적응형 카드 설명서 허브를 방문하세요! 반응형 레이아웃, 아이콘, 배지, 회전식, 차트 등 다양한 새로운 기능에 대한 전체 설명서를 포함하여 찾고 있는 모든 리소스가 있습니다.
이러한 샘플은 만들 수 있는 카드 유형의 티저일 뿐입니다 . 앞으로 나아가 어떤 시나리오도 가능하게 만들기 위해 그것들을 조정하세요!
접근성에 대한 중요한 참고 사항: 스키마 버전 1.3에서는 접근성을 개선하기 위해 입력에 레이블 속성을 도입했습니다. 대상으로 지정하는 호스트 앱이 v1.3을 지원하는 경우 아래 일부 샘플에서 볼 수 있듯이 TextBlock 대신 레이블을 사용해야 합니다. 대부분의 호스트 앱이 최신 버전으로 업데이트되면 그에 따라 샘플을 업데이트합니다.
활동 업데이트 샘플
다음 섹션에서는 템플릿을 사용 또는 사용하지 않고 표시된 "활동 업데이트" 적응형 카드 샘플에 대한 JSON을 표시합니다.
JSON 코드(템플릿 제외)
JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium",
"wrap": true,
"style": "heading"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"altText": "Matt Hidinger",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"label": "Enter the due date",
"id": "dueDate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"label": "Add a comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}
JSON 코드(템플릿 사용)
데이터 JSON
{
"title": "Publish Adaptive Card Schema",
"description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"creator": {
"name": "Matt Hidinger",
"profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
},
"createdUtc": "2017-02-14T06:08:39Z",
"viewUrl": "https://adaptivecards.io",
"properties": [
{ "key": "Board", "value": "Adaptive Cards" },
{ "key": "List", "value": "Backlog" },
{ "key": "Assigned to", "value": "Matt Hidinger" },
{ "key": "Due date", "value": "Not set" }
]
}
템플릿 JSON
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "${title}",
"style": "heading",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "person",
"url": "${creator.profileImage}",
"altText": "${creator.name}",
"size": "small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "${creator.name}",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(${string(createdUtc)}, SHORT)}}",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"$data": "${properties}",
"title": "${key}:",
"value": "${value}"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"label": "Enter the due date",
"id": "dueDate"
},
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"label": "Add a comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "${viewUrl}",
"role": "button"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5"
}