Tabla de datos

<< Clic para mostrar Tabla de Contenidos >>

Navegación:  Automatización de Procesos con poco código > Studio Cloud -ambiente de autoría > Bizagi Apps > App Designer > Editor del App Designer > Controles > Colecciones >

Tabla de datos

Introducción

En el editor del App Designer, el control de Tabla de datos le permite representar la información contenida en formas de colección mediante una tabla, organizando la información de manera ordenada y atractiva.

 

Agregar el control a su página

Para agregar el control de Tabla de datos a la página de su app, abra el menú de Controles (ubicado en la esquina superior izquierda de la pantalla) haciendo clic en él. Luego, busque el control de Colecciones y haga clic en el icono de flecha para abrir una lista desplegable que le permita visualizar las diferentes opciones en forma de colecciones. Desplácese hacia abajo hasta encontrar el control de Tabla de datos y arrástrelo a su página.

 

DataTableControl01

 

Una vez haya hecho esto, el control aparece en su página de la siguiente manera:

 

DataTableControl02

 

Administrar el contenido del control

Con el control ya agregado en la página de su app, puede administrar el contenido que se mostrará en él. Para hacer esto, desplace el cursor sobre el control para mostrar las opciones de configuración. Seleccione la opción Administrar Contenido para agregar datos al control.

 

DataTableControl03

 

Existen dos tipos de contenido cuando se agregan datos a un control de Colecciones: contenido estático (contenido fijo que no cambia con el tiempo) y contenido dinámico (contenido que proviene de una extracción de datos de Vistas, Mis Cosas o Casos de Personas).

 

Contenido estático

Al agregar Contenido estático (es decir, al hacer clic en la pestaña Estático en la ventana Administrar Contenido que aparece), observe que puede configurar el nombre, las filas y las columnas de la tabla.

 

Primero, para cambiar el nombre de la tabla, escriba el nuevo nombre en el cuadro de texto debajo de la etiqueta Nombre de la tabla.

 

DataTableControl04

 

Columnas

En el contenedor desplegable de Columnas, puede añadir una columna a la tabla o modificar el tipo de valor para las columnas existentes.

 

DataTableControl05

 

Agregar una columna

Para añadir una nueva columna, haga clic en la etiqueta Agregar nueva columna ubicada en la esquina superior derecha del contenedor desplegable de Columnas. Escriba un nombre para la columna y determine su tipo de valor, seleccionando entre Texto o Imagen. Luego, haga clic en el botón Aplicar y cerrar.

 

DataTableControl06

 

note_pin

Tenga en cuenta que al configurar el control de Tabla de datos con contenido estático, cualquier valor que necesite agregar de otros tipos de datos como Número, Moneda y Fecha será tratado como Texto.

 

Modificar una columna

Para modificar una columna, comience seleccionándola de la lista bajo la etiqueta Columnas. Tiene la opción de cambiar el nombre de la columna o su tipo de valor.

 

Para cambiar el nombre de la columna, escriba el nuevo nombre en el cuadro de texto proporcionado debajo de la etiqueta Nombre de la columna. De manera similar, para cambiar el tipo de valor de la columna, haga clic en la lista desplegable bajo la etiqueta Tipo y elija entre Texto o Imagen. Haga clic en el botón Aplicar y cerrar para guardar los cambios.

 

Filas

En el contenedor desplegable de Filas, puede añadir una fila a la tabla o establecer el valor para cada celda de la fila.

 

DataTableControl07

 

Agregar una fila

Para agregar una nueva fila, haga clic en la etiqueta Agregar nueva fila ubicada en la esquina superior derecha del contenedor desplegable de Filas. Luego, haga clic en el botón Aplicar y cerrar.

 

DataTableControl08

 

Establecer el valor de una celda

Para establecer el valor de una celda, primero seleccione la fila que contiene la celda deseada de la lista bajo la etiqueta Filas. Puede modificar varios aspectos de cada celda:

Valor: Esto se refiere al contenido de la celda, que depende del tipo de valor elegido para la columna.

Enlace: Determine el tipo de enlace asociado con la celda. Elija entre un Enlace externo, que dirige a un sitio web fuera de su app (por ejemplo, google.com), o un Enlace interno, que redirige a una página dentro de su app (por ejemplo, Página de inicio).

URL/Página: Si selecciona la opción de Enlace externo, aparece un cuadro de texto etiquetado como URL, que le permite ingresar el URL de destino. Para la opción de Enlace interno, aparece una lista desplegable que muestra todas las páginas disponibles dentro de su app, de las cuales puede seleccionar el destino deseado.

Abrir en una nueva pestaña: Si está seleccionada, esta casilla de verificación permite abrir el sitio web o la página vinculada en una nueva pestaña del navegador.

 

DataTableControl09

 

Contenido dinámico

Como se mencionó anteriormente, puede agregar contenido que provenga de una extracción de datos de Vistas, Mis Cosas o Casos de Personas a cualquier control de Colecciones. Para configurar contenido dinámico, siga los pasos del Asistente de conexión (detallados en contenido dinámico). Una vez haya terminado de configurar los datos, observe que el control muestra etiquetas que indican el mapeo de datos, así como la fuente de datos (en este caso, una Vista denominada VistaLibrosPrestados) en la esquina inferior derecha. Estas etiquetas indican que el control se ha configurado con datos dinámicos.

 

En el siguiente ejemplo, puede ver cómo se ve el control de Tabla de datos al agregar contenido dinámico.

 

DataTableControl10

 

Agregar registros

Cuando configura la fuente de datos de su control de Tabla de datos como Mis cosas, aparece un botón + en el control, que le permite agregar nuevos registros a él. Es importante tener en cuenta que esta funcionalidad solo funciona en su app publicada; no puede agregar nuevos registros desde el editor del App Designer.

 

DataTableControl11

Ordenar registros

Puede ordenar los registros mostrados en su control de Tabla de datos, ya sea en orden ascendente o descendente. Sin embargo, a diferencia de otros controles de Colecciones donde puede configurar el ordenamiento desde el editor del App Designer utilizando la funcionalidad Ordenar por, el ordenamiento del contenido de un control de Tabla de datos se realiza desde su app publicada. Para hacerlo, tenga en cuenta lo siguiente:

 

Desde su app publicada, junto al título de cada columna del control de Tabla de datos, verá dos flechas: una apuntando hacia arriba y la otra hacia abajo.

Para ordenar el contenido de la columna en orden ascendente, haga clic en la flecha que apunta hacia arriba. De manera inversa, para ordenar el contenido de la columna en orden descendente, haga clic en la flecha que apunta hacia abajo.

 

Observe que el ordenamiento que aplique a una columna ordenará consistentemente el contenido de las otras columnas en consecuencia.

DataTableControl12

El control de Tabla de datos permite ordenar según los siguientes tipos de valores:

Número: El ordenamiento en orden ascendente organiza desde los valores más bajos hasta los más altos, mientras que en orden descendente se ordena desde los valores más altos hasta los más bajos.

Fecha: Ordenada en orden ascendente desde la más antigua hasta la más reciente y en orden descendente desde la más reciente hasta la más antigua.

Moneda: Sigue las mismas reglas de orden ascendente y descendente que los números.

Texto: Ordenado alfabéticamente en orden ascendente de izquierda a derecha, y en orden descendente, se ordena en orden alfabético inverso.

 

note_pin

Al manejar Texto que contiene números, caracteres especiales y letras, el ordenamiento prioriza los caracteres numéricos, seguidos de los caracteres especiales, y finalmente los caracteres alfabéticos.

 

El ordanemiento de registros también está disponible para un control de Tabla de datos con contenido estático. Dicho esto, tenga en cuenta estas reglas de ordenamiento, ya que el contenido estático solo puede ser ordenado por Texto.

 

Acciones Comunes

El control de la Tabla de datos permite la selección de registros tanto individuales como múltiples, mostrando las Acciones comunes debajo del título para que usted las ejecute. Puede seleccionar varios registros utilizando las casillas de verificación junto a cada registro.

 

DataTableControl15

 

Las Acciones comunes se muestran si están disponibles para los registros seleccionados. Si no hay Acciones disponibles, se muestra un mensaje indicando que no hay acciones para ejecutar. Aun así, puede ejecutar Acciones individuales desde el menú sin afectar la selección de múltiples registros.

 

Después de ejecutar una Acción, una notificación emergente indica si la ejecución fue exitosa, con error parcial o con error total para los registros seleccionados. Si ocurren errores, aparece un mensaje adicional con un botón de Ver Informe, que le permite ver informes detallados de errores.

 

DataTableControl19

 

DataTableControl16

 

DataTableControl18

 

note_pin

Recuerde que cuando se aplica una Acción común en múltiples registros, la acción se aplicará individualmente a cada registro. (i.e. si se tiene 5 registros seleccionados, se aplicará la acción 1 vez por registro)

 

Ver Informe

Esta sección muestra cada registro en el que se ha ejecutado una Acción. Para los registros fallidos, al hacer clic en el icono de información se muestran los detalles del error.

 

DataTableControl17

 

Dentro del informe, al hacer clic en el icono de información junto a un registro se muestran los detalles del error en la sección Detalle.

 

DataTableControl20

 

Definir la apariencia del control

También puede cambiar la apariencia y el diseño del control ajustando su configuración.

 

Ajustar las configuraciones del control

Para ajustar la configuración del control, desplace el cursor sobre el control para mostrar las opciones de configuración y seleccione la opción Configuración.

 

note_pin

Sea consciente del botón Reiniciar al fondo del panel de diseño, ya que este botón le permite restaurar los ajustes por defecto del control.

 

En concreto, puede modificar tres configuraciones de control:

1.Estilo: en esta configuración puede definir las siguientes opciones.

Alinear: alinee el texto al lado Izquierdo, Centro o Derecho del control.

Ancho del control: define el porcentaje del ancho de la columna del control.

 

2.Fuentes: en esta configuración puede definir las siguientes opciones.

Familia de fuente: permite definir la familia de fuente para el texto de los elementos de la tabla. Por defecto la fuente es Poppings Regular

Tamaño de fuente: permite establecer el tamaño (en píxeles) del texto para los elementos de la tabla.

 

3.Color: en esta configuración puede definir el color de la fuente, fondo, borde e ícono dentro del control:

Color de fuente: permite establecer el color del texto para los elementos de la tabla. Al hacer clic en el primer cuadrado de la opción, se abre una paleta de selección de colores para que seleccione el color de texto que desee. Asimismo, puede seleccionar el color especificando su código de color hexadecimal en el campo Hex.

Color del fondo: le permite seleccionar el color del fondo de su control.

Color del borde: le permite seleccionar del borde entre elementos de colección.

 

Cuando agrupa el contenido de su control usando la opción Agrupar por, puede definir un color más:

Color del grupo activo: color de fondo del botón del grupo activo. El grupo activo es el valor de la categoría utilizada actualmente para filtrar el contenido dinámico.

 

Opciones de visibilidad

En esta sección del menú, puede configurar quién puede ver el control, seleccionando las Personas. Puede habilitar la opción Todos para seleccionar a todas las Personas, o puede seleccionar las Personas que quiera que tengan acceso al control.

 

DataTableControl14


Last Updated 9/12/2024 10:20:41 AM