Compartir a través de

Facepile control (versión preliminar)

  • Artículo

[Este artículo es documentación preliminar y está sujeto a modificaciones].

Un control utilizado para mostrar e interactuar con imágenes.

Nota

La documentación completa y el código fuente se encuentran en el repositorio de componentes de código GitHub.

Control Facepile.

Importante

  • Esta es una característica en versión preliminar.
  • Las características en versión preliminar no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes del lanzamiento oficial para que los clientes puedan tener un acceso anticipado y proporcionar comentarios.

Descripción

Una pila de caras (Facepile) muestra una lista de personas. Cada círculo representa a una persona y contiene su imagen o iniciales. A menudo, este control se usa cuando se comparte quién tiene acceso a una vista o archivo específico, o cuando se asigna a alguien una tarea dentro de un flujo de trabajo.

Este componente de código proporciona un envoltorio alrededor del control Fluent UI Facepile, vinculado a un botón para su uso en aplicaciones de lienzo y páginas personalizadas.

Propiedades

Propiedades importantes

Property Descripción
Items Los elementos de acción para renderizar. El primer elemento se considera el elemento raíz.
PersonaSize Tamaño de la persona que aparecerá en la pantalla
OverflowButtonType Para elegir qué tipo de botón de desbordamiento aparecerá y si aparecerá o no
MaxDisplayablePersonas Número máximo de Persona para aparecer en Facepile
Cinco es el número predeterminado y recomendado
ImageShouldFadeIn Si la imagen debe tener un efecto de fundido de entrada mientras aparece
ShowAddButton Si el botón Agregar debe aparecer en el componente Facepile
OverflowButtonLabel Etiqueta Aria para botón de desbordamiento
AddbuttonAriaLabel Etiqueta Aria para el botón Agregar

Items Propiedades

Name Descripción
ItemPersonaName Nombre para mostrar de la persona
ItemPersonaKey La clave identifica el artículo específico
La clave debe ser única
ItemPersonaImage La columna de imagen de la tabla de Dataverse que contiene la imagen de la persona (imagen de perfil)
ItemPersonaImageInfo URL o contenido Base64 de la imagen de la persona (imagen de perfil)
ItemPersonaPresence Opcional - Para definir la Presencia de la persona
IsImage Si la imagen de persona (ItemPersonaImage) es una columna de imagen de la tabla de Dataverse.
Esta propiedad permite que el componente represente la imagen según el tipo (URL o imagen). Verdadero en caso de que la imagen deba remitirse desde la tabla de Dataverse y false, en caso de que sea una Url o Base64 para ser referida desde la propiedad ItemPersonaImageInfo
ItemPersonaClickable Si se puede hacer clic o no en la persona

Fórmula de Power Fx de ejemplo para Items (utiliza el conector de usuarios de Office 365)

Generar la colección Items con fotos usando el conector de usuarios de Office 365

Una lista de usuarios puede provenir de cualquier origen de datos, pero la imagen debe proporcionarse al componente. Si su origen de datos no tiene imágenes para los usuarios, puede usar la función AddColumns() de Power Fx para agregar los atributos correctos a la lista y recuperar la imagen del usuario de una lista de id. de usuario o nombres principales de usuario que se asignan a un usuario activo en su Microsoft Entra.

Genere una colección llamada UserPersonas usando el conector de usuarios de Office 365, haciendo referencia al código de ejemplo de abajo y luego pase la colección a la propiedad Items del control.

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

El campo IsImage se establece en false debido a ItemPersonaImageInfo procedente de una URL de imagen. Para representar campos de imagen de Dataverse, establezca el campo IsImage en true y use ItemPersonaImage para pasar el valor de la imagen en su lugar.

Uso

Propiedades de estilo

Property Descripción
Theme Acepta una cadena JSON que se genera usando Diseñador de temas de Fluent UI (windows.net). Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Para obtener ayuda sobre cómo configurarlo vea Tematización.
AccessibilityLabel aria-label para lectores de pantalla

Propiedades de evento

Property Descripción
InputEvent Evento para enviar al control. Por ejemplo, SetFocus.

Behavior

Soporta SetFocus como un InputEvent.

Configurar el comportamiento al seleccionar

Use la fórmula Cambiar() en la propiedad OnSelect del componente para configurar acciones específicas para cada elemento haciendo referencia al ItemPersonaKey seleccionado del control como el valor del interruptor.

Ejemplo la fórmula Power Fx en la propiedad OnSelect de 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");
  )

Limitaciones

Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.