Переключатель ввода адаптивных карт (CheckBox) IOS выпуск - PullRequest
0 голосов
/ 03 мая 2020

Мы создали бота с использованием бот-фреймворка Microsoft, который интегрирован в команды Microsoft. Мы создали несколько адаптивных карточек для интерактивного общения с ботом. Одна из адаптивных карт вызывает проблемы проектирования в IPhone X приложении Microsoft Teams.

Мы использовали адаптивный шаблон карты для построения этой карты, который отображает список задач вместе со статусом задачи. Каждое задание имеет Input.Toggle (флажок), и в конце будет отображаться кнопка. Когда флажки установлены и нажата кнопка Sample Image Reference

Мы отправляем новую карточку с деталями задачи, где они могут редактировать статус и так далее. Ниже приведены данные 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"
}

Спасибо.

...