Freigeben über

Facepile Steuerelement (Vorschauversion)

[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 Vorschauversion sind nicht für den produktiven Einsatz 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

Ein „Facepile“ (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
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

Eigenschaften Items

Name Beschreibung
ItemPersonaName Anzeigename der Persona
ItemPersonaKey Der Schlüssel identifiziert den spezifischen Artikel
Der Schlüssel 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. „true“, falls auf das Bild von der Dataverse-Tabelle verwiesen werden muss, & „false“, falls es sich um eine URL oder Base64 handelt, auf die von der „ItemPersonaImageInfo“-Eigenschaft verwiesen werden soll
ItemPersonaClickable Ob die Persona klickbar sein soll

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

Generieren einer Items Sammlung mit Fotos mit dem Office 365 Benutzerkonnektor

Eine Benutzerliste kann aus jeder Datenquelle stammen, 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. Um Dataverse-Bildfelder darzustellen, setzen Sie das IsImage-Feld auf "true" und verwenden Sie ItemPersonaImage, um den Bildwert weiterzugeben.

Verbrauch

Stileigenschaften

Eigenschaften Beschreibung
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 Themen für eine Anleitung zur Konfiguration.
AccessibilityLabel Aria-Label für Sprachausgabe

Ereigniseigenschaften

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

Verhalten

Unterstützt SetFocus als InputEvent.

Das Verhalten „Bei Auswahl“ 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.

Power FX Formel-Beispiel in der 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.

  • Last updated on