Delen via

Facepile controle (preview)

  • Artikel

[Dit artikel maakt deel uit van de voorlopige documentatie en kan nog veranderen.]

Een besturingselement dat wordt gebruikt om afbeeldingen weer te geven en ermee te communiceren.

Notitie

Volledige documentatie en broncode vindt u in de GitHub-opslagplaats voor codeonderdelen.

Besturingselement Facepile.

Belangrijk

  • Dit is een preview-functie.
  • Preview-functies zijn niet bedoeld voor productiegebruik en bieden mogelijk beperkte functionaliteit. Deze functies zijn beschikbaar vóór een officiële release zodat klanten vroeg toegang kunnen krijgen en feedback kunnen geven.

Omschrijving

Een gezichtenreeks (Facepile) geeft een lijst met persona's weer. Elke cirkel vertegenwoordigt een persoon en bevat zijn of haar afbeelding of initialen. Vaak wordt dit besturingselement gebruikt om aan te geven wie toegang heeft tot een specifieke weergave of een specifiek bestand, of bij het toewijzen van een taak aan iemand binnen een werkstroom.

Dit codeonderdeel biedt een wrapper rond het Fluent UI-besturingselement Facepile dat is gebonden aan een knop voor gebruik in canvas-apps en aangepaste pagina's.

Eigenschappen

Belangrijke eigenschappen

Eigenschappen Omschrijving
Items De actie-items die moeten worden weergegeven. Het eerste item wordt beschouwd als het hoofditem.
PersonaSize Grootte van de persona die op het scherm moet verschijnen
OverflowButtonType Kiezen welk type knop Overloop moet worden weergegeven en of deze wel of niet moet verschijnen
MaxDisplayablePersonas Maximaal aantal persona's dat van de Facepile mag verschijnen
Vijf is het standaard en aanbevolen aantal
ImageShouldFadeIn Of de afbeelding een Fade In-effect moet hebben tijdens het verschijnen
ShowAddButton Of de knop Toevoegen moet verschijnen in het Facepile-onderdeel
OverflowButtonLabel Aria-label voor knop Overloop
AddbuttonAriaLabel Aria-label voor knop Toevoegen

Items Eigenschappen

Name Omschrijving
ItemPersonaName Weergavenaam van de persona
ItemPersonaKey De sleutel voor het identificeren van het specifieke item
De sleutel moet uniek zijn
ItemPersonaImage De afbeeldingskolom van de Dataverse-tabel die persona-afbeelding (profielfoto) bevat
ItemPersonaImageInfo URL of Base64-inhoud van persona-afbeelding (profielfoto)
ItemPersonaPresence Optioneel - Om de aanwezigheid van de persona te definiëren
IsImage Of de persona-afbeelding (ItemPersonaImage) een afbeeldingskolom is van de Dataverse-tabel.
Met deze eigenschap kan het onderdeel de afbeelding weergeven op basis van het type (URL of Afbeelding). Waar voor het geval naar Afbeelding moet worden verwezen vanuit Dataverse-tabel en onwaar als het een URL of Base64 is waarnaar wordt verwezen vanuit de eigenschap ItemPersonaImageInfo
ItemPersonaClickable Of de persona wel of niet klikbaar moet zijn

Voorbeeld van Power Fx-formule voor Items (gebruikt de connector Office 365-gebruikers)

Verzameling Items genereren met foto's met behulp van de connector Office 365-gebruikers

Een lijst met gebruikers kan afkomstig zijn van elke gegevensbron, maar de afbeelding moet aan het onderdeel worden verstrekt. Als uw gegevensbron geen afbeeldingen heeft voor de gebruikers, kunt u de Power Fx-functie AddColumns() gebruiken om de juiste kenmerken aan de lijst toe te voegen en de afbeelding van de gebruiker op te halen uit een lijst met gebruikers-id's of gebruikers-principalnamen die zijn toegewezen aan een actieve gebruiker in uw Microsoft Entra.

Genereer een verzameling met de naam UserPersonas met behulp van de connector Office 365-gebruikers door naar de onderstaande voorbeeldcode te verwijzen en geef de verzameling vervolgens door aan de eigenschap Items van het besturingselement.

ClearCollect(
    UserPersonas,
    AddColumns(
       // Get first 10 users who have email ID - optional
        Filter(
            Office365Users.SearchUser({top: 10}),
            Mail <> Blank()
        ),
        "ItemPersonaKey",
        Mail,
        "ItemPersonaName",
        DisplayName,
        "IsImage",
        false,
        "ItemPersonaImageInfo",
        //Get base64 image data
        Substitute(
            JSON(
                Office365Users.UserPhotoV2(Id),
                JSONFormat.IncludeBinaryData
            ),
            """",
            ""
        ),
        "ItemPersonaPresence",
        "Away",
        "ItemPersonaClickable",
        true
    )
);

Notitie

Het veld IsImage is ingesteld op false omdat de ItemPersonaImageInfo afkomstig is van een afbeeldings-URL. U kunt Dataverse-afbeeldingsvelden weergeven door het veld IsImage in te stellen op true en de ItemPersonaImage te gebruikenom in plaats daarvan de afbeeldingswaarde door te geven.

Gebruik

Stijleigenschappen

Eigenschappen Omschrijving
Theme Accepteert een JSON-tekenreeks die is gegenereerd met Ontwerper van Fluent UI Theme (windows.net). Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Zie Themagebruik voor richtlijnen voor configureren.
AccessibilityLabel Arialabel voor schermlezers

Eigenschappen van gebeurtenis

Eigenschappen Omschrijving
InputEvent Een gebeurtenis waarnaar het besturingselement moet worden verzonden Bijvoorbeeld SetFocus.

Gedrag

Ondersteunt SetFocus als een InputEvent.

OnSelect-gedrag configureren

Gebruik de formule Switch() in de eigenschap OnSelect van het onderdeel om specifieke acties voor elk item te configureren door te verwijzen naar de geselecteerde ItemPersonaKey van het besturingselement als de schakelwaarde.

Voorbeeld van Power Fx-formule in eigenschap OnSelect van Facepile:

  Switch( Self.EventName,
    /* Define action when persona clicked */
    "PersonaEvent", 
    Notify("Persona clicked: " & Self.Selected.ItemPersonaKey);
    ,
    
    /* Define logic when the add button clicked */
    "AddButtonEvent", 
    Notify("Add button was clicked");
    ,
  
    /* Define logic when overflow button clicked*/
    "OverFlowButtonEvent",
    Notify("Overflow button clicked");
  )

Beperkingen

Dit codeonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.