Componente do Microsoft Teams Channel Picker no Microsoft Graph Toolkit

Artigo
11/07/2024

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 ingressadas pelo usuário e cada canal nessas equipes.

Exemplo

O exemplo a seguir mostra o mgt-teams-channel-picker componente. Comece a procurar por um canal ou equipe para ver a renderização dos resultados.

HTML
React

Abra este exemplo no mgt.dev.

Obtendo o canal selecionado

Use a selectedItem propriedade para recuperar o canal e o equipe principal selecionados no momento. Esse valor será nulo 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);

Nota: O canal fornecido (e a ID subsequente) deve pertencer a uma equipe ingressada pelo usuário autenticado.

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, confira componentes de estilo.

Eventos

Evento	Quando ele é emitido	Dados personalizados	Cancelável	Bolhas	Funciona com modelo personalizado
`selectionChanged`	Dispara quando o usuário faz uma alteração na seleção de um canal	O item selecionado atualmente como `{ channel:` equipe de canal`, team:` `}`	Não	Não	Sim

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

Modelos

mgt-teams-channel-picker dá suporte a vários modelos que você pode usar para substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type como um dos valores a seguir.

Tipo de dados	Contexto de dados	Descrição
Carregar	nulo: sem dados	O modelo usado para renderizar o estado do seletor ao fazer uma solicitação ao Microsoft Graph está sendo feito.
erro	nulo: sem dados	O modelo usado se uma pesquisa de usuário não retornar usuários.

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

Esse 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.

Configuração	Permissão	API
Padrão.	Team.ReadBasic.All, TeamSettings.Read.All, TeamSettings.ReadWrite.All, User.Read.All, User.ReadWrite.All	/me/joinedTeams
Padrão.	Team.ReadBasic.All TeamSettings.Read.All, TeamSettings.ReadWrite.All	/teams/${teamId}/photo/$value
Padrão.	Channel.ReadBasic.All, ChannelSettings.Read.All, ChannelSettings.ReadWrite.All	/teams/${id}/channels

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 em cache nenhum dado.

Estender para obter mais controle

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 componente:

Método	Descrição
renderSelected	Renderiza a equipe e o canal selecionados na caixa de entrada.
renderInput	Renderiza a caixa de entrada.
renderDropdown	Renderiza a lista suspensa.
renderDropdownList	Renderiza os itens na lista suspensa de forma recursiva.
Renderitem	Renderiza uma equipe ou um canal na lista suspensa.
renderHighlightedText	Renderiza o texto do canal, destacando a consulta de entrada.
renderLoading	Renderiza o estado suspenso de carregamento.
renderError	Renderiza o estado de erro suspenso.

Localização

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

Nome da cadeia de caracteres	Valor padrão
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`

Compartilhar via