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

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

Пример

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

Открыть этот пример в 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 {
    --input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */

      /* OR individual input border sides */
    --input-border-bottom: 2px rgba(255, 255, 255, 0.5) solid;
    --input-border-right: 2px rgba(255, 255, 255, 0.5) solid;
    --input-border-left: 2px rgba(255, 255, 255, 0.5) solid;
    --input-border-top: 2px rgba(255, 255, 255, 0.5) solid;

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

    --dropdown-background-color: #1f1f1f; /* channel background color */
    --dropdown-item-hover-background: #333d47; /* channel or team hover background */
    --dropdown-item-selected-background: #0F78D4; /* selected channel background color */

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

События

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

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

Шаблоны

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

Тип данных	Контекст данных	Описание
загрузка	null: нет данных	Шаблон, используемый для отображения состояния средства выбора при выполнении запроса к Microsoft Graph.
ошибка	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	Разрешение
/me/joinedTeams	User.Read.All
/teams/${id}/channels	Group.Read.All

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

import {MgtTeamsChannelPicker} from "@microsoft/mgt-components";

MgtTeamsChannelPicker.config.useTeamsBasedScopes = true;

Если useTeamsBasedScopes задано значение true, средство выбора каналов Teams будет использовать следующие области.

API	Разрешение
/me/joinedTeams	Team.ReadBasic.All
/teams/${id}/channels	Channel.ReadBasic.All

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

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

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

Кэш

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

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

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

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