Composant Sélecteur de canaux Microsoft Teams dans le Kit de ressources Microsoft Graph

Vous pouvez utiliser le composant pour activer les mgt-teams-channel-picker recherches des canaux Microsoft Teams associés à un utilisateur. Le composant peut rechercher toutes les équipes que l’utilisateur a rejointes et chaque canal de ces équipes.

Exemple

L’exemple suivant montre le mgt-teams-channel-picker composant . Commencez à rechercher un canal ou une équipe pour voir le rendu des résultats.

Ouvrir cet exemple dans mgt.dev

Obtention du canal sélectionné

Utilisez la selectedItem propriété pour récupérer le canal et l’équipe parente actuellement sélectionnés. Cette valeur est null si aucun canal n’a été sélectionné. selectedItem contient deux propriétés : channel (MicrosoftGraph.Channel) et team (MicrosoftGraph.Team).

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

Sélection d’un canal

Utilisez la selectChannelById(channelId: string) méthode pour sélectionner un canal par programmation.

Remarque : le sélecteur de canaux Teams prend uniquement en charge la sélection d’un seul canal.

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

Note: Le canal fourni (et l’ID suivant) doivent appartenir à une équipe que l’utilisateur authentifié a rejointe.

Propriétés personnalisées CSS

Le mgt-teams-channel-picker composant définit les propriétés personnalisées CSS suivantes.

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 */
}

Événements

Événement	Quand est-il émis	Données personnalisées	Annulable	Bulles	Fonctionne avec un modèle personnalisé
selectionChanged	Déclenché lorsque l’utilisateur apporte une modification dans la sélection d’un canal	L’élément actuellement sélectionné en tantqu’équipe{ channel: de canal, team: }	Non	Non	Oui

Pour plus d’informations sur la gestion des événements, consultez événements.

Modèles

mgt-teams-channel-picker prend en charge plusieurs modèles que vous pouvez utiliser pour remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez la data-type valeur sur l’une des valeurs suivantes.

Type de données	Contexte de données	Description
Chargement	null : aucune donnée	Modèle utilisé pour afficher l’état du sélecteur pendant l’exécution de la requête à Microsoft Graph.
error	null : aucune donnée	Modèle utilisé si la recherche utilisateur ne renvoie aucun utilisateur.

L’exemple suivant montre comment utiliser le error modèle.

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

Autorisations de Microsoft Graph

Ce composant utilise les API et autorisations Microsoft Graph suivantes par défaut.

API	Autorisation
/me/joinedTeams	User.Read.All
/teams/${id}/channels	Group.Read.All

Dans la version 2.2, les autorisations requises ont été mises à jour vers les autorisations basées sur Teams moins restrictives. Pour éviter une modification cassant, vous devez accepter les nouvelles autorisations via une configuration globale.

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

MgtTeamsChannelPicker.config.useTeamsBasedScopes = true;

Avec useTeamsBasedScopes la valeur true, le sélecteur de canaux Teams utilise les étendues suivantes.

API	Autorisation
/me/joinedTeams	Team.ReadBasic.All
/teams/${id}/channels	Channel.ReadBasic.All

Il s’agit des autorisations par défaut dans la prochaine mise à jour majeure.

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.

Cache

Le mgt-teams-channel-picker composant ne met pas en cache de données.

Étendre pour plus de contrôle

Pour les scénarios plus complexes ou une expérience utilisateur vraiment personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composant :

Méthode	Description
renderSelected	Affiche l’équipe et le canal sélectionnés dans la zone d’entrée.
renderInput	Affiche la zone d’entrée.
renderDropdown	Affiche la liste déroulante.
renderDropdownList	Affiche les éléments de la liste déroulante de manière récursive.
renderItem	Affiche une équipe ou un canal dans la liste déroulante.
renderHighlightedText	Restitue le texte du canal, en mettant en surbrillance la requête d’entrée.
renderLoading	Affiche l’état de la liste déroulante de chargement.
renderError	Affiche l’état d’erreur de la liste déroulante.