Facepile Sterowanie (wersja zapoznawcza)

[Ten artykuł stanowi wstępną wersję dokumentacji i może ulec zmianie.]

Kontrolka używana do wyświetlania obrazów i interakcji z nimi.

Note

Pełna dokumentacja i kod źródłowy znajdują się w repozytorium komponentów kodu GitHub.

Kontrolka typu Facepile.

Ważna

  • Jest to funkcja w wersji zapoznawczej.
  • Funkcje w wersji zapoznawczej nie są przeznaczone do użytku w środowiskach produkcyjnych i mogą mieć ograniczoną funkcjonalność. Te funkcje są udostępniane przed oficjalnym wydaniem, dzięki czemu klienci mogą szybciej uzyskać do nich dostęp i przekazać opinie na ich temat.

Description

Zestaw face pile (Facepile) zawiera listę osób. Każde koło reprezentuje osobę i zawiera jej wizerunek lub inicjały. Często ta kontrolka jest używana podczas udostępniania, kto ma dostęp do określonego widoku lub pliku, lub podczas przypisywania komuś zadania w ramach przepływu pracy.

Ten składnik kodu udostępnia otokę kontrolki Fluent UI Facepile powiązanej z przyciskiem do użycia w aplikacjach kanwy i na stronach niestandardowych.

Properties

Właściwości kluczowe

Majątek Description
Items Elementy akcji do renderowania. Pierwszy element jest elementem głównym.
PersonaSize Rozmiar osoby wyświetlanej na ekranie
OverflowButtonType Aby wybrać typ przycisku Przepełnienia i czy przycisk ma być wyświetlany, czy nie
MaxDisplayablePersonas Maksymalna liczba Person, które mają się pojawić na Facepile
Pięć jest domyślną i zalecaną liczbą
ImageShouldFadeIn Czy obraz powinien mieć efekt zanikania podczas pojawiania się
ShowAddButton Czy w składniku Facepile ma być wyświetlany przycisk Dodaj
OverflowButtonLabel Etykieta Aria dla przycisku Przepełnienia
AddbuttonAriaLabel Etykieta Aria dla przycisku Dodawania

Items Właściwości

Nazwa Description
ItemPersonaName Nazwa wyświetlana danej osoby
ItemPersonaKey Klucz identyfikuje określony element
Klucze muszą być niepowtarzalne
ItemPersonaImage Kolumna obrazu tabeli Dataverse, która zawiera obraz osoby (zdjęcie profilowe)
ItemPersonaImageInfo Adres URL lub base64 treść obrazu osoby (obraz profilu)
ItemPersonaPresence Opcjonalnie — aby zdefiniować obecność osoby
IsImage Czy obraz osoby (ItemPersonaImage) jest kolumną obrazu w tabeli Dataverse?
Ta właściwość umożliwia składnikowi renderowanie obrazu na podstawie typu (URL lub Image). Prawda, gdy obraz musi być przywoływany z tabeli Dataverse & fałsz, gdy jest to adres URL lub kod Base64, do którego należy się odnieść z właściwości ItemPersonaImageInfo
ItemPersonaClickable Czy persona powinna być klikalna

Przykładowa formuła Power Fx dla Items (używa łącznika Office 365 Users)

Generowanie kolekcji Items z zdjęciami za pomocą łącznika Office 365 Users

Lista użytkowników może pochodzić z dowolnego źródło danych, ale obraz musi być dostarczony do składnika. Jeśli źródło danych nie zawiera obrazów dla użytkowników, można użyć funkcji Power Fx AddColumns() w celu dodania do listy odpowiednich atrybutów i pobrania obrazu użytkownika z listy identyfikatorów użytkownika lub nazw użytkowników głównych, które pasują do aktywnego użytkownika w programie Microsoft Entra.

Wygeneruj kolekcję o nazwie UserPersonas za pomocą łącznika Użytkownicy Office 365, odwołując się do poniższego przykładowego kodu, a następnie przekaż kolekcję do właściwości Items kontrolki.

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

Note

Pole IsImage ma ustawioną wartość fałsz, ponieważ ItemPersonaImageInfo pochodzi z adresu URL obrazu. Aby wyrenderować pola obrazów Dataverse, ustaw pole IsImage na wartość Prawda i użyj w zamian ItemPersonaImage do przekazania wartości obrazu.

Usage

Właściwości stylu

Majątek Description
Theme Akceptuje ciąg JSON generowany przy użyciu Projektanta motywów Fluent UI (windows.net). Pozostawienie tego pustego spowoduje użycie domyślnego motywu zdefiniowanego przez Power Apps. Pozostawienie tego pustego spowoduje użycie domyślnego motywu zdefiniowanego przez Power Apps. Zobacz motywy, aby uzyskać wskazówki dotyczące konfiguracji.
AccessibilityLabel Czytnik ekranu aria-label

Właściwości zdarzenia

Majątek Description
InputEvent Zdarzenie do wysłania do kontroli Na przykład: SetFocus.

Behavior

Obsługuje SetFocus jako element InputEvent.

Skonfiguruj zachowanie On Select

Użyj formuły Switch() we właściwości komponentu OnSelect, aby skonfigurować określone działania dla każdego elementu, odwołując się do wybranego przez kontrolkę elementu ItemPersonaKey jako wartości przełącznika.

Przykładowa formuła Power Fx we właściwości OnSelect dla 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");
  )

Limitations

Tego składnika kodu można używać tylko w aplikacjach kanwy i na stronach niestandardowych.

  • Last updated on