Freigeben über

Facepile Kontrolle (Vorschauversion)

  • Artikel

[Dieser Artikel ist Teil der Dokumentation zur Vorschauversion und kann geändert werden.]

Ein Steuerelement zum Anzeigen und Interagieren mit Bildern.

Notiz

Sie finden die vollständige Dokumentation und den Quellcode im GitHub-Codekomponenten-Repository.

Facepile-Steuerelement.

Wichtig

  • Dies ist eine Vorschauversion.
  • Funktionen in der Vorschau sind nicht für den Produktionseinsatz gedacht und können eine eingeschränkte Funktionalität aufweisen. Diese Funktionen stehen vor der offiziellen Veröffentlichung zur Verfügung, damit Kunden frühzeitig Zugriff erhalten und Feedback geben können.

Beschreibung des Dataflows

Ein Gesichtshaufen (Facepile) zeigt eine Liste von Personas an. Jeder Kreis repräsentiert eine Person und enthält deren Bild oder Initialen. Dieses Steuerelement wird häufig verwendet, wenn freigegeben wird, wer Zugriff auf eine bestimmte Ansicht oder Datei hat, oder wenn jemandem eine Aufgabe innerhalb eines Workflows zugewiesen wird.

Diese Codekomponente stellt einen Wrapper um das Fluent-Benutzeroberfläche Facepile Steuerelement bereit, das zur Verwendung in Canvas-Apps und benutzerdefinierten Seiten an eine Schaltfläche gebunden ist.

Eigenschaften

Schlüsseleigenschaften

Eigenschaften Beschreibung des Dataflows
Items Die zu rendernden Aktionselemente. Das erste Element wird als Stammelement betrachtet.
PersonaSize Größe der Persona, die auf dem Bildschirm erscheinen soll
OverflowButtonType Um auszuwählen, welche Art von Überlauf-Schaltfläche angezeigt werden soll und ob sie angezeigt werden soll oder nicht
MaxDisplayablePersonas Maximale Anzahl von Personas, die im Facepile erscheinen
Fünf ist die standardmäßige und empfohlene Zahl
ImageShouldFadeIn Ob das Bild beim Erscheinen einen Einblendeffekt haben soll
ShowAddButton Ob die Schaltfläche Hinzufügen in der Facepile-Komponente erscheinen soll
OverflowButtonLabel Aria-Label für die Überlauf-Schaltfläche
AddbuttonAriaLabel Aria-Label für die Hinzufügen-Schaltfläche

Items Eigenschaften

Name des Dataflows Beschreibung des Dataflows
ItemPersonaName Anzeigenname der Person
ItemPersonaKey Der Schlüssel identifiziert den spezifischen Artikel
Die Taste muss eindeutig sein
ItemPersonaImage Die Bildspalte von Dataverse Tabelle, die Persona Image (Profilbild) enthält
ItemPersonaImageInfo URL oder Base64-Inhalt des Persona-Bildes (Profilbild)
ItemPersonaPresence Optional – Um die Präsenz der Persona zu definieren
IsImage Ob das Persona-Bild (ItemPersonaImage) eine Bildspalte von Dataverse Tabelle ist.
Diese Eigenschaft ermöglicht es der Komponente, das Bild basierend auf dem Typ (URL oder Bild) zu rendern. Wahr, falls auf das Bild von Dataverse Tabelle und falsch verwiesen werden muss, falls es sich um eine URL oder Base64 handelt, auf die von der ItemPersonaImageInfo-Eigenschaft verwiesen werden soll
ItemPersonaClickable Ob die Persona angeklickt werden kann oder nicht

Beispiel Power Fx Formel für Items (benutzt den Office 365 Benutzer Konnektor)

Generieren einer Items Sammlung mit Fotos mit dem Office 365 Benutzerkonnektor

Eine Benutzerliste kann von jedem Datenquelle kommen, aber das Bild muss der Komponente bereitgestellt werden. Wenn Ihr Datenquelle keine Bilder für die Benutzer hat, können Sie die AddColumns() Power Fx Funktion verwenden, um die richtigen Attribute zur Liste hinzuzufügen und das Bild des Benutzers aus einer Liste von Benutzer-IDs oder Benutzerprinzipalnamen abzurufen, die einem aktiven Benutzer in Ihrem Microsoft Entra zugeordnet sind.

Generieren Sie eine Sammlung namens UserPersonas unter Verwendung des Office 365 Benutzerkonnektors, indem Sie auf den folgenden Beispielcode verweisen, und übergeben Sie dann die Sammlung an Items Eigenschaft des Steuerelements.

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

Notiz

Das IsImage ist auf „false“ gesetzt, da ItemPersonaImageInfo von einer Bild-URL stammt. Für zu rendernde Dataverse Bildfelder setzen Sie das IsImage Feld auf true und verwenden Sie ItemPersonaImage, um stattdessen den Bildwert zu übergeben.

Verbrauch

Stileigenschaften

Eigenschaften Beschreibung des Dataflows
Theme Akzeptiert eine JSON-Zeichenfolge, die mithilfe des Fluent-UI-Themen-Designers (windows.net) generiert wird. Wenn Sie dieses Feld leer lassen, wird das in Power Apps definierte Standarddesign verwendet. Wenn Sie dieses Feld leer lassen, wird das in Power Apps definierte Standarddesign verwendet. Siehe Designs für eine Konfigurationsanleitung.
AccessibilityLabel Aria-Beschriftung für Sprachausgabe

Ereigniseigenschaften

Eigenschaften Beschreibung des Dataflows
InputEvent Ein Ereignis, das an das Steuerelement gesendet werden soll. Zum Beispiel: SetFocus.

Behavior

Unterstützt SetFocus als InputEvent.

Bei Auswahl-Verhalten konfigurieren

Verwenden Sie die Switch()-Formel in der OnSelect-Eigenschaft der Komponente, um bestimmte Aktionen für jedes Element zu konfigurieren, indem auf die den für das Steuerelement ausgewählten ItemPersonaKey als Switch-Wert verwiesen wird.

Beispielt Power Fx Formel in OnSelect Eigenschaft von 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");
  )

Einschränkungen

Diese Codekomponente kann nur in Canvas-Apps und benutzerdefinierten Seiten verwendet werden.