Control Facepile (versión preliminar)

[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 vista previa.
  • Las funciones de vista previa no están diseñadas para uso en 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

Propiedad 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 aparición gradual mientras aparece
ShowAddButton Si el botón Agregar debe aparecer en el componente Facepile
OverflowButtonLabel Etiqueta ARIA para el botón overflow
AddbuttonAriaLabel Etiqueta Aria para el botón Agregar

Items Propiedades

Nombre Descripción
ItemPersonaName Nombre visible 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 falso si se trata de 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 que ItemPersonaImageInfo proviene 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

Propiedad 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

Propiedad Descripción
InputEvent Un evento para enviar al control. Por ejemplo, SetFocus.

Comportamiento

Soporta SetFocus como un InputEvent.

Configurar el comportamiento al seleccionar

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

Ejemplo de 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.

  • Last updated on