Componente Seletor de Canal do Microsoft Teams no Microsoft Graph Toolkit

Você pode usar o mgt-teams-channel-picker componente para habilitar pesquisas para canais do Microsoft Teams associados a um usuário. O componente pode pesquisar todas as equipes nas quais o usuário ingressou e cada canal nessas equipes.

Exemplo

O exemplo a seguir mostra o mgt-teams-channel-picker componente. Comece a pesquisar um canal ou equipe para ver os resultados renderizados.

Obtendo o canal selecionado

Use a selectedItem propriedade para recuperar o canal e a equipe principal selecionados no momento. Esse valor será null se nenhum canal tiver sido selecionado. selectedItem contém duas propriedades: channel (MicrosoftGraph.Channel) e team (MicrosoftGraph.Team).

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

Selecionando um canal

Use o selectChannelById(channelId: string) método para selecionar programaticamente um canal.

Observação: o seletor de canal do Teams só dá suporte à seleção de canal único.

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

Observação: O canal fornecido (e a ID subsequente) deve pertencer a uma equipe à qual o usuário autenticado ingressou.

Propriedades personalizadas CSS

O mgt-teams-channel-picker componente define as seguintes propriedades personalizadas 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;
}

Para saber mais, consulte Componentes de estilo.

Eventos

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

mgt-teams-channel-picker Suporta vários modelos que podem ser usados para substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

O exemplo a seguir mostra como usar o error modelo.

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

Permissões do Microsoft Graph

Este componente usa as seguintes APIs e permissões do Microsoft Graph por padrão. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-teams-channel-picker componente não armazena nenhum dado em cache.

Estenda para mais controle

Para cenários mais complexos ou uma experiência de usuário verdadeiramente personalizada, esse componente expõe vários protected render* métodos de substituição em extensões de componente:

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, consulte Localizando componentes.