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

  • Статья

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

Пример

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

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

Используйте свойство 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