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

Article
11/07/2024

Vous pouvez utiliser le composant pour activer la mgt-teams-channel-picker recherche 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.

HTML
React

Ouvrez cet exemple dans mgt.dev.

Obtention du canal sélectionné

Utilisez la selectedItem propriété pour récupérer le canal et é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
  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;
}

Pour en savoir plus, consultez composants de style.

Événements

Événement	Quand est-il émis	Données personnalisées	Annulable	Bulles	Fonctionne avec un modèle personnalisé
`selectionChanged`	Se déclenche lorsque l’utilisateur apporte une modification à 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 sur l’une data-type des valeurs suivantes.

Type de données	Contexte de données	Description
Chargement	null : aucune donnée	Le modèle utilisé pour afficher l’état du sélecteur lors de l’exécution d’une requête à Microsoft Graph est en cours d’exécution.
error	null : aucune donnée	Modèle utilisé si une 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. Pour chaque API appelée, l’utilisateur doit disposer d’au moins l’une des autorisations répertoriées.

Configuration	Autorisation	API
Valeur par défaut.	Team.ReadBasic.All, TeamSettings.Read.All, TeamSettings.ReadWrite.All, User.Read.All, User.ReadWrite.All	/me/joinedTeams
Valeur par défaut.	Team.ReadBasic.All TeamSettings.Read.All, TeamSettings.ReadWrite.All	/teams/${teamId}/photo/$value
Valeur par défaut.	Channel.ReadBasic.All, ChannelSettings.Read.All, ChannelSettings.ReadWrite.All	/teams/${id}/channels

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.

Localisation

Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations sur la configuration de la localisation, consultez Localisation des composants.

Nom de la chaîne	Valeur par défaut
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`

Partager via