Компонент средства выбора каналов Microsoft Teams в Microsoft Graph Toolkit

Статья
11/07/2024

Компонент можно использовать mgt-teams-channel-picker для включения поиска каналов Microsoft Teams, связанных с пользователем. Этот компонент может выполнять поиск всех команд, к которым присоединился пользователь, и каждого канала в этих командах.

Пример

В примере ниже показан компонент mgt-teams-channel-picker. Начните поиск канала или команды, чтобы увидеть отображение результатов.

HTML
React;

Откройте этот пример в mgt.dev.

Получение выбранного канала

Используйте свойство selectedItem, чтобы получить канал и родительскую команду, выбранные в настоящее время. Это значение будет равно null, если канал не выбран. selectedItem содержит два свойства: channel (MicrosoftGraph.Channel) и team (MicrosoftGraph.Team).

const channelPicker = document.querySelector("mgt-teams-channel-picker");
console.log(channelPicker.selectedItem.channel);
console.log(channelPicker.selectedItem.team);

Выбор канала

Используйте метод selectChannelById(channelId: string) для программного выбора канала.

Примечание. Средство выбора канала Teams поддерживает выбор только одного канала.

const channelPicker = document.querySelector("mgt-teams-channel-picker");
const channelId = "some-channel-id";
channelPicker.selectChannelById(channelId);

Примечание. Указанный канал (и соответствующий идентификатор) должен относиться к команде, к которой присоединился прошедший проверку пользователь.

Настраиваемые свойства CSS

Компонент mgt-teams-channel-picker определяет следующие настраиваемые свойства CSS.

<mgt-teams-channel-picker
  class="teams-channel-picker"
  person-query="me"
></mgt-teams-channel-picker>

.teams-channel-picker {
  --channel-picker-input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */

  --channel-picker-input-background-color: #1f1f1f; /* input area background color */
  --channel-picker-input-background-color-hover: #008394; /* input area border hover color */
  --channel-picker-input-background-color-focus: #0f78d4; /* input area border focus color */

  --channel-picker-dropdown-background-color: brown; /* channel background color */
  --channel-picker-dropdown-item-text-color: #fff;
  --channel-picker-dropdown-item-background-color-hover: #333d47; /* channel or team hover background */
  --channel-picker-dropdown-item-text-color-selected: #0f78d4; /* selected channel background color */

  --channel-picker-color: white; /* input area border focus color */
  --channel-picker-arrow-fill: #ffffff;
  --channel-picker-input-placeholder-text-color: #f1f1f1; /* placeholder text color */
  --channel-picker-input-placeholder-text-color-hover: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */
  --channel-picker-input-placeholder-text-color-focus: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */

  --channel-picker-search-icon-color: yellow;
  --channel-picker-close-icon-color: yellow;
  --channel-picker-down-chevron-color: yellow;
  --channel-picker-up-chevron-color: yellow;
}

Дополнительные сведения см. в статье Компоненты стиля.

События

Событие	Когда он генерируется	Пользовательские данные	Отменяемым	Пузыри	Работает с пользовательским шаблоном
`selectionChanged`	Возникает, когда пользователь вносит изменения в выбор канала	Текущий выбранный элемент в качестве `{ channel:` команды канала`, team:` `}`	Нет	Нет	Да

Дополнительные сведения об обработке событий см. в разделе События.

Шаблоны

Компонент mgt-teams-channel-picker поддерживает несколько шаблонов, позволяющих заменить его определенные части. Чтобы указать шаблон, включите <template> элемент внутри компонента и задайте для data-type параметра одно из следующих значений.

Тип данных	Контекст данных	Описание
загрузка	null: нет данных	Шаблон, используемый для отображения состояния средства выбора при выполнении запроса к Microsoft Graph, выполняется.
error	null: нет данных	Шаблон, используемый, если поиск пользователя не возвращает пользователей.

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

<mgt-teams-channel-picker>
  <template data-type="error">
    <p>Sorry, no Teams or Channels were found</p>
  </template>
</mgt-teams-channel-picker>

Разрешения Microsoft Graph

Этот компонент по умолчанию использует следующие API-интерфейсы Microsoft Graph и разрешения. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из перечисленных разрешений.

Конфигурация	Разрешение	API
default	Team.ReadBasic.All, TeamSettings.Read.All, TeamSettings.ReadWrite.All, User.Read.All, User.ReadWrite.All	/me/joinedTeams
default	Team.ReadBasic.All TeamSettings.Read.All, TeamSettings.ReadWrite.All	/teams/${teamId}/photo/$value
default	Channel.ReadBasic.All, ChannelSettings.Read.All, ChannelSettings.ReadWrite.All	/teams/${id}/channels

Проверка подлинности

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

Кэш

Компонент mgt-teams-channel-picker не кэшировать данные.

Расширение для дополнительного управления

В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected render* для переопределения в расширениях компонента.

Метод	Описание
renderSelected	Отображает выбранную команду и канал в поле ввода.
renderInput	Отображает поле ввода.
renderDropdown	Отображает раскрывающийся список.
renderDropdownList	Рекурсивно отображает элементы в раскрывающемся списке.
renderItem	Отображает команду или канал в раскрывающемся списке.
renderHighlightedText	Отображает текст канала, выделяя входной запрос.
renderLoading	Отображает состояние загрузки раскрывающегося списка.
renderError	Отображает состояние ошибки раскрывающегося списка.

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о настройке локализации см. в разделе Локализация компонентов.

Имя строки	Значение по умолчанию
closeButtonAriaLabel	`remove the selected channel`
inputPlaceholderText	`Select a channel`
loadingMessage	`Loading...`
noResultsFound	`We didn't find any matches.`
photoFor	`Teams photo for`
teamsChannels	`Teams and channels results`

Поделиться через