Открыть сервис
Главная → Блог → Adaptive Cards

Adaptive Cards

Adaptive Cards — это платформа для создания и отображения интерактивных, адаптивных карточек, содержащих структурированный контент (текст, изображения, кнопки, формы ввода), которые могут отображаться в различных приложениях и сервисах (ботах, панелях уведомлений, веб-интерфейсах) без изменения исходного кода под каждую платформу. Разработана корпорацией Microsoft и представлена в 2017 году. Основная цель Adaptive Cards — унифицировать представление информации, передаваемой между сервисами, и обеспечить её корректное отображение на разных устройствах (от мобильных телефонов до настольных компьютеров) с сохранением интерактивности.

История

Концепция Adaptive Cards возникла как ответ на проблему фрагментации форматов карточек в экосистеме Microsoft. До 2017 года каждый продукт (Skype, Teams, Outlook, Cortana) использовал собственные шаблоны и схемы данных, что затрудняло обмен информацией между ними. Разработка велась в рамках инициативы по созданию единого стандарта для «карточного» интерфейса, который бы позволял сервисам (например, погодным приложениям или трекерам задач) отправлять контент, автоматически адаптирующийся под интерфейс получателя.

Первая публичная демонстрация Adaptive Cards состоялась на конференции Build 2017. В 2018 году Microsoft выпустила спецификацию и SDK под лицензией MIT, сделав платформу открытой. С тех пор Adaptive Cards используются не только в продуктах Microsoft, но и в сторонних приложениях, включая Slack, WordPress, а также в решениях для автоматизации (Power Automate) и чат-ботах.

Архитектура и принцип работы

Adaptive Cards основаны на трёх ключевых компонентах:

  1. Схема (Schema): JSON-документ, описывающий структуру карточки: элементы (текст, изображения, кнопки), их расположение, стили и действия. Схема является открытым стандартом и версионируется (на 2025 год актуальна версия 1.6).
  2. Рендерер (Renderer): библиотека для конкретной платформы (Android, iOS, .NET, JavaScript, React Native), которая преобразует JSON-схему в нативный интерфейс. Рендерер автоматически подстраивает размеры, шрифты и расположение элементов под экран устройства.
  3. Хост-приложение (Host Application): программа, в которой отображается карточка (например, Microsoft Teams, Outlook, чат-бот). Хост-приложение задаёт общие стили (цвета, шрифты) и обрабатывает действия пользователя (нажатие кнопок, отправку форм).

Процесс отображения

  1. Сервис-отправитель (например, сервер погоды) формирует JSON-объект по спецификации Adaptive Cards.
  2. JSON передаётся хост-приложению (например, боту в Telegram).
  3. Хост-приложение вызывает рендерер, который анализирует JSON и создаёт нативный интерфейс (кнопки, поля ввода, текст).
  4. Пользователь взаимодействует с карточкой (нажимает кнопку «Подробнее»), после чего хост-приложение отправляет действие обратно сервису или выполняет локальное действие (открытие URL, отправка данных).

Элементы и структура

Схема Adaptive Cards включает несколько типов элементов, которые могут комбинироваться в произвольном порядке:

Основные элементы

  • TextBlock: текстовый блок с поддержкой форматирования (жирный, курсив, маркированные списки, ссылки). Поддерживает автоматический перенос строк.
  • Image: изображение с возможностью указания альтернативного текста, размеров и режима заполнения (например, stretch или cover).
  • Container: контейнер для группировки элементов, позволяющий задавать отступы, фон и скрытие/показ содержимого.
  • ColumnSet: набор колонок для создания многоколоночной вёрстки (например, аватар слева, текст справа).
  • FactSet: таблица пар «ключ-значение» (например, «Дата: 12.03.2025»).
  • ImageSet: галерея изображений, отображаемая в виде сетки.

Интерактивные элементы

  • Action.OpenUrl: кнопка, открывающая указанный URL в браузере.
  • Action.Submit: кнопка, отправляющая данные обратно сервису (например, заполненную форму).
  • Action.ShowCard: кнопка, раскрывающая скрытую карточку (используется для создания многоуровневых форм).
  • Action.ToggleVisibility: кнопка, показывающая или скрывающая определённые элементы карточки.
  • Input.Text, Input.Number, Input.Date, Input.Time, Input.Toggle, Input.ChoiceSet: поля ввода для сбора данных от пользователя (текст, числа, даты, переключатели, выпадающие списки).

Адаптивность

Ключевая особенность — автоматическая адаптация под разные размеры экрана. Например, на широком мониторе карточка может отображать три колонки, а на мобильном телефоне — одну, с вертикальным расположением элементов. Это достигается за счёт использования ColumnSet с указанием ширины колонок в процентах или относительных единицах (auto, stretch).

Применение

Adaptive Cards нашли широкое применение в корпоративных и потребительских сервисах:

Microsoft Teams и Office 365

  • Уведомления: боты отправляют карточки с информацией о задачах, встречах, изменениях в документах. Например, при изменении статуса задачи в Planner пользователь видит карточку с заголовком, описанием и кнопками «Принять»/«Отклонить».
  • Формы обратной связи: сотрудники могут заполнять поля ввода прямо в карточке, не переходя в отдельное приложение.
  • Дэшборды: отображение метрик (KPI) с графиками и таблицами.

Чат-боты и виртуальные ассистенты

  • Поддержка клиентов: бот может отобразить карточку с вариантами ответа (например, «Выберите причину обращения»), а после выбора — показать форму для ввода данных.
  • Интеграция с CRM: карточка с информацией о клиенте (имя, контакты, история заказов) и кнопками для действий (позвонить, отправить письмо).

Автоматизация (Power Automate)

  • Утверждения: при запуске потока Power Automate отправляется карточка с запросом на утверждение (кнопки «Утвердить»/«Отклонить»). Результат нажатия возвращается в поток для дальнейшей обработки.
  • Сбор данных: карточки с полями ввода используются для сбора информации от пользователей (например, отчёты о проделанной работе).

Веб-приложения и мобильные приложения

  • Новостные ленты: карточки с заголовком, кратким описанием и изображением.
  • Товарные карточки: в интернет-магазинах — отображение цены, описания и кнопки «Добавить в корзину».

Версии и развитие

Спецификация Adaptive Cards активно развивается. Основные версии:

  • 1.0 (2018): базовая поддержка текста, изображений, кнопок и простых форм.
  • 1.1 (2019): добавлены Action.ToggleVisibility, Action.ShowCard, улучшена поддержка ввода.
  • 1.2 (2020): введены Container с фоном, ImageSet, поддержка вложенных таблиц.
  • 1.3 (2021): улучшена работа с медиа (аудио, видео), добавлены метаданные для доступности.
  • 1.4 (2022): поддержка Input.ChoiceSet с множественным выбором, улучшена адаптивность.
  • 1.5 (2023): добавлены Action.Execute (для отправки данных без перезагрузки), поддержка стилей для тёмной темы.
  • 1.6 (2024): улучшена работа с таблицами, добавлены новые типы данных для ввода (например, Input.Time с шагом в минуты).

Критика и ограничения

Несмотря на широкое распространение, Adaptive Cards имеют ряд ограничений:

  • Сложность для разработчиков: создание сложных макетов требует глубокого понимания JSON-схемы и специфики рендереров. Простые карточки создаются легко, но для нестандартных интерфейсов (например, с кастомной анимацией) приходится использовать вложенные контейнеры и обходные пути.
  • Зависимость от хост-приложения: внешний вид карточки может различаться в зависимости от того, какое приложение её отображает. Например, в Microsoft Teams и в Slack одна и та же карточка может выглядеть по-разному из-за различий в стилях.
  • Отсутствие поддержки сложных медиа: встроенные элементы не поддерживают видео, аудио или интерактивные графики напрямую (требуется использование внешних ссылок).
  • Производительность: на мобильных устройствах рендеринг карточек с большим количеством вложенных элементов может быть медленнее, чем отображение нативного интерфейса.

Интересные факты

  • Adaptive Cards не являются проприетарным форматом Microsoft: спецификация открыта, и любой разработчик может создать собственный рендерер для любой платформы.
  • Существуют сторонние инструменты, такие как Adaptive Cards Designer (веб-приложение), позволяющие визуально создавать карточки без написания JSON.
  • В 2020 году Microsoft выпустила Adaptive Cards for .NET MAUI, что позволило использовать карточки в кроссплатформенных приложениях.
  • В экосистеме Microsoft Adaptive Cards используются в более чем 20 продуктах, включая Outlook, Teams, Power Automate, Power Apps, Dynamics 365 и Cortana.

Источники

  • Спецификация Adaptive Cards (официальная документация Microsoft, версия 1.6)
  • Документация Microsoft по Adaptive Cards для разработчиков
  • Статья «Adaptive Cards: A New Way to Build Interactive Cards» (блог Microsoft, 2017)
  • Руководство по началу работы с Adaptive Cards (Microsoft Learn)
  • Обсуждения на GitHub репозитория AdaptiveCards (Microsoft)

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →

Похожие материалы