Condividi tramite

Facepile controllo (anteprima)

  • Articolo

[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 destinate ad essere utilizzate per la produzione e sono soggette a restrizioni. 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 utenti tipo. 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 dell'azione di cui eseguire il rendering. Il primo elemento è considerato l'elemento radice.
PersonaSize Dimensioni dell'utente tipo 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 un effetto Dissolvenza durante la visualizzazione
ShowAddButton Se il pulsante Aggiungi deve apparire nel componente Facepile
OverflowButtonLabel Etichetta Aria per pulsante Overflow
AddbuttonAriaLabel Etichetta Aria per pulsante Aggiungi

Items Proprietà

Name Descrizione
ItemPersonaName Il nome visualizzato dell'utente tipo
ItemPersonaKey La chiave identifica la proprietà Item specifica
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 dell'utente tipo (immagine del profilo)
ItemPersonaPresence Facoltativo - Per definire la presenza dell'utente tipo
IsImage Se l'immagine dell'utente tipo (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 l'utente tipo 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 la tua origine dati non ha immagini per gli utenti, puoi usare la funzione AddColumns() 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 Etichetta aria per utilità per la lettura dello schermo

Proprietà dell'evento

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

Comportamento

Supporta SetFocus come un 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.