#botframework #microsoft-teams #adaptive-cards #teams-toolkit
#botframework #microsoft-teams #адаптивные карты #teams-toolkit
Вопрос:
Мы пытаемся создать бота с использованием адаптивных карт в MS-Teams. Предварительный просмотр с использованием adaptive card designer позволяет получить нужное изображение по мере необходимости. Но при использовании в приложении Teams изображение выглядит полностью искаженным.
Изображение предварительного просмотра, как в designer:
Вывод изображения, как в приложении MS teams:
Ниже приведен Json, используемый для адаптивных карт:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Howdy!",
"weight": "Bolder",
"color": "Accent",
"size": "Large"
},
{
"type": "TextBlock",
"text": "How are you doing today? ",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "awful",
"comment": ""
},
"title": "awful"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/3-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "bad",
"comment": ""
},
"title": "bad"
},
"size": "Large",
"width": "700px",
"height": "60px",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/1-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "ok",
"comment": ""
},
"title": "ok"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/5-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "good",
"comment": ""
},
"title": "good"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/4-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "terrific",
"comment": ""
},
"title": "terrific"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Add a comment",
"isMultiline": true,
"id": "comment"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"rating": "",
"comment": ""
}
}
]}
Заранее спасибо!!
Комментарии:
1. Я вижу «ширину»: «700px» для всех элементов — это выглядит неправильно на основе скриншота. Похоже, что все вместе — будет 700px
2. Мы можем воспроизвести это, мы проверяем это внутренне.
3. Мы обнаружили ошибку для того же.
4. @Meghana-MSFT — Спасибо . Надеюсь, исправление будет предоставлено. Прямо сейчас нам удалось разместить изображения в вертикальном порядке, чтобы они выглядели хорошо.
5. Эта проблема была исправлена, мы проверили, и она работает нормально. Прикрепление фрагмента кода для высоты и ширины смайликов. {«тип»: «Изображение»,»url»:» howdy1.blob.core.windows.net/sample /… «:{«тип»:»Действие. Submit»,»data»:{«rating»:»awful»,»comment»:»»},»title»:»awful»},»size»:»Large»,»width»:»70px»,»height»:»60px»}
Ответ №1:
Перемещение комментария в ответ :
Эта проблема была исправлена, мы проверили, и она работает нормально. Прикрепление фрагмента кода для высоты и ширины смайликов. Пожалуйста, указывайте ширину в соответствии с высотой.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "awful",
"comment": ""
},
"title": "awful"
},
"size": "Large",
"width": "70px",
"height": "60px"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
}