Composant de sélecteur de canal Microsoft teams dans la boîte à outils Microsoft GraphMicrosoft Teams Channel Picker component in the Microsoft Graph Toolkit

Vous pouvez utiliser le mgt-teams-channel-picker composant pour activer des recherches de canaux Microsoft teams associés à un utilisateur.A you can use the mgt-teams-channel-picker component to enable searches for Microsoft Teams channels associated with a user. Le composant peut rechercher toutes les équipes auxquelles l’utilisateur a rejoint et chaque canal de ces équipes.The component can search all teams the user has joined, and each channel in those teams.

ExempleExample

L’exemple suivant montre le mgt-teams-channel-picker composant.The following example shows the mgt-teams-channel-picker component. Commencez à rechercher un canal ou une équipe pour voir le rendu des résultats.Start searching for a channel or team to see the results render.

Ouvrez cet exemple dans gestion. devOpen this example in mgt.dev

Obtention de la chaîne sélectionnéeGetting the selected channel

Utilisez la selectedItem propriété pour récupérer le canal et l’équipe parent actuellement sélectionnés.Use the selectedItem property to retrieve the currently selected channel and parent team. Cette valeur sera null si aucun canal n’a été sélectionné.This value will be null if no channel has been selected. selectedItemcontient deux propriétés : channel (MicrosoftGraph. Channel) et team (MicrosoftGraph. Team).selectedItem contains two properties: channel (MicrosoftGraph.Channel) and 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 canalSelecting a channel

Utilisez la selectChannelById(channelId: string) méthode pour sélectionner un canal par programme.Use the selectChannelById(channelId: string) method to programmatically select a channel.

Remarque : le sélecteur de canal teams prend en charge uniquement la sélection de canal unique.Note: the Teams channel picker only supports single channel selection.

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

Remarque : Le canal fourni (et l’ID suivant) doit appartenir à une équipe à laquelle l’utilisateur authentifié a rejoint.Note: The provided channel (and subsequent ID) must belong to a team that the authenticated user has joined.

Propriétés personnalisées CSSCSS custom properties

Le mgt-teams-channel-picker composant définit les propriétés personnalisées CSS suivantes.The mgt-teams-channel-picker component defines the following CSS custom properties.

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-hover-color: #008394; /* input area border hover color */
    --input-focus-color: #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 */

    --font-color: white; /* input area border focus color */
    --arrow-fill: #ffffff;
    --placeholder-focus-color: rgba(255, 255, 255, 0.8); /* place holder text focus color */
}

ÉvénementsEvents

ÉvénementEvent DétailsDetail DescriptionDescription
selectionChangedselectionChanged Le détail contient l’élément actuellement sélectionné de {channel : MicrosoftGraph. Channel, team: MicrosoftGraph. Team}The detail contains the currently selected item of {channel : MicrosoftGraph.Channel, team: MicrosoftGraph.Team} Déclenché lorsque l’utilisateur modifie la sélection d’un canal.Fired when user makes a change in selection of a channel.

ModèlesTemplates

mgt-teams-channel-pickerprend en charge plusieurs modèles que vous pouvez utiliser pour remplacer certaines parties du composant.mgt-teams-channel-picker supports several templates that you can use to replace certain parts of the component. Pour spécifier un modèle, incluez <template> un élément à l’intérieur d’un data-type composant et définissez la valeur sur l’un des éléments suivants.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Type de donnéesData type Contexte de donnéesData context DescriptionDescription
échecloading NULL : pas de donnéesnull: no data Modèle utilisé pour afficher l’état du sélecteur pendant l’opération de demande à Microsoft Graph.The template used to render the state of the picker while the request to Microsoft Graph is being made.
errorerror NULL : pas de donnéesnull: no data Modèle utilisé si la recherche d’utilisateur ne renvoie aucun utilisateur.The template used if user search returns no users.

L’exemple suivant montre comment utiliser le error modèle.The following example shows how to use the error template.

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

Autorisations Microsoft GraphMicrosoft Graph permissions

Ce composant utilise les autorisations et les API Microsoft Graph suivantes.This component uses the following Microsoft Graph APIs and permissions.

APIAPI AutorisationPermission
/me/joinedTeams/me/joinedTeams User.Read.AllUser.Read.All
/teams/$ {ID}/Channels/teams/${id}/channels Group.Read.AllGroup.Read.All

AuthentificationAuthentication

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation d’authentification.The control uses the global authentication provider described in the authentication documentation.

Prolonger le contrôleExtend for more control

Pour les scénarios plus complexes ou une expérience utilisateur véritablement personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composants :For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions:

MéthodeMethod DescriptionDescription
renderSelectedrenderSelected Affiche l’équipe et le canal sélectionnés dans la zone d’entrée.Renders the selected team and channel in the input box.
renderInputrenderInput Affiche la zone d’entrée.Renders the input box.
renderDropdownrenderDropdown Affiche la liste déroulante.Renders the dropdown.
renderDropdownListrenderDropdownList Affiche les éléments dans la liste déroulante de manière récursive.Renders the items in the dropdown recursively.
renderItemrenderItem Affiche une équipe ou un canal dans la liste déroulante.Renders a team or a channel in the dropdown list.
renderHighlightedTextrenderHighlightedText Affiche le texte du canal, en mettant en surbrillance la requête d’entrée.Renders the channel text, highlighting the input query.
renderLoadingrenderLoading Affiche l’état de la liste déroulante de chargement.Renders the loading dropdown state.
renderErrorrenderError Affiche l’état d’erreur de la liste déroulante.Renders the dropdown error state.