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

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

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

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

Добавление расширения для обмена сообщениями

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, ваши макеты будут менее масштабируемыми и управление ими будет отнимать больше времени.

Действия

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

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

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

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

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

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

Поиск

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

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

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

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

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

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