Пошаговое руководство: создание первой адаптивной карточки в MS Teams

By Mirko Peters · 2026-08-12 · Updated 2026-08-29

Добро пожаловать обратно в блог! Если вы когда-либо чувствовали себя полностью перегруженными постоянными уведомлениями о сообщениях в чатах, сообщениях в каналах и автоматических предупреждениях, вы определённо…

Automatically translated with AI from the original post. Read the English original

Titelbild: Step-by-Step Guide: Building Your First Adaptive Card in MS Teams

Добро пожаловать в блог! Если вы когда-либо чувствовали себя совершенно перегруженными постоянными уведомлениями в чатах, сообщениями в каналах и автоматическими предупреждениями, вы точно не одиноки. Сегодня цифровые работники обрабатывают огромный объём информации, и зачастую уведомления приходят десятками каждый час. Этот непрерывный поток разрушает концентрацию, заставляет постоянно переключаться между задачами и к концу дня оставляет ощущение полного истощения. В нашем подкасте Build Actionable Teams Notifications with Adaptive Cards мы разобрали, как можно кардинально изменить подход к коммуникации, отказавшись от бесполезных статичных оповещений и заменив их умными интерактивными сообщениями.

Сегодня мы продолжим эту тему и перейдём к практике. Это руководство проведёт вас через процесс создания первой адаптивной карточки для Microsoft Teams. Нужны ли вам упрощённые внутренние согласования, рассылка критических инцидентов или просто более удобный повседневный рабочий процесс команды, освоение адаптивных карточек — один из самых эффективных навыков в экосистеме Microsoft 365. Давайте сразу перейдём к тому, что нужно, чтобы начать.

Основы: почему традиционные уведомления не работают

Прежде чем приступить к созданию, полезно понять основную проблему, которую мы пытаемся решить. Большинство стандартных уведомлений в Microsoft Teams сообщают, что что-то произошло, но не дают прямой возможности ответить. Представьте, что вы получили оповещение о том, что новый заказ на закупку требует вашего согласования. При обычном текстовом уведомлении вам нужно прочитать сообщение, открыть браузер, войти в отдельное корпоративное приложение, найти нужную запись и только после этого нажать «Утвердить».

Такой многошаговый путь разрушает концентрацию и отнимает драгоценные минуты. Умножьте это прерывание на шестьдесят раз в час — и ваша продуктивность испаряется. Адаптивные карточки решают эту проблему, перенося интерфейс приложения прямо в окно чата. Они позволяют просматривать данные, заполнять поля форм и нажимать кнопки действий, не покидая клиент Teams. Однако для успешного внедрения таких карточек нужно понимать инструменты и предварительные требования, необходимые для их создания.

Предварительные требования и инструменты

Для создания адаптивных карточек не требуется серьёзный опыт разработки программного обеспечения, но важно ознакомиться со стандартным набором инструментов для создания, предлагаемым Microsoft. Наличие нужных утилит под рукой обеспечивает плавный процесс проектирования — от концепции до развёртывания.

Ключевые ресурсы для разработчиков карточек

Adaptive Card Designer: браузерная визуальная среда, в которой можно перетаскивать элементы, просматривать живой предпросмотр на разных устройствах и мгновенно генерировать лежащую в основе JSON-схему.
Microsoft Teams UI Kit (Figma): незаменимый инструмент для ознакомления с рекомендациями по дизайну, темами, стандартами доступности и адаптивными размерами в различных клиентских приложениях.
Официальный центр документации: ваш главный справочник для проверки поддерживаемых версий схемы, действий карточек и ограничений отображения в Teams.
Примеры шаблонов: готовые JSON-шаблоны из открытого сообщества, которые помогут быстрее начать работу с типовыми сценариями, такими как согласования, опросы и оповещения с богатым медиаконтентом.

Когда среда разработки настроена, можно приступать к созданию визуальной структуры и структуры данных карточки.

Создание адаптивной карточки

Создание адаптивной карточки в первую очередь связано с компоновкой макета и структурой JSON. Поскольку адаптивные карточки используют платформенно-независимую схему, одно определение карточки может нативно отображаться в Windows, macOS, iOS, Android и веб-клиентах.

Использование Adaptive Card Designer

Проще всего создать первую карточку с помощью веб-инструмента проектирования. Вот простой порядок действий:

Откройте официальный Adaptive Card Designer в веб-браузере.
Выберите стартовый шаблон, например базовое уведомление или форму ввода, чтобы получить надёжную основу.
Перетащите на холст визуальные элементы, такие как TextBlock, FactSet, изображения и ActionSet.
Настройте свойства, например размеры шрифта, интервалы и заголовки кнопок, чтобы они соответствовали стилю коммуникации вашей организации.
Переключите предпросмотр на «Microsoft Teams», чтобы проверить, как карточка будет выглядеть для конечных пользователей.
Скопируйте автоматически сгенерированный JSON-код из панели просмотра кода.

Основы структуры JSON

Любая Adaptive Card в конечном итоге работает на основе структурированного JSON-документа. Ниже приведён простой пример схемы JSON для Adaptive Card, который задаёт базовое приветствие и кнопку действия:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to your first adaptive card!",
      "size": "Medium",
      "weight": "Bolder"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Acknowledge"
    }
  ]
}

В этом фрагменте корневой объект определяет тип карточки и версию схемы. Массив body содержит визуальные компоненты, такие как текстовые блоки, а массив actions определяет интерактивные кнопки — например, Action.Submit или Action.OpenUrl, — которые позволяют пользователям запускать фоновые рабочие процессы.

Отправка карточек через ботов или Graph API

Когда JSON-документ готов и протестирован в дизайнере, следующий шаг — доставить карточку пользователям напрямую в Microsoft Teams. В зависимости от вашей технической архитектуры есть несколько надёжных вариантов развёртывания.

Для интеграций с низким уровнем кода можно использовать Power Automate, а для корпоративной доставки повышенного уровня — собственных ботов и Microsoft Graph API. Использование зарегистрированного приложения Azure AD вместе с REST API Bot Framework позволяет автоматически отправлять интерактивные карточки конкретным пользователям или в важные каналы.

Ниже пример структуры сообщения, когда Adaptive Card упакована как вложение сообщения Bot Framework:

{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
          {
            "type": "TextBlock",
            "text": "New Service Request Pending Review"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Approve"
          },
          {
            "type": "Action.Submit",
            "title": "Reject"
          }
        ]
      }
    }
  ]
}

Подключив этот документ к автоматическому триггеру — например, к новой строке в списке SharePoint или к неудачному запуску в Power Automate, — вы превращаете пассивное оповещение в активный запрос на решение.

Тестирование и отладка карточек

Развёртыванию всегда должно предшествовать тщательное тестирование. Поскольку разные клиенты (например, настольная версия Teams, мобильные приложения и почтовые клиенты Outlook) отображают Adaptive Cards с помощью собственных конфигураций хоста, иногда могут появляться незначительные ошибки вёрстки.

При отладке карточек учитывайте следующие рекомендации:

Проверьте версии схемы: убедитесь, что версия карточки соответствует возможностям, которые поддерживает текущая архитектура клиента Microsoft Teams.
Проверьте отображение текста: убедитесь, что привязка переменных данных заполняется корректно и не оставляет пустых мест, если поле данных пустое.
Проверьте на разных устройствах: просмотрите карточки на узких мобильных экранах, чтобы убедиться, что колонки и наборы кнопок аккуратно переносятся без неудобного разрыва.
Обработайте действия отправки: убедитесь, что ваш серверный сервис корректно обрабатывает входящие JSON-документы, которые запускаются кнопками взаимодействия пользователя.

Заключение

Преобразование повседневного опыта работы в Microsoft Teams сводится к снижению трений и отсечению цифрового шума. Заменяя статичные, бесполезные оповещения динамичными интерактивными Adaptive Cards, вы и ваша команда сможете действовать решительно, не переключаясь постоянно между разрозненными приложениями. Сегодня мы разобрали основы проектирования, структуры и развёртывания таких карточек, но это только начало того, чего можно достичь.

Чтобы глубже разобраться в стратегиях продуктивности и узнать, как современные инструменты могут преобразить ваше цифровое рабочее пространство, обязательно послушайте сопутствующий выпуск подкаста Build Actionable Teams Notifications with Adaptive Cards. Начните экспериментировать с собственными карточками уже сегодня, упрощайте рабочие процессы и возвращайте себе глубокий фокус!