Разработка расширения Microsoft Teams для сообщений

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

Комплект разработчика для пользовательского интерфейса Microsoft Teams

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

Добавить расширение для сообщений

Вы можете добавить расширение для сообщений в следующих контекстах Teams:

  • В магазине Teams.
  • В канале, чате или собрании (до, во время и после) рядом с полем создания сообщения. Стоит отметить, что если вы добавили расширение для сообщений в одном из этих мест, в этом контексте его сможете использовать только вы.

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

Мобильная версия

В примере показано, как добавить расширение для сообщений рядом с полем создания сообщения в канале на мобильном устройстве.

Версия для настольного компьютера

В примере показано, как добавить расширение для сообщений рядом с полем создания сообщения в канале.

Настройка расширения для сообщений

Проверка подлинности в принципе не обязательна, но если вы проектируете что-нибудь вроде системы отслеживания запросов, то, возможно, захотите, чтобы пользователи, прежде чем воспользоваться вашим ПО, выполняли вход в систему.

Чтобы обеспечить единый дизайн приложений Teams, экран входа менять нельзя. Если вы используете проверку подлинности с единым входом (SSO), пользователи будут автоматически выполнять вход.

Мобильная версия

В примере показан экран настройки расширения сообщений с кнопкой "Вход" на мобильном устройстве.

Версия для настольного компьютера

В примере показан экран настройки расширения сообщений с кнопкой "Вход".

Типы расширений для сообщений

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

Команды поиска

Расширение для сообщений с поиском может использоваться для быстрого поиска внешнего содержимого и вставки его в сообщение. Команды поиска обычно доступны в поле создания сообщения. Например, вы можете начать обсуждение или поучаствовать в нем, поделившись содержимым — и при этом не выходя из Teams.

Мобильная версия

В примере показано расширение для сообщений на основе поиска, запущенное из поля создания сообщения на мобильном устройстве.

Версия для настольного компьютера

В примере показано расширение для сообщений на основе поиска, запущенное из поля создания сообщения.

Параметры компоновки поля создания сообщения

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

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

Команды действий

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

Расширения сообщений на основе действий часто требуют, чтобы пользователи заполняли форму или что-либо подобное в модальном окне. Такие виды интерфейса можно создавать с помощью модулей задач.

Открыть расширение для сообщений

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

Из поля создания сообщения

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

Мобильная версия

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

Версия для настольного компьютера

В примере показано, как открыть расширение для сообщений из поля создания сообщения.

Из сообщения чата или публикации канала

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

Сообщение чата

В примере показано, как открыть расширение для сообщений из сообщения чата.

Публикация в канале

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

Использование расширения для сообщений

В следующих сценариях показаны основные способы использования расширений для сообщений.

Вставка контента в сообщение

1. Выберите расширение для сообщений. Пользователи могут искать контент, которым они хотят поделиться, прямо из поля создания сообщения.

Мобильная версия

В примере показано, как пользователь ищет контент для вставки прямо из поля создания сообщения на мобильном устройстве.

Версия для настольного компьютера

В примере показано, как пользователь ищет контент для вставки прямо из поля создания сообщения.

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

Мобильная версия

В примере показан пользователь, публикующий контент в беседе в канале на мобильном устройстве.

Версия для настольного компьютера

В примере показан пользователь, публикующий контент в беседе в канале.

Действия с сообщениями

1. Выберите расширение для сообщений. Ваше приложение может включать одну или несколько команд действий.

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

2. Закончите действие. Ваше приложение может получать и обрабатывать любой контент или данные, отправленные действием сообщения. Пользователи заканчивают действие в вашем приложении, оставаясь в беседе.

Пример действия с сообщением.

Расширения для сообщений также позволяют вставлять в сообщение форматированные ссылки с контентом с распознаваемых URL-адресов (эта возможность называется развертыванием ссылки).

1. Вставьте распознаваемую ссылку в поле создания сообщения.

Мобильная версия

В примере показано, как пользователь вставляет ссылку в поле создания сообщения на мобильном устройстве .

Версия для настольного компьютера

В примере показано, как пользователь вставляет ссылку в поле создания сообщения .

2. Вставьте контент. Если ваше приложение распознает URL-адрес в поле создания сообщения, оно сформирует ссылку в виде карточки, которая обеспечивает предварительный просмотр веб-контента в форматированном виде. (Подробности см. в разделе Рекомендации по созданию адаптивных карточек.)

Мобильная версия

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

Версия для настольного компьютера

В примере показано, как URL-адрес, распознанный приложением, включает в поле создания сообщения часть контента .

Управление расширением для сообщений

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

Структура

Расширение для сообщений в поле создания сообщения

Следующий пример показывает расширение для сообщений, открытое из поля создания сообщения.

Мобильная версия

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

Счетчик Описание
1 Имя приложения: полное имя приложения.
2. Значок меню команд действий (необязательно): открывает список команд действий данного расширения для сообщений (если вы их указали).
3 Поле поиска: позволяет пользователям находить контент приложения для последующей вставки.
4 Меню вкладок (необязательно): предоставляет несколько категорий контента.
5 Меню команд действий (необязательно): выводит на экран список команд действий (если вы их указали).
6 Контент приложения: в основном для отображения результатов поиска.

Версия для настольного компьютера

Иллюстрация, показывающая структуру пользовательского интерфейса расширения для сообщений в поле создания сообщения .

Счетчик Описание
1 Логотип приложения: цветной значок логотипа приложения.
2. Имя приложения: полное имя приложения.
3 Значок меню команд действий (необязательно): открывает список команд действий данного расширения для сообщений (если вы их указали).
4 Поле поиска: позволяет пользователям находить контент приложения для последующей вставки.
5 Меню вкладок (необязательно): предоставляет несколько категорий контента.
6 Меню команд действий (необязательно): выводит на экран список команд действий (если вы их указали).
7 Контент приложения: в основном для отображения результатов поиска. В этом примере используется компоновка списка (другой вариант — табличная компоновка).
8 Логотип приложения: контурный значок логотипа приложения.

Меню управления расширениями сообщений

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

Счетчик Описание
1 Открепить: доступно, если пользователь закрепил ваше приложение.
2. Удалить: удаляет расширение для сообщений из канала, чата или собрания.

Рекомендованные методики

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

Настройка и общее использование

Пример настройки и общего использования .

Нужно: интегрироваться с единым входом

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

Пример интеграции с единым входом .

Нельзя: заставлять пользователей выходить из беседы

Расширения для сообщений — это средства упрощения работы, позволяющие свести к минимуму переключение контекста. Например, расширение не должно направлять пользователей на веб-страницу за пределами Teams.

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

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

Шаблоны

Пример шаблона .

Нужно: по возможности перекладывать работу на Teams

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

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

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

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

Визуальные темы

Пример визуальной темы

Нужно: использовать преимущества цветовых маркеров Teams

Каждая тема Teams имеет собственную цветовую схему. Чтобы автоматически обрабатывать изменения темы, используйте в дизайне цветовые маркеры (Fluent UI).

Пример использования цветовых маркеров

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

Если вы не используете цветовые маркеры Teams, ваши макеты будут менее масштабируемыми и управление ими будет отнимать больше времени.

Действия

Пример работы с действиями

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

Предлагаемые действия с сообщениями должны быть связаны с тем, что сейчас просматривает пользователь. Например, вы можете предоставить пользователям средство для быстрой регистрации проблемы или создания рабочего запроса на основе чужого сообщения.

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

Нельзя: создавать команды действий, которые никак не связаны с контекстом.

Действие Открыть панель управления будет выглядеть неуместно в большинстве бесед.

Поиск

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

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

Нельзя: требовать от пользователей отправки запроса

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

Нужно: рассмотрите возможность реализации запросов при пустом вводе

Например, пока пользователь еще не успел ничего ввести в поле поиска, покажите то, что он недавно просматривал в приложении. Возможно, пользователь хочет вставить в беседу.именно это.