Мы создали бота с использованием бот-фреймворка Microsoft, который интегрирован в команды Microsoft. Мы создали несколько адаптивных карточек для интерактивного общения с ботом. Одна из адаптивных карт вызывает проблемы проектирования в IPhone X приложении Microsoft Teams.
Мы использовали адаптивный шаблон карты для построения этой карты, который отображает список задач вместе со статусом задачи. Каждое задание имеет Input.Toggle (флажок), и в конце будет отображаться кнопка. Когда флажки установлены и нажата кнопка
Мы отправляем новую карточку с деталями задачи, где они могут редактировать статус и так далее. Ниже приведены данные JSON.
Редактор полезных данных карты Json Данные:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"border": true,
"items": [
{
"$data": "{properties}",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"id": "{id}",
"type": "Input.Toggle",
"title": " ",
"value": "false",
"wrap": false
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Container",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{peers}",
"title": "{key}",
"value": "{value}"
}
]
}
],
"style": "emphasis"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "{actionSubmitTitle}",
"horizontalAlignment": "center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Редактор данных примера:
"properties":[
{
"id":"InputToggle1",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle2",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle3",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle4",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
}
],
"actionSubmitTitle":"Update Timesheet"
}
Переключатель InputToggle находится внутри столбец с width как auto , и он отлично воспроизводится в Microsoft Desktop и Android App , а в IOS app не отображается
Когда мы устанавливаем для свойства width значение stretch , InputToggle отображается в IOS App большого размера, но в настольном приложении и Android приложении столбец выдвигается и занимает много места.
Пожалуйста, помогите мне, чтобы мы могли отобразить Input.Toggle в IOS Microsoft Teams, не нарушая дизайн в Desktop и Android Teams App.
Редактировать : Добавление окончательной JSON, отправленной боту. Столбцы в наборе столбцов будут динамически изменяться в зависимости от списка запросов в базе данных.
{
"type":"AdaptiveCard",
"version":"1.0",
"body":[
{
"type":"Container",
"border":true,
"items":[
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"width":"auto",
"items":[
{
"id":"inputToggle1",
"type":"Input.Toggle",
"title":" ",
"value":"false",
"wrap":false
}
]
},
{
"type":"Column",
"width":"stretch",
"items":[
{
"type":"Container",
"items":[
{
"type":"FactSet",
"facts":[
{
"title":"Project",
"value":"Project 1"
},
{
"title":"Task",
"value":"Task 1"
},
{
"title":"Status",
"value":"Pending"
}
]
}
],
"style":"emphasis"
}
]
}
]
},
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"width":"auto",
"items":[
{
"id":"inputToggle2",
"type":"Input.Toggle",
"title":" ",
"value":"false",
"wrap":false
}
]
},
{
"type":"Column",
"width":"stretch",
"items":[
{
"type":"Container",
"items":[
{
"type":"FactSet",
"facts":[
{
"title":"Project",
"value":"Project 1"
},
{
"title":"Task",
"value":" Task 2"
},
{
"title":"Status",
"value":"Completed"
}
]
}
],
"style":"emphasis"
}
]
}
]
}
]
}
],
"actions":[
{
"type":"Action.Submit",
"title":"Update Timesheet",
"horizontalAlignment":"center"
}
],
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json"
}
Спасибо.