Tabla

La Tabla le permite crear una tabla utilizando otros controles como Texto, Decimal, Texto de salida.

Enlace de datos

Defina o modifique el enlace de datos para el control en la pestaña de propiedades Generales. El control Tabla está enlazado a una lista de objetos que rellena las filas.

Restricción: El objeto de negocio de enlace debe ser una lista de tipos complejos.

Propiedades de configuración

Establezca o modifique propiedades de configuración para Tabla en la pestaña de propiedades de Configuración.

Tamaño de pantalla: Una propiedad de configuración que tenga el icono Tamaños de pantalla además del nombre de propiedad, puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como su valor predeterminado. Si está utilizando el editor de escritorio de Process Designer (en desuso), está estableciendo el valor para el tamaño de pantalla grande. Los otros tamaños de pantalla heredan este valor.

Definiciones de temas: Las definiciones de temas especifican los colores y estilos de un control y determinan el aspecto del control. Puede obtener una vista previa del aspecto de los controles en el editor de temas. Consulte Temas.

Las propiedades de configuración de aspecto para Tabla se listan en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Tabla
Propiedad de configuración del aspecto	Descripción	Tipo de datos
Estilo de tabla	El estilo de la tabla.
Estilo de color	El estilo de color del control. Los colores corresponden a variables en el tema especificado.	`String`
Resaltar selección	Sombrea las filas seleccionadas. Esta opción no funciona si el estilo de color es 'ninguno'.	`Boolean`
Anchura	Especifica la anchura de la tabla. Puede especificar la anchura en `px` (píxeles), en `%` (porcentaje) o en unidades `em`. Por ejemplo, `50px`, `20%` o `0.4em`. Si no se especifica ningún tipo de unidad, se presupone que es `px`	`String`
Altura	Especifica la altura del control en `px` (píxeles) o en unidades `em`. Si no se especifica ningún tipo de unidad, se presupone que es `px` La altura no incluye la cabecera ni el pie. Si especifica una altura y las filas que se muestran exceden el espacio vertical disponible en el cuerpo de la tabla, el cuerpo pasa a ser desplazable verticalmente.	`String`
Ajustar cabeceras de columna	Ajusta las columnas de cabecera en función del espacio disponible en la tabla.
Mostrar elementos emergentes	Los controles y menús emergentes aparecen sobre la tabla cuando no se especifica la altura. Por ejemplo, si esta opción está seleccionada, aparece un control Selector de fecha y hora sobre la tabla. De lo contrario, el Selector de fecha y hora se incorpora en la celda de tabla.	`Boolean`

Las propiedades de configuración del comportamiento para Tabla se listan en la tabla siguiente:

Tabla 2. Propiedades de configuración de comportamiento para Tabla
Propiedad de configuración del comportamiento	Descripción	Tipo de datos
Modalidad de selección	Establecer cuántas filas puede seleccionar un usuario.	`String`
Mostrar botón Suprimir	Mostrar u ocultar el botón para suprimir una fila.	`Boolean`
Mostrar pie de página	Mostrar u ocultar el pie de página.	`Boolean`
Mostrar botón Añadir	Mostrar u ocultar el botón para añadir una fila. Si se está ordenando o filtrando la tabla, es posible que la fila recién añadida no se muestre como la última de la tabla, o que no se muestre en absoluto hasta que se quite la ordenación o el filtrado. Nota: También debe seleccionar la opción Mostrar pie de página.	`Boolean`
Mostrar estadísticas de tabla	Habilita la visualización de estadísticas de tabla en el pie de página. Por ejemplo, `Mostrando de 1 a 5 de 59 entradas`. Nota: También debe seleccionar la opción Mostrar pie de página.	`Boolean`
Mostrar paginador	Mostrar u ocultar el número de páginas. El paginador sólo muestra 5 páginas, por lo tanto, según el tamaño de página inicial y el número de registros, es posible que las páginas no sean consecutivas (1, 2, 3 ... ). Por ejemplo: La tabla tiene un total de 50 entradas y el tamaño de página inicial está establecido en 5. Los números de páginas que se muestran son 1, 3, 5, 7, 10. El usuario pulsa el botón Siguiente para pasar por las páginas en orden o utiliza los botones de número de página para desplazarse rápidamente por las páginas. Nota: También debe seleccionar la opción Mostrar pie de página.	`Boolean`
Mostrar medidor de página	Mostrar u ocultar el medidor de página, que muestra el número de filas en una página.	`Boolean`
Tamaño de página inicial	El número de filas que se visualizan en una página.	`Integer`

Las propiedades de configuración de la columna para Tabla se listan en la tabla siguiente.

Nota: Estas propiedades determinan cómo se representa la tabla en tiempo de ejecución.

Tabla 3. Propiedades de configuración de columnas para Tabla
Propiedad de configuración de columnas	Descripción	Tipo de datos
Representar como	Cómo se debe representar el contenido de célula: Vista de coach Vista de coach sin fisuras HTML simple Personalizado Los controles que están anidados en celdas de tabla como, por ejemplo, Entero y Recolector de fechas, normalmente tienen los bordes visibles. La tabla también tiene su propio borde. Para eliminar los bordes de los controles anidados, utilice la Vista de coach sin fisuras. Si está utilizando la Vista de coach o la Vista de coach sin fisuras, seleccione showLabel para mostrar la etiqueta de la vista de coach anidada.	`String`
Visibilidad	La visibilidad de las columnas.	`String`
Ordenable	Permitir que se puedan ordenar los datos de esta columna. De forma predeterminada, sólo se pueden ordenar las columnas que están enlazadas a tipos simples. Para ordenar un tipo complejo, debe establecer Representar como en Personalizado y utilizar un suceso En celda personalizada. Por ejemplo: `var div = document.createElement("div"); div.innerHTML = cell.row.data["firstName"]; cell.setSortValue(cell.row.data["firstName"]); return div;`	`Boolean`
Opciones	Opciones para dar formato a los datos en la columna, según el tipo de datos. Selector de fecha datePattern Por ejemplo, si el formato deseado es Lunes 08 Jun, 2015, introduzca: `"datePattern": "EEEE dd MMM, yyyy"` Decimal thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix Por ejemplo: `"decimalPlaces": 2,` `"decimalSeparator": ".",` `"thousandSeparator": ",",` `"prefix": "$"` Entero thousandSeparator Enlace href Estas opciones sólo funcionan si la columna se representa como HTML o Personalizada. Con la representación personalizada, dentro del suceso En celda personalizada, puede utilizar cell.getFormattedValue() para obtener un valor con el formato aplicado.	`String`
CSS	El estilo CSS a aplicar a la columna. Puede utilizar un estilo CSS (por ejemplo, Por ejemplo, `color:#00ff00` ) o clases CSS. Si hay dos puntos en este campo, el control de tabla presupone que ha especificado un estilo CSS. De lo contrario, presupone que ha especificado uno o más nombres de clase CSS.	`String`
Anchura	Ancho de columna en px, em, o %. Si no se especifica ninguna unidad, se presupone que es px. Nota: Considere la posibilidad de dejar un ancho de columna sin definir de forma que el navegador pueda calcular el espacio restante y asignarlo a la columna cuya anchura no se ha especificado.	`String`
Etiqueta	La etiqueta de la columna.	`String`
showLabel	Cuando la celda se representa como una vista de coach o una vista de coach sin fisuras, muestra u oculta la etiqueta de la vista de coach.	`Boolean`

Las propeidades de configuración de rendimiento para Tabla se listan en la tabla siguiente:

Tabla 4. Propiedades de configuración de rendimiento para Tabla
Propiedad de configuración del rendimiento	Descripción	Tipo de datos
Carga asíncrona	Proporciona una mejor experiencia de interfaz de usuario para conjuntos de datos grandes (en detrimento de un tiempo de carga de filas general más lento una vez que la sección empieza a cargarse).	`Boolean`
Tamaño de lote asíncrono	Define cuántas filas se cargan de forma síncrona en un lote asíncrono. Esto puede ayudar a ajustar/optimizar el rendimiento de carga síncrono vs. asíncrono.	`Integer`

Ejemplo

En este ejemplo se muestra cómo crear una tabla simple enlazada a una lista de objetos de negocio de tipo Perfiles. El objeto de negocio Perfiles tiene la estructura siguiente:

Un parámetro name de tipo serie.
Un parámetro favoriteSport de tipo serie.
Un parámetro favoritePlayer de tipo serie.

El objeto de negocio Perfiles tiene los siguientes valores predeterminados:

var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dylan";
autoObject[0].favoriteSport = "Tennis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Max";
autoObject[1].favoriteSport = "Soccer";
autoObject[1].favoritePlayer = "Messi";
autoObject

El servicio de usuario del lado del cliente tiene una variable privada profiles de tipo Profiles[].

El coach tiene un control Tabla con las propiedades siguientes:

General > Etiqueta es Perfiles - Coach Uno.
General > Enlace es profiles[].
Una columna Nombre con el enlace profiles.currentItem.name
Una columna Deporte favorito con el enlace profiles.currentItem.favoriteSport
Una columna Jugador favorito con el enlace profiles.currentItem.favoritePlayer
Configuración > Comportamiento
- El modo de selección es Único
- Mostrar botón Suprimir está seleccionado
- Mostrar pie de página está seleccionado
- Mostrar botón Añadir está seleccionado
- Mostrar estadísticas de tabla está seleccionado
Configuración > Columnas tiene tres entradas con los valores siguientes:
- RenderAs está establecido en Vista de coach
- La visibilidad está establecida en visible
- Ordenable está seleccionado

Consejo: Para crear la tabla rápidamente, arrastre la variable perfiles hasta el coach.

En el servicio de usuario del lado del cliente, cree una copia del coach y conéctela al primer coach. En el segundo coach, cambie la etiqueta de Tabla a Perfiles - Coach dos.

Este es el resultado que se obtiene cuando se ejecuta el coach:

En la imagen se muestra una tabla con 3 columnas

Pulse el botón Añadir e introduzca un texto en la nueva fila. Por ejemplo:

Al pulsar el botón Aceptar, se carga el segundo coach y puede ver que los datos que incluyen la nueva fila que ha creado se muestran en la tabla.

Sucesos

La Tabla de Establezca o modifique los manejadores de sucesos para el control en la pestaña Sucesos. Puede definir que los sucesos se desencadenen mediante programación o cuando el usuario interactúa con el control. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario. tiene los tipos siguientes de manejadores de sucesos:

Al cargar: Se activa cuando se carga la tabla. Por ejemplo:
```
me.setPageIndex(0);
```
En celda personalizada: Se activa cuando se carga una celda que tiene opciones de representación personalizadas (definidas en la configuración de Columnas). Para utilizar este suceso, debe establecer el valor de configuración Representar como en Personalizado en la configuración de Columnas. También puede utilizar este suceso para establecer cell.setSortValue(cell.value) para tipos complejos. Por ejemplo:
```
var div = document.createElement("div"); 
div.innerHTML = cell.row.data[cell.varName]; 
return div;
```
En filas cargadas: Se activa cuando se muestran las filas. Este suceso se aplica únicamente para tablas con páginas. Por ejemplo:
```
alert("All rows have " + (all ? "" : "NOT") + " been loaded");
```
En fila seleccionada por el usuario: Se activa cuando el usuario selecciona una fila. Por ejemplo:
```
alert("Selected row has index " + row.index);
```
En fila añadida por el usuario: Se activa cuando el usuario añade una fila con el botón Añadir fila. Si devuelve un objeto Javascript. se añade el objeto en forma de una nueva fila, de lo contrario, se añade un objeto vacío. Por ejemplo:
```
alert("Selected row has index " + row.index);
```
Al suprimir fila: Se activa cuando el usuario solicita suprimir un registro. Si el suceso devuelve false, no se suprime el registro. Este suceso puede utilizarse para requerir la confirmación del usuario antes de que suprimir oficialmente el registro. Por ejemplo:
```
return confirm("¿Está seguro de que desea suprimir el siguiente elemento?: " + item.str1);
```

Métodos

Para obtener información detallada sobre los métodos disponibles para Tabla, consulte la API JavaScript Tabla.

Recursos adicionales

Para obtener información sobre cómo crear un coach, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidad y Atributos HTML), consulte Propiedades de vista de coach.