DetailsList control

Artículo
10/16/2024

Un control utilizado para mostrar un conjunto de datos.

Nota

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

Control de DetailsList.

Description

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 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.
Soporte para ordenación usando la clasificación de Dataverse o propiedades SortBy configurables

Propiedades

Propiedades importantes

Property	Descripción
`Items`	El conjunto de datos que contiene las filas para representar. También se muestra como `Records`. Consulte la tabla de propiedades de elementos a continuación.
`Columns`	El conjunto de datos que contiene metadatos de opciones para las columnas. Si se proporciona este conjunto de datos, reemplazará completamente las columnas proporcionadas en los Registros conjunto de datos. Consulte la tabla de propiedades de columnas a continuación.
`SelectionType`	Tipo de selección (Ninguno, Único, Múltiple)
`PageSize`	Define cuántos registros cargar por página.
`PageNumber`	Muestra la página actual que se muestra.
`HasNextPage`	Devuelve verdadero si hay una página siguiente.
`HasPreviousPage`	Devuelve verdadero si hay una página anterior.
`TotalRecords`	Proporciona el número total de registros disponibles.
`CurrentSortColumn`	El nombre de la columna para mostrar como se usa actualmente para ordenar
`CurrentSortDirection`	La dirección de la columna de ordenación actual que se usa

`Items` propiedades

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

Property	Descripción
`RecordKey`	(opcional) - El nombre de la columna de clave única. Debe suministrarlo si desea que la selección se conserve cuando se actualicen los registros y cuando desee que `EventRowKey` contenga la identificación en lugar del índice de la fila después de que el evento `OnChange` se active.
`RecordCanSelect`	(opcional) - El nombre de la columna que contiene un valor `boolean` que define si se puede seleccionar una fila.
`RecordSelected`	(opcional) - El nombre de la columna que contiene un valor `boolean` que define si una fila se selecciona de forma predeterminada y al configurar el `InputEvent` para contener `SetSelection`. Consulte la sección sobre `Set Selection` siguiente.

`Columns` propiedades

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

Property	Descripción
`Theme`	El tema JSON de Fluent UI que se genera y exporta desde Diseñador de temas de Fluent UI. Para obtener ayuda sobre cómo configurarlo vea Tematización.
`Compact`	Verdadero cuando se debe usar el estilo compacto
`AlternateRowColor`	El valor hexadecimal del color de la fila que se utilizará en filas alternativas.
`SelectionAlwaysVisible`	¿Deberían los botones de opción de selección estar siempre visibles en lugar de solo al pasar el mouse sobre la fila?
`AccessibilityLabel`	La etiqueta para agregar a la tabla aria descripción

Propiedades de evento

Property	Descripción
`RaiseOnRowSelectionChangeEvent`	Cuando se selecciona o deselecciona una fila, se genera el evento `OnChange`. (consulte a continuación)
`InputEvent`	Uno o más eventos de entrada (que se pueden combinar mediante la concatenación de cadenas). Valores posibles: `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. Debe ir seguido de un elemento de cadena aleatorio para garantizar que se active el evento. Los eventos se pueden combinar; por ejemplo, `SetFocusClearSelection` borrará y establecerá el foco al mismo tiempo. `SetFocusOnRowSetSelection` Establecerá el foco en una fila y establecerá la selección al mismo tiempo.
`EventName`	Evento de salida cuando se desencadena `OnChange`. Valores posibles: `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	Nombre del campo de la columna Evento de salida utilizado cuando se llama a `CellAction`
`EventRowKey`	Columna de evento de salida que contiene el índice de la fila en la que se invocó el evento o la clave de fila si se establece la propiedad `RecordKey`.
`SortEventColumn`	El nombre de la columna que activó la el evento `OnChange` de ordenación
`SortEventDirection`	La dirección de la ordenación que activó la el evento `OnChange` de ordenación

Uso básico

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

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).
Columnas. Suministre una asignación específica entre columnas y campos en la propiedad Columns.

Ejemplo:

Asignación a la tabla del sistema de las 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 - Esto mostrará 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 vincular a una imagen externa. Por ejemplo, https://via.placeholder.com/100x70.
icon: Usando uno de los Iconos de interfaz de usuario fluidos Por ejemplo, icon:SkypeCircleCheck
data: Uso de datos de imagen svg en línea: 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:

Automáticamente cuando se conecta a un origen de datos de Dataverse.
Manualmente al usar colecciones.

Clasificación automática

Cuando el conjunto de datos de artículos es un conjunto de datos nativo de Dataverse, se ordenará automáticamente si una columna está marcada como ordenable. Si se realizan 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 debe 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 está conectado a 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.

En la colección Columnas, agregue una columna booleana ordenable
Agregue el nombre de la columna ordenable a la propiedad Columns.ColSortable

Dentro del evento OnChange de la rabla, agregue el código:

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

Establezca la propiedad Sort Column en ctxSortCol

Establezca la propiedad Sort Direction en:

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

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 cargar por página.
PageNumber - Muestra la página actual mostrada.
HasNextPage - Muestra verdadero si hay una página siguiente.
HasPreviousPage - Muestra verdadero si hay una página anterior.
TotalRecords - Muestra el número total de registros disponibles.

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

Cargar la 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 cuadrícula
ClearSelection - Borra cualquier selección y vuelve a la selección predeterminada.
SetSelection - Establece la selección según lo definido por el RowSelected columna.
LoadNextPage - Carga la siguiente página si hay una
LoadPreviousPage - Carga la página anterior si hay una
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, contendrá uno o más registros de la colección Elementos.
Selected - Si la tabla está en modo de selección única, 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.

Compartir a través de

DetailsList control

Description

Propiedades

Propiedades importantes

`Items` propiedades

`Columns` propiedades

Propiedades de estilo

Propiedades de evento

Uso básico

Columnas de subtexto

Tipos de celda

Expandir/Contraer

Etiqueta y etiqueta indicadora

Imagen e imagen en la que se puede hacer clic

Vínculos

Columnas de valores múltiples

Behavior

Ordenar eventos

Clasificación automática

Ordenación manual

Paging

Mostrar la parte superior de la página siguiente

Eventos de entrada

Elementos seleccionados y acciones de fila

Borrar los elementos seleccionados actualmente

Establecer la selección de filas

Configure el comportamiento "Al cambiar"

Limitaciones

Comentarios

Recursos adicionales

Compartir a través de

DetailsList control

Description

Propiedades

Propiedades importantes

Items propiedades

Columns propiedades

Propiedades de estilo

Propiedades de evento

Uso básico

Columnas de subtexto

Tipos de celda

Expandir/Contraer

Etiqueta y etiqueta indicadora

Imagen e imagen en la que se puede hacer clic

Vínculos

Columnas de valores múltiples

Behavior

Ordenar eventos

Clasificación automática

Ordenación manual

Paging

Mostrar la parte superior de la página siguiente

Eventos de entrada

Elementos seleccionados y acciones de fila

Borrar los elementos seleccionados actualmente

Establecer la selección de filas

Configure el comportamiento "Al cambiar"

Limitaciones

Comentarios

Recursos adicionales

`Items` propiedades

`Columns` propiedades