Partager via

PeoplePicker contrôle (version préliminaire)

  • Article

[Cet article fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Un contrôle utilisé pour créer une expérience de chargement.

Note

La documentation complète et le code source sont accessibles dans le Référentiel de composants de code GitHub.

Contrôle PeoplePicker.

Important

  • Cette fonctionnalité est une fonctionnalité en version préliminaire.
  • Les fonctionnalités en version préliminaire ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une publication officielle afin que les clients puissent y accéder de façon anticipée et fournir des commentaires.

Description

Le sélecteur de personnes (PeoplePicker) est utilisé pour sélectionner une ou plusieurs entités, telles que des personnes ou des groupes, dans une liste. Il facilite la composition d’un e-mail à quelqu’un ou son ajout à un groupe si vous ne connaissez pas son nom complet ou son adresse e-mail.

Ce composant de code fournit un wrapper autour du contrôle Fluent UI PeoplePicker à utiliser dans les applications canevas et les pages personnalisées. Consultez la documentation des composants pour connaître les bonnes pratiques.

Propriétés principales

Property Description
Items Personnages pré-sélectionnés (membres) à apparaître sur Peoplepicker
Suggestions_Items Liste des membres suggérés parmi lesquels choisir. Il s’agit d’une propriété de jeu de données nécessaire
PeoplePickerType Type de PeoplePicker à utiliser.
MaxPeople Nombre maximum d’utilisateurs autorisés pour la sélection
NoResultFoundMesage Message à afficher si aucun résultat n’est trouvé en fonction du texte de recherche spécifié.
MinimumSearchTermLength Longueur minimale du critère de recherche à saisir avant de fournir les suggestions.
SearchTermToShortMessage Message personnalisé à afficher lorsque le texte de recherche est inférieur à MinimumSearchTermLength.
Error Pour mettre en surbrillance le sélecteur de personnes en rouge pour indiquer qu’il contient certaines erreurs nécessitant une validation.
ShowSecondaryText Spécifiez Oui ou non, selon que le texte secondaire (par exemple, JobTitle) doit être affiché ou non.

Items propriétés

Property Description
PersonaName Nom d’affichage du personnage.
PersonaKey La clé identifie l’article spécifique. La clé doit être unique.
PersonaImgUrl URL ou contenu Base64 de Persona Image (image de profil).
PersonaRole Texte secondaire, de préférence JobTitle du personnage
PersonaPresence Facultatif - Présence de la personne à afficher - n’affichera pas la présence si elle n’est pas définie. La valeur doit être une des suivantes : away, blocked, busy, dnd, none, offline, online
PersonaOOF Facultatif - Vrai ou Faux, selon que la personne est absente du bureau ou non.

Suggestions_Items propriétés

Property Description
SuggestionName Nom d’affichage du personnage.
SuggestionKey La clé identifie l’article spécifique. La clé doit être unique.
SuggestionImgUrl URL ou contenu Base64 de Persona Image (image de profil).
SuggestionRole Texte secondaire, de préférence JobTitle du personnage
SuggestionPresence Facultatif - Présence de la personne à afficher - n’affichera pas la présence si elle n’est pas définie. La valeur doit être une des suivantes : away, blocked, busy, dnd, none, offline, online
SuggestionOOF Facultatif - Vrai ou Faux, selon que la personne est absente du bureau ou non.

Propriétés supplémentaires

Property Description
Theme Accepte une chaîne JSON générée à l’aide du Concepteur de thème Fluent UI (windows.net). Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé.
AccessibilityLabel Étiquette aria pour les lecteurs d’écran
InputEvent Un événement à envoyer au contrôle. Prend en charge SetFocus en tant que InputEvent.

Examples

PeoplePicker prend en charge d’autres sources à partir desquelles la collection d’entrée peut être récupérée. Ci-après des exemples sur la manière d’utiliser le composant PeoplePicker.

Connecteur d’utilisateurs Office 365

  1. Ajoutez le connecteur Utilisateurs Office 365 en tant que source de données.

  2. Attribuez la formule Power Fx ci-dessous à la propriété On Search du contrôle pour créer une collection appelée UserCollection.

    ClearCollect(
    UserCollection,
    AddColumns(
        Filter(
            Office365Users.SearchUser(
                {
                    searchTerm: Self.SearchText,
                    top: 500
                }
            ),
            !(Mail in Self.SelectedPeople.PersonaKey)
        ),
        "SuggestionImgUrl",
        Substitute(
            JSON(
                Office365Users.UserPhotoV2(Id),
                JSONFormat.IncludeBinaryData
            ),
            """",
            ""
        ),
        "SuggestionKey",
        Mail,
        "SuggestionName",
        DisplayName,
        "SuggestionRole",
        JobTitle,
        "SuggestionPresence",
        "away"
    )
)

  3. Définissez la propriété Suggestions_Items sur UserCollection.

    Note

    La formule ci-dessus inclut une demande consécutive pour obtenir UserPhoto, ce qui augmente le temps de chargement. Si vous n’avez pas besoin de photos et souhaitez réduire le temps de recherche, utilisez la formule suivante dans la propriété Suggestions_Items du contrôle au lieu de UserCollection :

    AddColumns(
    Office365Users.SearchUser({ searchTerm: Self.SearchText, top: 500 }),
    "SuggestionKey", Mail, 
    "SuggestionName", DisplayName,
    "SuggestionRole", JobTitle
)

À ce stade, le contrôle fonctionne et les membres sélectionnés peuvent être obtenus à partir de la propriété SelectedPeople.

PeoplePicker1.SelectedPeople

Avec les tables Dataverse - Utilisateurs Microsoft Entra ou Utilisateurs

  1. Configurez la propriété Suggestions_Items en spécifiant le code d’extrait ci-dessous.

    Ajoutez des utilisateurs ou des utilisateurs spécifiques (en utilisant le code ci-dessous) du tableau à la collection d’éléments (sous la propriété Suggestions_Items) de PeoplePicker.

    -AAD Users tableau

    Search('AAD Users', Self.SearchText,"displayname" ,"mail")

    -Users tableau

    Search('Users', Self.SearchText,"fullname","internalemailaddress")

  2. Mappez les colonnes en fonction de vos besoins à l’aide de AddColumns(). Vous trouverez ci-dessous un exemple de mappage colonne-propriété :

    Nom de propriété Colonne de table AADUser Colonne de table User
    SuggestionKey "mail" "internalemailaddress"
    SuggestionName "displayname" "fullname"
    SuggestionRole "jobtitle" "jobtitle"

À ce stade, le sélecteur de personnes devrait fonctionner et les membres sélectionnés peuvent être obtenus à partir de la propriété SelectedPeople.

PeoplePicker1.SelectedPeople

Limitations

Ce composant de canevas ne peut être utilisé que dans les applications canevas et les pages personnalisées.