Facepile ovládanie (verzia Preview)

[Tento článok je predbežnou dokumentáciou a môže sa zmeniť.]

Ovládací prvok používaný na zobrazenie obrázkov a interakciu s nimi.

Poznámka

Úplnú dokumentáciu a zdrojový kód nájdete v odkladacom priestore komponentov kódu GitHub.

Dôležité

• Toto je ukážková funkcia.
• Funkcie ukážky nie sú určené na produkčné účely a môžu mať obmedzenú funkčnosť. Tieto funkcie sú k dispozícii pred oficiálnym vydaním, aby k nim mohli zákazníci získať rýchly prístup a poskytnúť odozvu.

Description

Facepile (Facepile) zobrazuje zoznam osôb. Každý kruh predstavuje osobu a obsahuje jej obrázok alebo iniciály. Tento ovládací prvok sa často používa pri zdieľaní osôb, ktoré majú prístup ku konkrétnemu zobrazeniu alebo súboru, alebo keď niekomu priraďujete úlohu v rámci pracovného postupu.

Táto súčasť kódu poskytuje obal okolo ovládacieho prvku Fluent UI Facepile previazaný s tlačidlom na použite na stránkach plátna a vlastných stránkach.

Vlastnosti

Kľúčové vlastnosti

Vlastnosť	Description
Items	Akčné položky na vykreslenie. Prvá položka sa považuje za koreňovú položku.
PersonaSize	Veľkosť osoby, ktorá sa zobrazí na obrazovke
OverflowButtonType	Ak chcete vybrať, ktorý typ tlačidla pretečenia sa má zobraziť a či sa má zobraziť alebo nie
MaxDisplayablePersonas	Maximálny počet osôb, ktoré sa zobrazí pre Facepile Päť je predvolené a odporúčané číslo
ImageShouldFadeIn	Určuje, či má mať obrázok pri zobrazovaní efekt zoslabovania
ShowAddButton	Či sa má tlačidlo Pridať objaviť v súčasti Facepile
OverflowButtonLabel	Označenie Aria pre tlačidlo Pretečenie
AddbuttonAriaLabel	Označenie Aria pre tlačidlo Pridať

Items Vlastnosti

Name	Description
ItemPersonaName	Zobrazovaný názov osoby
ItemPersonaKey	Kľúč identifikuje konkrétnu položku Kľúč musí byť jedinečný
ItemPersonaImage	Stĺpec obrázka v tabuľke Dataverse, ktorý obsahuje obrázok osoby (profilový obrázok)
ItemPersonaImageInfo	Url alebo Base64 obsah obrázku osoby (profilový obrázok)
ItemPersonaPresence	Voliteľné – na definovanie prítomnosti osoby
IsImage	Či je obrázok osoby (ItemPersonaImage) stĺpcom obrázka v tabuľke Dataverse. Táto vlastnosť umožňuje súčasti vykresliť obrázok na základe typu (URL alebo obrázok). Pravda v prípade, že obrázok potrebuje odkazovať z Dataverse tabuľky & nepravda, v prípade, že ide o adresu URL alebo Base64, na ktorú sa má odkazovať z vlastnosti ItemPersonaImageInfo
ItemPersonaClickable	Či má byť osoba klikateľná alebo nie

Príklad vzorca Power Fx pre Items (používa konektor Používatelia Office 365)

Vytvorenie kolekcie Items s fotografiami pomocou konektora Používatelia Office 365

Zoznam používateľov môže pochádzať z ktoréhokoľvek zdroja údajov, ale súčasti musí byť poskytnutý obrázok. Ak váš zdroj údajov nemá obrázky pre používateľov, môžete použiť funkciu AddColumns() Power Fx na pridanie správnych atribútov do zoznamu a načítanie obrázka používateľa zo zoznamu ID používateľov alebo používateľov hlavné mená, ktoré sa mapujú na aktívneho používateľa vo vašom Microsoft Entra.

Vygenerujte kolekciu s názvom UserPersonas pomocou Používateľského konektora Office 365 podľa nižšie uvedeného vzorového kódu a potom odovzdajte kolekciu do vlastnosti Items ovládacieho prvku.

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

Poznámka

Pole IsImage je nastavené na hodnotu nepravda, pretože ItemPersonaImageInfo pochádza z adresy URL obrázka. Ak chcete vykresliť polia obrázkov Dataverse, nastavte pole IsImage na hodnotu pravda a namiesto toho použite ItemPersonaImage na odovzdanie hodnoty obrázka.

Využitie

Vlastnosti štýlu

Vlastnosť	Description
Theme	Akceptuje reťazec JSON, ktorý je vygenerovaný pomocou aplikácie Fluent UI Theme Designer (windows.net). Ak toto necháte prázdne, použije sa predvolený motív definovaný v Power Apps. Ak toto necháte prázdne, použije sa predvolený motív definovaný v Power Apps. Pokyny na konfiguráciu nájdete v časti nastavenie motívov.
AccessibilityLabel	Označenie aria-label pre čítačky obrazovky

Vlastnosti udalosti

Vlastnosť	Description
InputEvent	Udalosť, ktorá sa má odoslať ovládaciemu prvku. Napríklad SetFocus.

Správanie

Podporuje SetFocus ako InputEvent.

Konfigurácia správania Pri výbere

Pomocou vzorca Switch() vo vlastnosti OnSelect súčasti nakonfigurujte konkrétne akcie pre každú položku podľa vybratého ItemPersonaKey ovládacieho prvku ako hodnoty prepínača.

Príklad vzorca Power Fx vo vlastnosti OnSelect pre 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");
  )

Obmedzenia

Tento komponent kódu je možné použiť iba v aplikáciách plátna a vlastných stránkach.