Форматирование карточек в Microsoft Teams

Ниже приводится два способа добавления насыщенного форматирования текста в карты:

Карточки поддерживают форматирование только в свойстве текста, а не в свойствах заголовка или субтитров. Форматирование можно задать с помощью подмножество форматирования XML или HTML или Markdown в зависимости от типа карты. Для текущей и будущей разработки адаптивных карт рекомендуется форматирование Markdown.

Поддержка форматирования отличается между типами карт. Отрисовка карты может незначительно отличаться между настольным компьютером и мобильными Microsoft Teams клиентами, а также Teams в настольном браузере.

Вы можете включить в линию изображение с любой Teams карточкой. Изображения могут быть отформатированы как , или файлы и не должны превышать .png .jpg .gif 1024 ×1024 px или 1 МБ. Анимированный GIF не поддерживается. Дополнительные сведения см. в некоторых видах карт.

Можно форматирование адаптивных карт и Office 365 соединительные карты с markdown, которые включают определенные поддерживаемые стили.

Формат карт с Markdown

Следующие типы карт поддерживают форматирование Markdown в Teams:

  • Адаптивные карты: Markdown поддерживается в поле Адаптивная карта, а Textblock также Fact.Title и Fact.Value . HTML не поддерживается в адаптивных картах.
  • Office 365 соединители: Markdown и ограниченный HTML поддерживаются в Office 365 соединителях в текстовых полях.

Вы можете использовать newlines для адаптивных карт с помощью последовательностей или \r \n побега для newlines в списках. Форматирование отличается между настольным компьютером и мобильными версиями Teams адаптивных карт. Упоминания на основе карт поддерживаются в веб-, настольных и мобильных клиентах. Свойство маскировки информации можно использовать для маскировки определенных сведений, таких как пароль или конфиденциальные сведения пользователей в элементе ввода адаптивной Input.Text карты. Ширину адаптивной карты можно расширить с помощью width объекта. Вы можете включить поддержку ввода в адаптивных картах и фильтровать набор вариантов ввода при типе ввода пользователем. Свойство можно использовать для выборочного отображения изображений msteams в представлении сцены.

Форматирование отличается между настольным компьютером и мобильными версиями Teams для адаптивных карт и соединительные карты. В этом разделе можно перейти к примеру формата Markdown для адаптивных карт и соединительные карты.

Следующая таблица содержит поддерживаемые стили Textblock для Fact.Title , и Fact.Value :

Style Пример Markdown
Полужирный Bold **Bold**
Курсив Italic _Italic_
Неупорядоченный список
  • текст
  • текст
- Item 1\r- Item 2\r- Item 3
Упорядоченный список
  1. текст
  2. текст
1. Green\r2. Orange\r3. Blue
Гиперссылки Bing [Title](url)

Следующие теги Markdown не поддерживаются:

  • Заголовки
  • Таблицы
  • изображения;
  • Предформатированный текст
  • Blockquotes

Newlines для адаптивных карт

Вы можете использовать \r последовательности или \n последовательности побега для newlines в списках. Использование \n\n в списках приводит к отступам следующего элемента в списке. Если вам требуются новые линии в другом месте в TextBlock, используйте \n\n .

Различия для мобильных и настольных компьютеров для адаптивных карт

На рабочем столе форматирование адаптивной карты markdown отображается на следующем изображении как в веб-браузерах, так и в клиентском приложении Teams:

Форматирование разметки адаптивной карты в клиенте настольных компьютеров

На iOS форматирование разметки адаптивной карты отображается на следующем изображении:

Форматирование разметки адаптивной карты в iOS

На Android форматирование разметки адаптивной карты отображается так, как показано на следующем изображении:

Форматирование разметки адаптивной карты в Android

Дополнительные сведения см. в текстовом документе Adaptive Cards.

Примечание

Указанные в этом разделе функции даты и локализации не поддерживаются в Teams.

Пример формата адаптивных карт

В следующем коде показан пример форматирования адаптивных карт:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
        }
    ]
}

Упоминание поддержки в адаптивных картах

Вы можете добавить @mentions в тело адаптивной карты для ботов и ответов расширения обмена сообщениями. Чтобы добавить @mentions в карты, следуйте той же логике уведомлений и отрисовки, что и упоминания на основе сообщений в беседах каналов и групповых чатов.

Боты и расширения обмена сообщениями могут включать упоминания в контенте карты в элементах TextBlock и FactSet.

Примечание

  • Элементы мультимедиа в настоящее время не поддерживаются в адаптивных картах на Teams платформе.
  • Упоминания каналов и команд не поддерживаются в сообщениях ботов.

Чтобы включить упоминание в адаптивной карте, вашему приложению необходимо включить следующие элементы:

  • <at>username</at> в поддерживаемых элементах адаптивной карты.
  • Объект внутри свойства в содержимом карточки включает Teams имя пользователя mention msteams упоминаемого пользователя.
  • Уникальный userId для вашего бот-ИД и определенного пользователя. Его можно использовать для @mention определенного пользователя. Можно получить с помощью одного из параметров, указанных в userId получить пользовательский ID.

Пример адаптивной карты с упоминанием

В следующем коде показан пример адаптивной карты с упоминанием:

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

AAD объекта и UPN в упоминаемом пользователем

Teams платформа позволяет упоминать пользователей с их AAD и имя принципа пользователя (UPN), а также существующие имена упоминаний. Боты с адаптивными картами и соединителями с входящие веб-окки поддерживают два удостоверения упоминания пользователя.

В следующей таблице описываются недавно поддерживаемые пользовательские ID::

ID Вспомогательные возможности Описание Пример
AAD объекта Бот, соединитель AAD объекта пользователя 49c4641c-ab91-4248-aebb-6a7de286397b
UPN Бот, соединитель AAD пользователя upN john.smith@microsoft.com

Упоминание пользователя в ботах с адаптивными картами

Боты поддерживают упоминание пользователя с помощью AAD объекта и upN, а также существующих ID. Поддержка двух новых удостоверений доступна в ботах для текстовых сообщений, тела адаптивных карт и ответа на расширение обмена сообщениями. Боты поддерживают указанные в беседе и сценариях invoke ID-упоминания. Пользователь получает уведомление о канале активности при @mentioned с ID-данными.

Примечание

Обновление схемы и изменения пользовательского интерфейса и UX не требуются для упоминаний пользователей с адаптивными картами в Bot.

Пример

Пример упоминания пользователей в ботах с адаптивными картами следующим образом:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele AAD</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele AAD</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

Ниже показано упоминание пользователя с адаптивной картой в Bot:

Упоминание пользователя в боте с адаптивной картой

Упоминание пользователя в входящих веб-пользователях с адаптивными картами

Входящие веб-сайты начинают поддерживать упоминание пользователей в адаптивных картах с помощью AAD объекта и upN.

Примечание

  • Включить упоминание пользователя в схеме входящих веб-ок для поддержки AAD объекта и UPN.
  • Изменения пользовательского интерфейса и UX не требуются для упоминаний пользователей с AAD объекта и upN.
  • Уведомление о канале действий для входящих веб-пользователей с упоминанием пользователя будет доступно в будущем выпуске.
Пример

Пример упоминания пользователя в входящих веб-пользователях следующим образом:

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele AAD</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele AAD</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

На следующем изображении иллюстрируется упоминание пользователя в входящих веб-пользователях:

Упоминание пользователя в входящих веб-пользователях

Маскировка сведений в адаптивных картах

Используйте свойство маскировки информации для маскировки определенных сведений, таких как пароль или конфиденциальные сведения пользователей в элементе ввода адаптивной Input.Text карты.

Примечание

Эта функция поддерживает только маскировку сведений из стороны клиента. Текст ввода в маске отправляется в виде четкого текста на адрес конечной точки HTTPS, заданный во время конфигурации бота.

Чтобы скрыть сведения в адаптивных картах, добавьте свойство для введите и установите isMasked Input.Text значение true .

Пример адаптивной карты с свойством маскировки

В следующем коде показан пример адаптивной карты с свойством маскировки:

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

Ниже приводится пример маскировки сведений в адаптивных картах:

Маскировка информационного изображения

Адаптивная карта с полной шириной

Свойство можно использовать для расширения ширины адаптивной карты и использования msteams дополнительного пространства холста. В следующем разделе приводится информация об использовании свойства.

Создание карт полной ширины

Чтобы сделать полную ширину адаптивной карты, объект в свойстве контента карточки должен width msteams быть задат. Full

Пример адаптивной карты с полной шириной

Чтобы сделать полную ширину адаптивной карты, приложение должно включать элементы из следующего примера кода:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

На следующем изображении показана адаптивная карта с полной шириной:

Представление адаптивной карты полной ширины

На следующем изображении по умолчанию показано представление адаптивной карты, если свойство не настроено width на полное:

Представление адаптивной карты малой ширины

Поддержка typeahead

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

Чтобы включить введите в Input.Choiceset течение , установить и обеспечить style filtered isMultiSelect установлено false .

Пример адаптивной карты с поддержкой введите вперед

В следующем коде показан пример адаптивной карты с поддержкой заранее:

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Представление сцены для изображений в адаптивных картах

В адаптивной карте свойство можно использовать для выборочного отображения изображений в представлении msteams сцены. Когда пользователи наведите курсор над изображениями, они могут видеть значок расширения, для которого allowExpand атрибуту true установлено . Сведения об использовании свойства см. в следующем примере:

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Когда пользователи наведите курсор над изображением, в правом верхнем углу появится значок расширения, как показано на следующем изображении:

Адаптивная карта с расширяемым изображением

Изображение отображается в представлении сцены, когда пользователь выбирает значок расширения, как показано на следующем изображении:

Изображение, расширенное до представления сцены

В представлении сцены пользователи могут масштабировать изображение и увеличивать его. Вы можете выбрать изображения в адаптивной карте, которые должны иметь эту возможность.

Примечание

  • Возможность масштабирования и масштабирования применяется только к элементам изображения, которые являются типом изображения в адаптивной карте.
  • Для Teams мобильных приложений по умолчанию доступны функции представления сцен для изображений в адаптивных картах. Пользователи могут просматривать изображения адаптивной карты в представлении сцены, просто нажав на изображение, независимо от того, присутствует атрибут или allowExpand нет.

Форматные карты с HTML

Следующие типы карт поддерживают форматирование HTML в Teams:

  • Office 365 соединители: ограниченное разметка и форматирование HTML поддерживаются в Office 365 соединителях.
  • Карточки героя и эскиза: HTML-теги поддерживаются для простых карт, таких как карты героя и эскизы.

Форматирование отличается между настольным компьютером и мобильными версиями Teams для Office 365 и простых карт. В этом разделе можно перейти к примеру формата HTML для соединительных карт и простых карт.

Карты Connector поддерживают ограниченное форматирование Markdown и HTML.

Style Пример HTML
Полужирный text <strong>text</strong>
Курсив text <em>text</em>
Загон (уровни 1 – 3) Text <h3>Text</h3>
Зачеркнутый text <strike>text</strike>
Неупорядоченный список
  • текст
  • текст
<ul><li>text</li><li>text</li></ul>
Упорядоченный список
  1. текст
  2. текст
<ol><li>text</li><li>text</li></ol>
Предформатированный текст text <pre>text</pre>
Blockquote
текст
<blockquote>text</blockquote>
Hyperlink Bing <a href="https://www.bing.com/">Bing</a>
Ссылка на изображение Duck on a rock <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

В соединительных картах новые линии отрисовываются в HTML с помощью <p> тега.

Различия между мобильными и настольными устройствами для соединительная карта

На рабочем столе форматирование HTML-форматов для карт соединителя отображается на следующем изображении:

Форматирование HTML для соединителя карт в клиенте рабочего стола

На iOS форматирование HTML отображается на следующем изображении:

Форматирование HTML для соединительных карт в клиенте iOS

Карты соединителя, использующие HTML для iOS, включают следующие проблемы:

  • Встроенные изображения не отрисовываются на iOS с помощью markdown или HTML в соединителях.
  • Предформатированный текст отрисовывается, но не имеет серого фона.

На Android форматирование HTML отображается на следующем изображении:

Форматирование HTML для соединительных карт в клиенте Android

Пример формата для htmL-соединителя карт

В следующем коде показан пример форматирования для htmL-соединителя карт:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

См. также