Есть ли способ правильно выровнять изображение и текст в адаптивной карточке для команд с помощью набора столбцов?

Question

Для созданного нами бота команд мы используем адаптивные карты для отображения результатов поиска и информации для контактов. Проблема, которая возникает, заключается в том, что стиль является неправильным. Когда мы пытаемся выровнять изображение с каким-либо текстом, оно не выравнивается правильно. Когда я пробую онлайн-дизайнера с настройкой «Microsoft Teams - Light», он выглядит идеально, но в командах с тем же json выравнивание не получается таким же. Любые полезные советы по решению этой проблемы приветствуются.

Для отображения контактной информации, например телефонных номеров, в настоящее время я использую набор столбцов с изображением в первом столбце и номером телефона во втором.

В командах это выглядит так:

Онлайн-пример показывает:

Изображения для номера телефона в командах намного больше, и текст не выровнен должным образом, в то время как онлайн-демонстрация предполагает, что он должен работать. Ниже используется JSON.

JSON используется:

{
  "type": "ColumnSet",
  "columns": [
    {
      "type": "Column",
      "width": "auto",
      "items": [
        {
          "type": "Image",
          "url": "https://****/Assets/Icons/WorkPhone.png"
        }
      ]
    },
    {
      "type": "Column",
      "width": "stretch",
      "items": [
        {
          "type": "TextBlock",
          "text": "+31612345678"
        }
      ],
      "verticalContentAlignment": "center"
    }
  ],
  "selectAction": {
    "type": "Action.Submit",
    "data": {
      "PhoneNumber": "+31612345678",
      "Action": "CallSearchResult"
    },
    "title": "callsearchresult"
  }
}

Похоже, что Microsoft Teams делает это иначе, или стилизация неправильная Любая помощь или объяснение будет оценено. Заранее спасибо.

Answer 1

К сожалению, Microsoft Teams в настоящее время поддерживает только Adaptive Cards 1.0, а verticalContentAlignment был представлен в 1.1. Конструктор адаптивных карт не включает возможность указывать версию или включать только элементы и свойства, доступные на выбранной платформе. Вы ничего не можете с этим поделать, но вот несколько идей.

Вариант 1

Если вы хотите добавить свой голос в список клиентов, требующих более современной поддержки Adaptive Card, не стесняйтесь размещать сообщения на странице GitHub или на форуме .

Вариант 2

Похоже, что проблема усугубляется тем, что ваше изображение вверху пустое:

Если вы обрежете изображение, оно, вероятно, будет выглядеть немного лучше.

Вариант 3

Вы можете немного сдвинуть текст, добавив TextBlock над ним (с пробелами):

{
  "type": "TextBlock",
  "text": " "
},
{
  "type": "TextBlock",
  "text": "+31612345678"
}

Это что-то вроде азартной игры, потому что она не обязательно будет выглядеть правильно на всех клиентах (настольные и мобильные, и т. Д.)

Вариант 4

Если вы действительно хотите получить правильный вид прямо сейчас, вы можете просто вставить номер телефона в изображение, чтобы вам не понадобился текстовый блок или даже набор столбцов. Я думаю, это нормально, что его нельзя выделить в текстовом виде и скопировать, так как похоже, что вы уже используете действие выбора, которое автоматически отправит номер боту. Фактически, если вы делаете это, то, вероятно, лучше вообще не выделять текст, поскольку пользователю может быть неприятно пытаться выделить текст и случайно нажать кнопку.