Проектирование личных приложений для Microsoft Teams

  • Статья

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

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

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

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

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

Добавление личного приложения

Пользователи могут добавить личное приложение из Microsoft Teams Store или всплывающего меню приложения, щелкнув значок Дополнительно в левой части Окна Teams (как показано в следующем примере).

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

Использование личного приложения (частная рабочая область)

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

(Примечание по реализации. Частная рабочая область основана на возможностях личной вкладки.)

Структура: личное приложение (частная рабочая область)

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

В примере показана структура компонентов личной вкладки.

Счетчик Описание
A Атрибут приложения: имя вашего приложения.
Б Вкладки: обеспечивает навигацию для личного приложения.
В Меню "Дополнительно": содержит другие параметры приложения и сведения.
D Основная навигация: обеспечивает навигацию к другим основным функциям Teams вашего приложения.

Настройка и добавление нескольких действий в NavBar

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

На снимках экрана показан пример меню NavBar и Overflow.

Счетчик Описание
1 Панель переходов
2 Меню переполнения

Чтобы настроить и добавить несколько действий в NavBar, вызовите API setNavBarMenu и добавьте свойство MenuItemв displayMode enum . Определяет displayMode enum , как отображается меню на панели Навигации. Значение по умолчанию displayMode enum имеет значение ifRoom.

В зависимости от требований и места, доступных в NavBar, задайте displayMode enum один из следующих вариантов.

  • Если есть место, задайте для ifRoom = 0 размещения элемента на панели NavBar.
  • Если места нет, задайте overflowOnly = 1, чтобы элемент всегда размещался в меню переполнения NavBar, но не в NavBar.

Ниже приведен пример настройки NavBar с меню переполнения для нескольких действий.

const menuItems = [item1, item2, item3, item4, item5]
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
  output(`Clicked ${id}`)
  return true;
})

Примечание.

setNavBarMenu API не управляет кнопкой Обновить. Он отображается по умолчанию.

На снимке экрана показан пример панели навигации и нескольких действий в меню переполнения.

В примере показана структура личной вкладки.

Счетчик Описание
A Вкладки: обеспечивает навигацию для личного приложения.
1 Веб-представление: отображает содержимое приложения.

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

В этом примере показана структура компонентов личной вкладки.

Счетчик Описание
A Атрибут приложения: логотип и имя приложения.
Б Вкладки: обеспечивает навигацию для личного приложения.
В Всплывающее представление: содержимое приложения перемещается из родительского окна в отдельное дочернее окно.
D Меню "Дополнительно": содержит другие параметры приложения и сведения. (Вы также можете сделать Параметры вкладкой.)

В этом примере показана структура личной вкладки.

Счетчик Описание
A Вкладки: обеспечивает навигацию для личного приложения.
1 iframe. Отображает содержимое приложения.

Разработка с помощью шаблонов пользовательского интерфейса и дополнительных компонентов

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

  • Список. Списки могут отображать связанные элементы в формате, доступном для сканирования, и позволяют пользователям выполнять действия со всем списком или отдельными элементами.
  • Доска задач. Доска задач, иногда называемая канбан-доской или трассой, представляет собой набор карточек, часто используемых для отслеживания состояния рабочих элементов или билетов.
  • Панель мониторинга: панель мониторинга — это холст, содержащий несколько карточек, которые предоставляют обзор данных или содержимого.
  • Форма. Формы предназначены для сбора, проверки и отправки данных пользовательского ввода в структурированном виде.
  • Пустое состояние. Шаблон пустого состояния можно использовать для различных сценариев, включая вход, первый запуск, сообщения об ошибках и т. д.
  • Навигация слева. Компонент навигации слева может помочь если личное приложение требует некоторой навигации. Как правило, навигация должна быть минимальной.

Использование личного приложения (бота)

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

Структура: личное приложение (бот)

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

В примере показана структура компонентов личного бота.

Счетчик Описание
A Точка входа бота: точка входа для доступа пользователей к функции бота в личном приложении.
Б Кнопка "Назад": возвращает пользователей в личное рабочее пространство.
В Сообщение бота: боты часто отправляют сообщения и уведомления в виде карточки (например, адаптивной карточки).
D Поле создания: поле ввода для отправки сообщений боту.

Кнопка "Назад"

При нажатии кнопки "Назад" в приложении Teams вы вернеесь на платформу Teams, не переходя внутри приложения.

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

Чтобы настроить кнопку "Назад", вызовите API registerBackButtonHandler , который обрабатывает функциональные возможности кнопки "Назад" в зависимости от одного из следующих условий:

  • Если registerBackButtonHandler задано значение false, TeamsJS вызывает navigateBack API, а платформа Teams обрабатывает кнопку "Назад".
  • Если registerBackButtonHandler задано значение true, приложение обрабатывает функциональность кнопки "Назад" (вы можете вернуться к предыдущим шагам и перейти в приложении), а платформа Teams не выполняет никаких дальнейших действий.

Ниже приведен пример настройки кнопки "Назад".

microsoftTeams.registerBackButtonHandler(() => {
  const selectOption = registerBackReturn.options[registerBackReturn.selectedIndex].value
  var isHandled = false
  if (selectOption == 'true') 
    isHandled = true;
  output(`onBack isHandled ${isHandled}`)
  return isHandled;
})

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

В примере показана структура компонента личного бота.

Счетчик Описание
A Вкладка "Бот": например, включите вкладку Чат для доступа к беседам и уведомлениям бота.
Б Сообщение бота: боты часто отправляют сообщения и уведомления в виде карточки (например, адаптивной карточки).
В Поле создания: поле ввода для отправки сообщений боту.

Управление личной вкладкой

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

В примере показаны параметры для управления личным приложением.

Рекомендации

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

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

Приоритет вкладки

Следует: показывать наиболее релевантный контент на первой вкладке

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

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

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

Как и в стандартном веб-приложении, навигация по вкладкам должна выполняться в порядке, который помогает понять основные функции приложения.

В примере показано личное приложение с дополнительным содержимым или метаданными.

Иерархия вкладок

Следует: вкладки должны иметь одинаковую иерархию и представлять ключевые страницы приложения

Вкладки должны классифицировать основные функции и содержимое приложения. Благодаря гибкому размеру содержимое справа может быть обрезано или не видно.

В примере показано личное приложение с вкладками одинаковой иерархии.

Не следует: включать различные уровни иерархии

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

В примере показано личное приложение с различными уровнями иерархии.

Интерфейс при первом запуске

Следует: включить интерфейс при первом запуске

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

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

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

Не следует: начинать с пустого экрана

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

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

Персонализированное содержимое

Следует: агрегировать содержимое приложения, относящееся к пользователю

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

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

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

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

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

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

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

Сложные функции приложения

Следует: разрешить пользователям доступ к сложным функциям в браузере

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

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

Не следует: включать все приложение

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

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

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

В примере приведены рекомендации по работе с личным приложением на мобильных устройствах.

Пример кода

Название примера Описание TypeScript
Приложение для собраний Пример отображения навигационной панели в приложении личной вкладки. Просмотр

Дополнительные ресурсы

Эти другие рекомендации по проектированию могут помочь в зависимости от области вашего личного приложения: