Del via

Facepile Kontrolelement (forhåndsversion)

  • Artikel

[Denne artikel er dokumentation til den foreløbige udgivelse. Der kan forekomme ændringer.]

Et kontrolelement, der bruges til at vise og arbejde med billeder.

Bemærk

Fuld dokumentation og kildekode fundet i GitHub-kodekomponenters lager.

Kontrolelementet Facepile.

Vigtigt

  • Dette er en forhåndsversion af funktionen.
  • Forhåndsversionsfunktioner er ikke beregnet til produktionsformål og kan have begrænset funktionalitet. Disse funktioner er tilgængelige før en officiel udgivelse, så kunderne kan få tidlig adgang og give feedback.

Beskrivelse

En Facepile viser en liste over karakterer. Hver cirkel repræsenterer en person og indeholder dennes billede eller initialer. Dette kontrolelement bruges ofte, når du deler, hvem der har adgang til en bestemt visning eller fil, eller når du tildeler en person en opgave i en arbejdsproces.

Denne kodekomponent tilføjer en ombryder rundt om kontrolelementet Fluent-brugergrænsefladen Facepile, der er bundet til en knap til brug i lærredapps og på brugerdefinerede sider.

Egenskaber

Nøgleegenskaber

Egenskab Beskrivelse
Items De handlingspunkter, der skal gengives. Det første element opfattes som rodelementet.
PersonaSize Størrelsen på den karakter, der skal vises på skærmen
OverflowButtonType Sådan vælges, hvilken type overløbsknap der skal vises, og om knappen skal vises eller ej
MaxDisplayablePersonas Maksimalt antal karakterer, der skal vises af Facepile
Fem er standarden og det anbefalede antal
ImageShouldFadeIn Om billedet skal fades ind, mens det bliver vist
ShowAddButton Om knappen Tilføj skal vises i Facepile-komponent
OverflowButtonLabel Aria-label til knappen Overløb
AddbuttonAriaLabel Aria-label til knappen Tilføj

Items Egenskaber

Navn Beskrivelse
ItemPersonaName Vist navn for karakter
ItemPersonaKey Nøglen identificerer det specifikke element
Nøglen skal være entydig
ItemPersonaImage Den billedkolonne i Dataverse-tabellen, der indeholder Persona Image(Profile Picture)
ItemPersonaImageInfo URL-adresse eller Base64-indhold af Persona Image(Profile Picture)
ItemPersonaPresence Valgfrit – Sådan defineres karakterens tilstedeværelse
IsImage Om persona image(ItemPersonaImage) er en billedkolonne i Dataverse-tabellen.
Denne egenskab gør det muligt for komponenten at gengive billedet baseret på typen (URL-adresse eller billede). Sand i tilfælde af, at billedet skal refereres til fra Dataverse-tabellen, og falsk, hvis det er en URL-adresse eller Base64, der skal henvises til fra egenskaben ItemPersonaImageInfo
ItemPersonaClickable Om karakteren skal være klikbar

Eksempel på Power Fx-formel for Items (bruger Office 365-brugere-connector)

Opret Items-samling med billeder ved hjælp af Office 365-brugeres connector

Der kan komme en liste over brugere fra datakilde, men billedet skal leveres til komponenten. Hvis datakilde ikke har billeder til brugerne, kan du bruge funktionen AddColumns() Power Fx til at føje de rette attributter til listen og hente brugerens billede fra en liste over bruger-id'er eller brugerkonti, der knyttes til en aktiv bruger i din Microsoft Entra.

Opret en samling, der kaldes UserPersonas ved hjælp af Office 365-brugeres connector, ved at henvise til nedenstående eksempelkode, og send derefter samlingen til Items-egenskaben for kontrolelementet.

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
    )
);

Bemærk

Feltet IsImage er angivet til false, fordi ItemPersonaImageInfo kommer fra en billedwebadresse. Hvis du vil have vist Dataverse-billedfelter, skal du angive feltet IsImage til sand og i stedet bruge ItemPersonaImage til at overføre det til billedværdien.

Brug

Egenskaber for typografi

Egenskab Beskrivelse
Theme Accepterer en JSON-streng, der oprettes ved hjælp af Fluent UI Theme-designer (windows.net). Hvis du lader dette være tomt, vises standardtemaet, defineret af Power Apps. Hvis du lader dette være tomt, vises standardtemaet, defineret af Power Apps. Se tema for, hvordan du konfigurerer.
AccessibilityLabel Aria-label til skærmlæsere

Egenskaber for hændelse

Egenskab Beskrivelse
InputEvent En hændelse, der skal sendes til kontrolelementet. For eksempel SetFocus.

Funktionsmåde

Understøtter SetFocus som en InputEvent.

Konfigurere funktionsmåden af OnSelect

Brug formlen Switch() i komponentens egenskab OnSelect til at konfigurere specifikke handlinger for hvert element ved at henvise til kontrolelementets valgte ItemPersonaKey som parameterværdi.

Eksempel på Power Fx-formel i OnSelect-egenskaben for 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");
  )

Begrænsninger

Denne kodekomponent kan kun bruges i lærredapps og brugerdefinerede sider.