Покрокова інструкція: створення першої адаптивної картки в 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. Щоб успішно впроваджувати такі картки, однак, потрібно розуміти базові інструменти та передумови, необхідні для їх створення.

Такий багатоетапний шлях перериває концентрацію й забирає цінні хвилини. Помножте це переривання на шістдесят разів на годину, і ваша продуктивність зникає. Адаптивні картки вирішують цю проблему, переносячи інтерфейс застосунку безпосередньо у вікно чату. Вони дають змогу переглядати дані, заповнювати поля форм і натискати кнопки дій, не виходячи з клієнта Teams. Однак щоб успішно впровадити такі картки, потрібно розуміти базові інструменти та передумови, необхідні для їх створення.

Створення адаптивних карток не потребує серйозного досвіду розробки програмного забезпечення, але варто ознайомитися зі стандартним набором інструментів для авторингу, які пропонує Microsoft. Наявність потрібних утиліт під рукою гарантує, що процес дизайну пройде гладко від задуму до впровадження.

Для створення адаптивних карток не потрібен серйозний досвід розробки програмного забезпечення, але варто ознайомитися зі стандартним набором інструментів для авторингу, який пропонує Microsoft. Коли потрібні утиліти завжди під рукою, процес проєктування проходить гладко — від ідеї до впровадження.

Основні ресурси для дизайнерів карток

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

Коли середовище для проєктування налаштовано, можна переходити до створення візуального макета й структури даних картки.

Створення адаптивної картки насамперед є вправою з композиції макета та структури JSON. Оскільки адаптивні картки використовують незалежну від платформи схему, одне визначення картки може коректно відображатися в клієнтах Windows, macOS, iOS, Android і веб.

Створення адаптивної картки — це насамперед робота з композицією макета та структурою JSON. Оскільки адаптивні картки використовують незалежну від платформи схему, одне визначення картки може коректно відображатися в Windows, macOS, iOS, Android та веб-клієнтах.

Найпростіший спосіб створити першу картку — скористатися веб-інструментом дизайну. Ось простий порядок дій:

Відкрийте офіційний Adaptive Card Designer у веббраузері.

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

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

Кожна Adaptive Card, зрештою, працює на основі структурованого JSON-payload. Нижче наведено простий приклад схеми 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-payload готовий і протестований у дизайнері, наступний крок — доставити картку безпосередньо вашим користувачам у Microsoft Teams. Залежно від вашої технічної архітектури є кілька надійних варіантів розгортання.

Можна використовувати Power Automate для інтеграції робочих процесів із низьким рівнем коду або скористатися власними ботами та Microsoft Graph API для складніших, корпоративних способів доставки. Використання зареєстрованого застосунку Azure AD разом із REST API Bot Framework дає змогу автоматично надсилати інтерактивні картки конкретним користувачам або до важливих каналів.

Ось приклад структури payload, коли ваша 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"
          }
        ]
      }
    }
  ]
}

Підключивши цей payload до автоматизованого тригера, наприклад нового рядка у списку SharePoint або невдалого запуску системи в Power Automate, ви перетворюєте пасивне сповіщення на активний запит, який допомагає приймати рішення.

Тестування та налагодження карток

Розгортанню завжди має передувати ретельне тестування. Оскільки різні клієнти (наприклад, настільний застосунок Teams, мобільні застосунки та клієнти електронної пошти Outlook) відображають Adaptive Cards через різні конфігурації хост-застосунку, інколи можуть з’являтися непомітні помилки верстки.

Налагоджуючи картки, пам’ятайте про такі найкращі практики:

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

Висновок

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

Щоб glибше зануритися в стратегії продуктивності та дізнатися, як сучасні інструменти можуть змінити ваш цифровий робочий простір, обов’язково послухайте супровідний епізод подкасту Build Actionable Teams Notifications with Adaptive Cards. Почніть експериментувати з власними картками вже сьогодні, спрощуйте робочі процеси та поверніть собі глибоку концентрацію!