Control DetailsList

Un control utilizado para mostrar un conjunto de datos.

Descripción

Una lista de detalles (DetailsList) es una forma robusta de mostrar una colección rica en información de elementos y permitir que las personas ordenen, agrupen y filtren el contenido. Use una DetailsList cuando la densidad de información es crítica.

El componente de código DetailsList permite el uso del componente DetailsList de Fluent UI desde dentro de aplicaciones de lienzo y páginas personalizadas.

• Puede estar vinculado a un conjunto de datos de Dataverse o a una colección local.
• Admite columnas configurables separadas de los metadatos de columna proporcionados por la fuente conjunto de datos para mayor flexibilidad.
• Tipos de celdas para enlaces, íconos, expandir/contraer y celdas de subtexto.
• Compatibilidad con paginación.
• Permite ordenar usando la clasificación de Dataverse o propiedades SortBy configurables.

Propiedades

Propiedades importantes

Propiedades Items

Estos atributos deben estar disponibles en origen de datos para habilitar la funcionalidad relacionada. Se puede usar la fórmula Power Fx AddColumns() para anexar estos valores al origen de datos inicial.

Propiedades Columns

Property	Descripción
ColDisplayName	(Obligatorio): proporciona el nombre de la columna que se mostrará en el encabezado.
ColName	(Obligatorio): proporciona el nombre de campo real de la columna en la colección de elementos.
ColWidth	(Obligatorio): proporciona el ancho fijo absoluto de la columna en píxeles.
ColCellType	El tipo de celda que se representará. Valores posibles: expand, tag, indicatortag, image, clickableimage, link. Para obtener más información, vea las secciones siguientes.
ColHorizontalAlign	La alineación del contenido de la celda si ColCellType es de tipo image o clickableimage.
ColVerticalAlign	La alineación del contenido de la celda si ColCellType es de tipo image o clickableimage.
ColMultiLine	True cuando el texto de las celdas debe ajustarse si es demasiado largo para ajustarse al ancho disponible.
ColResizable	True cuando el ancho del encabezado de la columna debe ser redimensionable.
ColSortable	Verdadero cuando la columna debe poder ordenarse. Si el conjunto de datos admite la clasificación automática a través de una conexión de Dataverse, los datos se ordenarán automáticamente. De lo contrario, las salidas de SortEventColumn y SortEventDirection se establecerán y se deben usar en la expresión de enlace de Power FX de los registros.
ColSortBy	El nombre de la columna para proporcionar al evento OnChange cuando se ordena la columna. Por ejemplo, si está ordenando columnas de fecha, lo más recomendable es ordenar según el valor de fecha real, y no según el texto con formato que aparece en la columna.
ColIsBold	Verdadero cuando los datos de la celda de datos deben estar en negrita
ColTagColorColumn	Si el tipo de celda es etiqueta, establezca el color de fondo hexadecimal de la etiqueta de texto. Puede estar establecido en transparent. Si el tipo de celda no es una etiqueta, ponga un color hexadecimal y úselo como una celda de etiqueta de círculo indicador. Si el valor de texto está vacío, la etiqueta no aparecerá.
ColTagBorderColorColumn	Establézcalo en un color hexadecimal para usarlo como color de borde de una etiqueta de texto. Puede estar establecido en transparent.
ColHeaderPaddingLeft	Agrega relleno al texto del encabezado de la columna (píxeles)
ColShowAsSubTextOf	Establecer esto en el nombre de otra columna moverá la columna para que sea un elemento secundario de esa columna. Consulte a continuación en las columnas de subtexto.
ColPaddingLeft	Agrega relleno a la izquierda de la celda secundaria (píxeles)
ColPaddingTop	Agrega relleno a la parte superior de la celda secundaria (píxeles)
ColLabelAbove	Mueve la etiqueta por encima del valor de la celda secundaria si aparece como una columna de subtexto.
ColMultiValueDelimiter	Une valores de matriz de valores múltiples junto con este delimitador. Consulte a continuación en las columnas de valores múltiples.
ColFirstMultiValueBold	Cuando se muestra un valor de matriz de varios valores, el primer elemento se muestra en negrita.
ColInlineLabel	Si se establece en un valor de cadena, se usa para mostrar una etiqueta dentro del valor de la celda que podría ser diferente al nombre de la columna. por ejemplo
ColHideWhenBlank	Cuando es verdadero, la etiqueta y el relleno en línea de cualquier celda se ocultarán si el valor de la celda está en blanco.
ColSubTextRow	Al mostrar varias celdas en una celda de subtexto, establezca el índice de fila. Cero indica la fila de contenido de la celda principal.
ColAriaTextColumn	La columna que contiene la descripción de ARIA para las celdas (por ejemplo, celdas de iconos).
ColCellActionDisabledColumn	La columna que contiene una etiqueta booleana para controlar si una acción de celda (como las celdas de icono) está deshabilitada.
ColImageWidth	Tamaño del icono o imagen en píxeles.
ColImagePadding	El relleno alrededor de una celda de icono/imagen.
ColRowHeader	Define una columna para que se represente de un modo más grande que las otras celdas (14 px en lugar de 12 px). Normalmente, solo habría un solo encabezado de fila por conjunto de columnas.

Propiedades de estilo

Propiedades de evento

Uso básico

Para determinar qué columnas aparecen en DetailsList, configure las siguientes propiedades del DetailsList:

1. Campos. Agregue los campos que desee seleccionando la opción Editar en el menú de control flotante de la derecha (emplea la misma interfaz para modificar tarjetas de datos predefinidas).

2. Columnas. Suministre una asignación específica entre columnas y campos en la propiedad Columns.

Ejemplo:

Asignación a la tabla del sistema Cuentas de Dataverse, con la siguiente fórmula:

Table(
    {
        ColName: "name",
        ColDisplayName: "Name",
        ColWidth: 200,
        ColSortable: true,
        ColIsBold: true,
        ColResizable: true
    },{
        ColName: "address1_city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "address1_country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "telephone1",
        ColDisplayName: "Telephone",
        ColWidth: 100,
        ColSortable: true,
        ColResizable: true
    },{
        ColName: "primarycontactid",
        ColDisplayName: "Primary Contact",
        ColWidth: 200,
        ColSortable: true,
        ColSortBy: "_primarycontactid_value",
        ColResizable: true,
        ColCellType: "link"
    }
)

Columnas de subtexto

La propiedad de columna ColShowAsSubTextOf define una columna que se muestra debajo del valor en otra columna. Esto se puede usar para mostrar información secundaria y contenido expandible (ver más abajo).

Si tuviera una colección definida como:

ClearCollect(colAccounts,
{id:"1",name:"Contoso",city:"Redmond",country:"U.S.",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",expand:false},
{id:"2",name:"Litware, Inc",city:"Dallas",country:"U.S.",description:"Donec vel pellentesque turpis.",expand:false});

Podría definir las columnas para que sean:

Table(
    {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: Self.Width-100,
        ColIsBold:true
    },
    {
        ColName: "city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "description",
        ColDisplayName: "",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:false,
        ColSubTextRow: 2
    }
)

El resultado será una tabla que tiene el siguiente aspecto:

Tipos de celda

La propiedad de columna ColCellType acepta los siguientes valores: expand, tag, image, indicatortag, clickableimage, link

Expandir/Contraer

Si las filas de 'subtexto' requieren un icono expandir/contraer, se puede agregar una columna adicional al conjunto de datos de la columna, y la definición de columna de ColCellType también se puede poner en expand.

{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}

Suponiendo que una propiedad RecordKey se establece en la columna index, el evento OnChange podría contener lo siguiente para expandir/contraer las filas:

If(Self.EventName="CellAction" && Self.EventColumn="expand",
    With(LookUp(colExpand,index=Self.EventRowKey) As Row,
        Patch(colExpand,Row,{expand:!Row.expand})
        )
);

Esto busca la fila en la que se ha invocado la Acción de celda al usar el índice (si no se establece RecordKey, entonces EventRowKey contendrá el número de fila) y luego cambia el valor de expansión.

Se proporcionará el siguiente resultado:

Etiqueta y etiqueta indicadora

Al usar un tipo de celda tag o indicatortag, puede crear etiquetas de colores insertadas para mostrar el contenido de la celda.

• tag: así se muestra un cuadro de etiqueta con un fondo y un borde de color
• tagindicator: muestra un cuadro de etiqueta con un indicador de círculo de color

Los colores pueden variar por fila, por lo que el conjunto de metadatos de la columna solo proporciona el nombre de las columnas que contienen los colores de las etiquetas.

Tenga en cuenta el siguiente conjunto de datos:

ClearCollect(
    colAccounts,
    {
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        TagColor: "rgb(0, 183, 195)",
        TagBorderColor: "rgb(0,137,147)"
    },
    {
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        TagColor: "rgb(255, 140, 0)",
        TagBorderColor: "rgb(194,107,0)"
    }
);

Luego, puede agregar los metadatos de la columna para agregar dos columnas, una que se muestra como una etiqueta y la otra como un indicador de etiqueta, cada una de las cuales usa las columnas TagColor y TagBorderColor para determinar los colores:

{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"tag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
},
{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"indicatortag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
}

Se proporcionará el siguiente resultado:

Imagen e imagen en la que se puede hacer clic

Usando un tipo de celda image o clickableimage, puede configurar imágenes en línea que, opcionalmente, se pueden seleccionar para aumentar la acción OnChange.

El contenido de la imagen se puede definir prefijando con:

• https: Un vínculo a una imagen externa. Por ejemplo, https://via.placeholder.com/100x70.
• icon: Usando uno de los iconos de Fluent UI; por ejemplo, icon:SkypeCircleCheck
• data: Usando datos de imagen svg insertada; por ejemplo, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020....

Si la imagen es de tipo clickableimage, el evento OnChange se activará cuando se seleccione el icono, con un EvenName de CellAction, EventColumn proporcionando el nombre de la columna de la imagen y EventRowKey siendo el RecordKey de la fila (si no se establece RecordKey, EventRowKey contendrá el número de fila).

por ejemplo, considere los datos de fila:

{
        id: "1",
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        ImageColor: "rgb(0, 183, 195)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    },
    {
        id: "2",
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        ImageColor: "rgb(255, 140, 0)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    }

y los metadatos de columna:

 {
        ColName: "externalimage",
        ColDisplayName: "Image",
        ColCellType:"image",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
},
{
        ColName: "iconimage",
        ColDisplayName: "Clickable Image",
        ColCellType:"clickableimage",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
}

Esto daría el resultado:

Para la columna clickableimage, el evento OnChange puede ahora gestionar el momento en el que un usuario selecciona (ratón o teclado) un icono (suponiendo que no esté deshabilitado) usando lo siguiente:

If(Self.EventName="CellAction",
	Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)

EventRowKey se completará con el valor de la columna definido como la propiedad RecordKey.

Vínculos

Las columnas se pueden representar como enlaces, que generarán el evento OnChange cuando se seleccione el enlace de manera similar a cómo funcionan las imágenes en las que se puede hacer clic descritas anteriormente.

Los metadatos de la columna para un enlace se configuran de la siguiente manera:

  {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: 150,
        ColIsBold:true,
        ColCellType: "link"
    }

Esto dará como resultado que el contenido de la celda se represente como:

El evento OnChange se dispara nuevamente cuando se hace clic en el enlace, con EventColumn siendo el nombre de la columna que contiene el enlace, y EventRowKey con el valor de la columna definido como la propiedad RecordKey.

Columnas de valores múltiples

Si un valor de columna puede tener múltiples valores configurándolo en una Tabla/Colección. Esto luego representará los valores como valores de celdas múltiples. por ejemplo:

 {
        id: "1",
        name: "Contoso",
        tags:["#PowerApps","#PowerPlatform"]
    },

Los metadatos de la columna podrían ser:

 {
        ColName: "tags",
        ColDisplayName: "Tags",
        ColWidth: 250,
        ColFirstMultiValueBold :true,
        ColMultiValueDelimiter:" "
    }

Esto daría como resultado la tabla que muestra:

Behavior

Ordenar eventos

Una columna se define como ordenable estableciendo la propiedad ColSortable en verdadera. Si la columna muestra un valor de texto diferente al orden de clasificación requerido (por ejemplo, una fecha con formato o una columna de estado), se puede especificar una columna de clasificación diferente usando la propiedad ColSortBy.

La clasificación se maneja de dos maneras:

1. De forma automática, al conectarse a un origen de datos de Dataverse.
2. Manualmente al usar colecciones.

Clasificación automática

Cuando el conjunto de datos de elementos es un conjunto de datos nativo de Dataverse, se ordenará automáticamente si una columna está marcada como ordenable. Si se hacen cambios en la forma de una colección de Dataverse usando AddColumn, o al almacenar los datos en una colección, la clasificación automática ya no funcionará y se deberá implementar la clasificación manual.

Ordenación manual

La clasificación manual se admite fuera del componente para permitir la compatibilidad con conectores personalizados y la clasificación de colecciones locales cuando no exista una conexión de Dataverse. Las columnas se pueden definir como ordenables o no. Cuando se selecciona el tipo de columna, aparece un evento OnChange proporcionando la columna y la dirección. Luego, la aplicación debe usar estos valores para cambiar la colección enlazada a la tabla para actualizar con los registros ordenados.

1. En la colección Columnas, agregue una columna booleana ordenable

2. Agregue el nombre de la columna ordenable a la propiedad Columns.ColSortable

3. Dentro del evento OnChange de la tabla, agregue el código:

   If(Self.EventName="Sort", 
   UpdateContext({
                   ctxSortCol:Self.SortEventColumn,
                   ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
    })
   );
   

4. Establezca la propiedad Sort Column en ctxSortCol

5. Establezca la propiedad Sort Direction en:

   If(ctxSortAsc,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
       'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending) 
   

6. Configure la colección de elementos de entrada para ordenar usando las variables de contexto establecidas anteriormente:

   SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
   

Cuando se activa el evento OnChange después de que el usuario seleccione el encabezado de la columna para cambiar el orden, las variables de contexto de clasificación se actualizan utilizando la nueva información de clasificación proporcionada, lo que hace que el conjunto de datos de entrada se vuelva a ordenar y que la tabla se actualice en consecuencia.

Paging

La paginación es manejada internamente por el componente, sin embargo, los botones para avanzar/retroceder deben ser creados por la aplicación de alojamiento y los eventos enviados al componente.

Las siguientes propiedades se utilizan para controlar la paginación:

• PageSize: define cuántos registros se deben cargar por página.
• PageNumber: devuelve la página mostrada actualmente.
• HasNextPage: devuelve verdadero si hay una página siguiente.
• HasPreviousPage: devuelve verdadero si hay una página anterior.
• TotalRecords: devuelve el número total de registros disponibles.

Los botones de paginación se pueden definir de la siguiente manera:

• Cargar primera página
  • OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Cargar página anterior
  • OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
  • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
• Cargar página siguiente
  • OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
  • DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

La etiqueta del número de registros se puede establecer en una expresión similar a:

grid.TotalRecords & " record(s)  " & Text(CountRows(grid.SelectedItems)+0) & " selected" 

Mostrar la parte superior de la página siguiente

Esto se implementa mediante el evento 'SetFocusOnRow'. Si tuviera la propiedad InputEvent vinculada a ctxGridEvent, en la propiedad OnSelect del botón de la página siguiente, usaría: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Eventos de entrada

La propiedad InputEvent puede establecerse con uno o más de los siguientes:

• SetFocus: establece el foco en la primera fila de la cuadrícula.
• ClearSelection: borra cualquier selección y vuelve a la selección predeterminada.
• SetSelection: establece la selección definida por la columna RowSelected.
• LoadNextPage: carga la página siguiente, si existe
• LoadPreviousPage: carga la página anterior, si existe
• LoadFirstPage: carga la primera página.

Para garantizar que el evento de entrada se recoja, debe ser suficiente con un valor aleatorio. Por ejemplo, SetSelection" & Text(Rand()).

Consulte más adelante para obtener más información.

Elementos seleccionados y acciones de fila

El componente soporta los modos de selección Único, Múltiple o Ninguna.

Al seleccionar elementos, las propiedades SelectedItems y Selected se actualizan.

• SelectedItems: si la tabla está en modo de selección múltiple, esta contendrá uno o más registros de la colección de elementos.
• Selected: si la tabla está en modo de selección único, esta contendrá los registros seleccionados.

Cuando un usuario invoca la acción de la fila, ya sea haciendo doble clic o presionando Intro o una fila seleccionada, el evento OnSelect se dispara. La propiedad Selected contendrá una referencia al registro que se ha invocado. Este evento se puede utilizar para mostrar un registro detallado o navegar a otra pantalla.

Si la propiedad RaiseOnRowSelectionChangeEvent está habilitada, cuando se cambian las filas seleccionadas, el evento OnChange se genera con el EventName configurado como OnRowSelectionChange. Si la aplicación necesita responder a una selección de una sola fila en lugar de a un doble clic en la fila, OnChange puede detectarlo usando un código similar a este:

If(
    Self.EventName = "OnRowSelectionChange",
        If(!IsBlank(Self.EventRowKey),
        	// Row Selected
        )
);

Borrar los elementos seleccionados actualmente

Para borrar los registros seleccionados, debe configurar la propiedad InputEvent en una cadena que comienza con

por ejemplo

UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})

La variable de contexto ctxTableEvent entonces se puede vincular a la propiedad InputEvent.

Establecer la selección de filas

Si hay un escenario en el que un conjunto específico de registros debe seleccionarse mediante programación, la propiedad InputEvent se puede establecer en SetSelection o SetFocusOnRowSetSelection, además de configurar la propiedad RecordSelected en el registro.

por ejemplo, si tiene el siguiente conjunto de datos:

{RecordKey:1, RecordSelected:true, name:"Row1"}

Para seleccionar la primera fila, puede configurar InputEvent como "SetFocusOnRowSetSelection"&Text(Rand()) o "SetSelection"&Text(Rand())

Configure el comportamiento "Al cambiar"

Agregue y modifique la siguiente fórmula en la propiedad OnChange del componente para configurar acciones específicas basadas en el EventName proporcionado por el componente:

• Desencadena eventos cuando un usuario cambia la fila seleccionada: habilite la propiedad Generar evento OnRowSelectionChange en el componente.
• Configure el comportamiento de los enlaces: agregue columnas con el valor ColCellType establecido en enlace.

/* Runs when selected row changes and control property 'Raise OnRowSelection event' is true */
If( Self.EventName = "OnRowSelectionChange",
    Notify( "Row Select " & Self.EventRowKey )
);

/* Runs when a user selects a column with ColCellType set to 'link' */
If( Self.EventName = "CellAction",
    Notify( "Open Link " &  Self.EventColumn & " " & Self.EventRowKey )
)

Limitaciones

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