Componente Selecionador de Canais do Microsoft Teams no Microsoft Graph Toolkit

Pode utilizar o mgt-teams-channel-picker componente para ativar pesquisas de canais do Microsoft Teams associados a um utilizador. O componente pode procurar todas as equipas às quais o utilizador se juntou e cada canal nessas equipas.

Exemplo

O exemplo seguinte mostra o mgt-teams-channel-picker componente. Comece a procurar um canal ou equipa para ver a composição dos resultados.

Obter o canal selecionado

Utilize a selectedItem propriedade para obter o canal e equipe principal atualmente selecionados. Este valor será nulo se não tiver sido selecionado nenhum canal. 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);

Selecionar um canal

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

Nota: o seletor de canais do Teams só suporta a seleção de canal único.

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

Nota: O canal fornecido (e O ID subsequente) tem de pertencer a uma equipa à qual o utilizador autenticado tenha aderido.

Propriedades personalizadas do CSS

O mgt-teams-channel-picker componente define as seguintes propriedades personalizadas do 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, veja Componentes de estilo.

Eventos

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

mgt-teams-channel-picker suporta vários modelos que pode utilizar 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 seguinte mostra como utilizar 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 utiliza as seguintes APIs e permissões do Microsoft Graph por predefinição. Para cada API denominada utilizador tem de ter, pelo menos, uma das permissões listadas.

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-teams-channel-picker componente não coloca dados em cache.

Expandir para obter mais controlo

Para cenários mais complexos ou um UX verdadeiramente personalizado, este componente expõe vários protected render* métodos de substituição em extensões de componentes:

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre como configurar a localização, veja Localizar componentes.