Jaa

Facepile Valvonta (esiversio)

  • Artikkeli

[Tämä artikkeli sisältää julkaisua edeltävää materiaalia ja voi muuttua.]

Ohjausobjekti, jota käytetään kuvien näyttämiseen ja niiden kanssa vuorovaikuttamiseen.

Muistiinpano

Täydellinen dokumentaatio ja lähdekoodi löytyvät koodikomponenttien GitHub-säilöstä.

Facepile-ohjausobjekti.

Tärkeä

  • Tämä on esiversiotoiminto.
  • Esiversiotoimintoja ei ole tarkoitettu tuotantokäyttöön, ja niiden toiminnot voivat olla rajoitettuja. Nämä toiminnot ovat käytettävissä ennen virallista julkaisua, jotta asiakkaat voivat käyttää niiden ennakkojulkaisua ja antaa palautetta.

Description

Kasvopino (Facepile) näyttää luettelon henkilöitä. Jokainen ympyrä edustaa henkilöä ja sisältää hänen kuvansa tai nimikirjaimensa. Tätä ohjausobjektia käytetään usein tietyn näkymän tai tiedoston käyttöoikeuksien jakamiseen tai kun jollekulle delegoidaan työnkulussa tehtävä.

Tämä koodikomponentti paketoi Fluent UI:n Facepile-ohjausobjektin, joka on sidottu pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla käytettävään painikkeeseen.

Ominaisuudet

Tärkeimmät ominaisuudet

Ominaisuus Description
Items Hahmonnevat toimintokohteet. Ensimmäinstä kohdetta kutsutaan juurinimikkeeksi.
PersonaSize Näytössä näkyvän henkilökuvan koko
OverflowButtonType Valitse, minkätyyppinen ylivuotopainike näytetään vai näytetäänkö sitä lainkaan
MaxDisplayablePersonas Facepile-komponentissa näytettyjen henkilökuvien enimmäismäärä
Oletusarvo ja suositus on viisi
ImageShouldFadeIn Tulisiko kuvan ilmestyä näyttöön asteittain
ShowAddButton Tulisiko Facepile-komponentissa näyttää Lisää-painike
OverflowButtonLabel Ylivuotopainikkeen Aria-otsikko
AddbuttonAriaLabel Lisää-painikkeen Aria-otsikko

Items Majoituspaikkaa

Name Description
ItemPersonaName Henkilökuvan näyttönimi
ItemPersonaKey Avain, joka tunnistaa tietyn kohteen
Avaimen täytyy olla yksilöllinen
ItemPersonaImage Henkilökuvan (profiilikuvan) sisältävän Dataverse-taulukon kuvasarake
ItemPersonaImageInfo Henkilökuvan (profiilikuvan) Url- tai Base64-sisältö
ItemPersonaPresence Valinnainen – Henkilön läsnäolon määrittäminen
IsImage Onko henkilökuva (ItemPersonaImage) Dataverse-taulukon kuvasarake.
Tämän ominaisuuden avulla komponentti voi hahmontaa kuvan tyypin perusteella (Url tai kuva). True, jos kuvaan täytyy viitata Dataverse-taulukosta, ja false, jos se on Url tai Base64-kohde, johon täytyy viitata ItemPersonaImageInfo-ominaisuudesta
ItemPersonaClickable Voiko henkilökuvaa napsauttaa

Esimerkki Power Fx -kaavasta kohteelle Items (käyttää Office 365 Users -yhdistintä)

Luo Items-kokoelma valokuvia Office 365 Users -yhdistimen avulla

Käyttäjäluettelo voi olla peräisin mistä tietolähteestä tahansa, mutta kuva on annettava osalle. Jos tietolähde ei sisällä kuvia käyttäjille, voit lisätä oikeat määritteet luetteloon AddColumns() Power Fx-funktiolla ja noutaa käyttäjän kuvan niiden käyttäjätunnusten tai käyttäjän päänimien luettelosta, jotka liittyvät -järjestelmän aktiiviseen käyttäjään Microsoft Entrassa.

Luo kokoelma nimeltä UserPersonas käyttäen Office 365 Users -yhdistintä viittaamalla alla olevaan näytekoodiin ja välitä sitten kokoelma ohjausobjektin Items-ominaisuudelle.

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

Muistiinpano

Kentän IsImage arvona on false, koska ItemPersonaImageInfo tulee kuvan URL-osoitteesta. Jos haluat hahmontaa Dataverse-kuvakenttiä , aseta IsImage-kentän arvoksi tosi ja käytä ItemPersonaImagea sen sijaan arvon välittämiseen.

Käyttö

Tyylin ominaisuudet

Ominaisuus Description
Theme Hyväksyy Fluent UI Theme Designer (windows.net) -sovelluksella luodun JSON-merkkijonon. Tämän kentän jättäminen tyhjäksi käyttää Power Appsin määrittämää oletusteemaa. Tämän kentän jättäminen tyhjäksi käyttää Power Appsin määrittämää oletusteemaa. Katso määritysohjeet kohdasta Teemat.
AccessibilityLabel Näytönlukuohjelman aria-otsikko

Tapahtuman ominaisuudet

Ominaisuus Description
InputEvent Ohjausobjektiin lähetettävä tapahtuma. Esimerkki: SetFocus.

Toiminta

Tukee SetFocus-tapahtumaa InputEvent-tapahtumana.

Valittaessa-toiminnan määrittäminen

Switch()-kaavan käyttäminen komponentin OnSelect-ominaisuudessa määrittää kunkin kohteen toiminnot viittaamalla ohjausobjektin valittuun ItemPersonaKey-ominaisuuteen kytkimen arvona.

Esimerkki Power Fx -kaavasta Facepile-komponentin OnSelect-ominaisuudessa:

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

Rajoitukset

Tätä koodikomponenttia voidaan käyttää vain pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla.