Condividi tramite

Facepile controllo (anteprima)

[Questo articolo fa parte della documentazione non definitiva, pertanto è soggetto a modifiche.]

Un controllo utilizzato per visualizzare le immagini e interagire con le stesse.

Nota

Documentazione e codice sorgente sono disponibili nel repository dei componenti del codice GitHub.

Controllo Facepile.

Importante

  • Questa è una funzionalità di anteprima.
  • Le funzionalità di anteprima non sono progettate per l'uso in produzione e possono avere funzionalità limitate. Queste funzionalità sono disponibili prima di una versione ufficiale di modo che i clienti possano ottenere un accesso prioritario e fornire dei commenti.

Descrizione

Una pila di facce (Facepile) visualizza un elenco di profili. Ogni cerchio rappresenta una persona e contiene l'immagine o le iniziali della stessa. Spesso questo controllo viene utilizzato quando si condivide chi ha accesso a una visualizzazione o a un file specifico o quando si assegna a qualcuno un'attività in un flusso di lavoro.

Questo componente di codice fornisce un wrapper intorno al controllo Fluent UI Facepile associato a un pulsante per l'utilizzo in app canvas e pagine personalizzate.

Proprietà

Proprietà chiave

Proprietà Descrizione
Items Gli elementi di azione di cui eseguire il rendering. Il primo elemento è considerato l'elemento radice.
PersonaSize Dimensione della persona da visualizzare sullo schermo
OverflowButtonType Per scegliere quale tipo di pulsante Overflow visualizzare e se deve apparire o meno
MaxDisplayablePersonas Numero massimo di utenti tipo da visualizzare con il controllo Facepile
Cinque è il numero predefinito e consigliato
ImageShouldFadeIn Se l'immagine deve avere o meno un effetto Dissolvenza durante la visualizzazione
ShowAddButton Se il pulsante Aggiungi deve apparire nel componente Facepile
OverflowButtonLabel Etichetta Aria per il pulsante Overflow
AddbuttonAriaLabel Etichetta Aria per il pulsante Aggiungi

Items Proprietà

Name Descrizione
ItemPersonaName Nome visualizzato della persona
ItemPersonaKey La chiave identifica l'elemento specifico
La chiave deve essere univoca
ItemPersonaImage La colonna immagine della tabella Dataverse che contiene l'immagine dell'utente tipo (immagine del profilo)
ItemPersonaImageInfo Contenuto URL o Base64 dell'immagine di Persona (immagine del profilo)
ItemPersonaPresence Facoltativo - Per definire la presenza della persona
IsImage Se l'immagine della persona (ItemPersonaImage) è una colonna immagine della tabella Dataverse.
Questa proprietà consente al componente di eseguire il rendering dell'immagine in base al tipo (Url o Immagine). True nel caso sia necessario fare riferimento all'immagine dalla tabella Dataverse e false nel caso sia necessario fare riferimento a un URL o Base64 dalla proprietà ItemPersonaImageInfo
ItemPersonaClickable Se la persona deve essere cliccabile o meno

Esempio di formula Power Fx per Items (usa il connettore Utenti di Office 365)

Creare la raccolta Items con foto utilizzando il connettore Utenti di Office 365

Un elenco di utenti può provenire da qualsiasi origine dati, ma l'immagine deve essere fornita al componente. Se l'origine dati non ha immagini per gli utenti, puoi usare la funzione AddColumns() di Power Fx per aggiungere gli attributi corretti all'elenco e recuperare l'immagine dell'utente, da un elenco di ID utente o nomi delle entità utente associati a un utente attivo in Microsoft Entra.

Genera una raccolta chiamata UserPersonas usando il connettore Utenti di Office 365, facendo riferimento al codice di esempio riportato di seguito, quindi passa la raccolta nella proprietà Items del controllo.

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

Nota

Il campo IsImage è impostato su false perché ItemPersonaImageInfo proviene da un'immagine URL. Per rendere i campi di immagine Dataverse, imposta il campo IsImage su true e utilizza ItemPersonaImage per passare invece il valore dell'immagine.

Utilizzo

Proprietà di stile

Proprietà Descrizione
Theme Accetta una stringa JSON generata utilizzando la finestra di progettazione del tema dell'interfaccia utente Fluent (windows.net). Lasciare questo vuoto comporterà l'utilizzo del tema predefinito definito da Power Apps. Lasciare questo vuoto comporterà l'utilizzo del tema predefinito definito da Power Apps. Vedi la creazione di temi per istruzioni su come eseguire la configurazione.
AccessibilityLabel Aria-label dell'utilità per la lettura dello schermo

Proprietà dell'evento

Proprietà Descrizione
InputEvent Evento da inviare al controllo. Ad esempio, SetFocus.

Comportamento

Supporta SetFocus come InputEvent.

Configurare il comportamento "OnSelect"

Usa la formula Switch() nella proprietà del componente OnSelect per configurare azioni specifiche per ciascun elemento facendo riferimento al comando ItemPersonaKey selezionato come valore di switch.

Esempio di formula Power Fx nella proprietà OnSelect di 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");
  )

Limiti

Questo componente di codice può essere usato solo nelle app canvas e nelle pagine personalizzate.

  • Last updated on