Composant de sélecteur de personnes dans la boîte à outils Microsoft GraphPeople-Picker component in the Microsoft Graph Toolkit

Vous pouvez utiliser le mgt-people-picker composant Web pour rechercher des personnes et/ou des groupes.You can use the mgt-people-picker web component to search for people and/or groups. Par défaut, le composant recherche toutes les personnes et tous les utilisateurs de l’organisation, mais vous pouvez modifier le comportement pour rechercher également des groupes ou uniquement des groupes.By default, the component will search for all people and users in the organization, but you can change the behavior to also search for groups, or only groups. Vous pouvez également filtrer la recherche sur un groupe spécifique.You can also filter the search to a specific group.

ExempleExample

L’exemple suivant montre le mgt-people-picker composant.The following example shows the mgt-people-picker component. Commencez à rechercher un nom pour afficher les résultats et utilisez l’éditeur de code pour voir comment les Propriétés modifient le comportement du composant.Start searching for a name to see the results render and use the code editor to see how properties change the behavior of the component.

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

PropriétésProperties

Par défaut, le mgt-people-picker composant récupère des personnes à partir /me/people des /users points de terminaison et.By default, the mgt-people-picker component fetches people from the /me/people and /users endpoints. Utilisez les attributs suivants pour modifier ce comportement.Use the following attributes to change this behavior.

AttributAttribute PropriétéProperty DescriptionDescription
Show-Maxshow-max showMaxshowMax Valeur numérique indiquant le nombre maximal de personnes à afficher.A number value to indicate the maximum number of people to show. la valeur par défaut est 6.the default value is 6.
ID de groupegroup-id groupIdgroupId Valeur de type String appartenant à un groupe défini par Microsoft Graph pour un filtrage plus poussé des résultats de la recherche.A string value that belongs to a Microsoft Graph defined group for further filtering of the search results.
typetype typetype Type d’entité à rechercher.The type of entities to search for. Les options disponibles sont les suivantes : person , group , any .Available options are: person, group, any. La valeur par défaut est person.Default value is person. Cet attribut n’a aucun effet si la group-id propriété est définie.This attribute has no effect if group-id property is set.
type de groupegroup-type groupTypegroupType Type de groupe à rechercher.The group type to search for. Les options disponibles sont les suivantes : unified , security ,, mailenabledsecurity distribution , any .Available options are: unified, security, mailenabledsecurity, distribution, any. La valeur par défaut est any.Default value is any. Cet attribut n’a aucun effet si la type propriété est définie sur person .This attribute has no effect if the type property is set to person.
sélectionné-personnesselected-people selectedPeopleselectedPeople Tableau de personnes sélectionnées.An array of selected people. Définissez cette valeur pour sélectionner des personnes par programme.Set this value to select people programmatically.
contactspeople contactspeople Tableau de personnes trouvées et rendues dans le résultat de la rechercheAn array of people found and rendered in the search result
default-Selected-User-IDdefault-selected-user-ids defaultSelectedUserIdsdefaultSelectedUserIds Lorsqu’il a fourni une chaîne d’ID utilisateur Microsoft Graph séparés par des virgules, le composant affiche les utilisateurs respectifs comme sélectionnés lors de l’initialisation.When provided a string of comma-separated Microsoft Graph user IDs, the component renders the respective users as selected upon initialization.

Voici un show-max exemple.The following is a show-max example.

<mgt-people-picker show-max="4"> </mgt-people-picker>

Personnes sélectionnéesSelected people

La section personnes sélectionnées du composant affiche chaque personne choisie par le développeur ou l’utilisateur.The selected people section of the component renders each person chosen by the developer or user.

gestion des utilisateurs

Vous pouvez remplir les données de personnes sélectionnées en effectuant l’une des opérations suivantes :You can populate selected people data by doing one of the following:

  • Définition de la selectedPeople propriété directement, comme illustré dans l’exemple suivant.Setting the selectedPeople property directly, as shown in the following example.

    // personObject = User or Person from Microsoft Graph
    document.querySelector('mgt-people-picker').selectedPeople.push(personObject);
    
  • À l’aide de la selectUsersById() méthode, qui accepte un tableau d' ID d’utilisateur Microsoft Graph pour rechercher les détails de l’utilisateur associé à la sélection.Using the selectUsersById() method, which accepts an array of Microsoft graph user ids to find associated user details for selection.

    Remarque : Si aucun utilisateur n’est trouvé pour un id , aucune donnée n’est affichée id .Note: If no user is found for an id, no data will be rendered for that id.

    // id = Mirosoft graph User "id"
    document.querySelector('mgt-people-picker').selectUsersById(["id","id"])
    

ÉvénementsEvents

Les événements suivants sont déclenchés à partir du composant.The following events are fired from the component.

ÉvénementEvent DescriptionDescription
selectionChanged L’utilisateur a ajouté ou supprimé une personne de la liste des personnes sélectionnées/prélevées.The user added or removed a person from the list of selected/picked people.

Propriétés personnalisées CSSCSS custom properties

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

mgt-people-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; /* selection area background color */
    --dropdown-item-hover-background: #333d47; /* person background color on hover */
    
    --selected-person-background-color: #f1f1f1; /* person item background color */
    
    --font-color: white; /* input area border focus color */
    --placeholder-default-color: #f1f1f1; /* placeholder text color default*/
    --placeholder-focus-color: rgba(255, 255, 255, 0.8); /* placeholder text focus color */
}

ModèlesTemplates

mgt-people-picker prend en charge plusieurs modèles que vous pouvez utiliser pour remplacer certaines parties du composant.mgt-people-picker supports several templates that you can use to replace certain parts of the component. 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’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
Valeur par défaut.default NULL : pas de donnéesnull: no data Modèle utilisé pour remplacer le rendu de l’ensemble du composant.The template used to override the rendering of the entire component.
échecloading NULL : pas de donnéesnull: no data Modèle utilisé pour afficher l’état du sélecteur lors de la demande de graphique.The template used to render the state of picker while request to 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.
sans donnéesno-data NULL : pas de donnéesnull: no data Autre modèle utilisé si la recherche d’utilisateur ne renvoie aucun utilisateur.An alternative template used if user search returns no users.
Selected-personselected-person person : objet de détails de la personneperson: The person details object Modèle pour le rendu des personnes sélectionnées.The template to render selected people.
concernéeperson person : objet de détails de la personneperson: The person details object Modèle à afficher dans la liste déroulante.The template to render people in the dropdown.

Les exemples suivants montrent comment utiliser le error modèle.The following examples shows how to use the error template.

<mgt-people-picker>
  <template data-type="error">
    <p>Sorry, no people were found</p>
  </template>
</mgt-people-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/people/me/people People.ReadPeople.Read
/Users/users User.ReadBasic.AllUser.ReadBasic.All
/groups/groups Group.Read.AllGroup.Read.All
/Groups/ $ {GroupID}/members/groups/${groupId}/members User.ReadBasic.AllUser.ReadBasic.All
/Users/$ {userPrincipleName} /users/${userPrincipleName} User.ReadUser.Read

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
renderInputrenderInput Affiche la zone de texte de saisie.Renders the input text box.
renderSelectedPeoplerenderSelectedPeople Affiche les jetons des personnes sélectionnées.Renders the selected people tokens.
renderSelectedPersonrenderSelectedPerson Affiche un jeton de personne individuel.Renders an individual person token.
renderFlyoutrenderFlyout Affiche le chrome flyout.Renders the flyout chrome.
renderFlyoutContentrenderFlyoutContent Affiche l’état approprié dans la fenêtre mobile résultats.Renders the appropriate state in the results flyout.
renderLoadingrenderLoading Affiche l’état de chargement.Renders the loading state.
renderNoDatarenderNoData Affiche l’État lorsqu’aucun résultat n’est trouvé pour la requête de recherche.Renders the state when no results are found for the search query.
renderSearchResultsrenderSearchResults Affiche la liste des résultats de la recherche.Renders the list of search results.
renderPersonResultrenderPersonResult Affiche un résultat de recherche de personne individuel.Renders an individual person search result.