Tablas
Last updated
Last updated
Las tablas son una herramienta de gran funcionalidad y utilidad en la confección de formularios. Además de ofrecer opciones de configuración de permisos y ordenamiento para facilitar tanto la carga como el procesamiento de la información, también permiten adaptar la tipología de sus columnas para restringir y especificar qué tipo de datos serán aceptados en cada caso, al igual que sucede con los campos individuales.
Como vimos anteriormente, existen herramientas con una serie de propiedades únicas para su tipo. Veamos cada una de las características que puedes determinar al trabajar con tablas:
En este apartado podrás crear las columnas que necesites desde el botón Add column, así como ocultarlas o mostrarlas (ícono con forma de ojo) y también eliminarlas (ícono con forma de cesto). Es importante que en este punto definas qué datos esperas obtener para que la información ingresada esté completa ya que los usuarios no podrán añadir nuevas ni quitar las existentes.
Esta propiedad se comporta de un modo similar en todos los campos, aunque en este caso lo que se podrá establecer es el mínimo (por ejemplo, 1) y el máximo (por ejemplo, 10) de filas aceptadas.
Además de las opciones Readonly y Visibility, cuenta con una serie de casillas que puedes tildar para permitir acciones o conceder permisos al usuario. Estas son:
Show error markers: si está activada, habilita que se muestren los indicadores de error cuando los datos ingresados no respetan las validaciones del campo.
Can Add: permite que el usuario añada nuevas filas a la tabla.
Can Delete: permite que el usuario elimine filas.
Can Sort: permite que el usuario ordene las filas de una columna según un valor (por ejemplo, por orden alfabético de los textos).
Can Shrink: permite ajustar el espacio que ocupa la tabla dentro del formulario en función de los datos ingresados.
Analizaremos en mayor detalle cómo funciona este tipo de elementos incorporando una nueva sección y sumando una tabla de ancho completo. Definiremos como Label “Historial de pedidos” y como Name “historial_pedidos”. En el apartado Validations, define que el número mínimo de filas sea 1 y el máximo 10. En Behavior, activa las opciones Can Add, _Can Delete_ y Can Sort, para que los usuarios puedan agregar nuevas filas, quitarlas y ordenar los datos ingresados.
A continuación, dirígete al apartado Table columns y añade 5 columnas. Las utilizaremos para que el usuario pueda ingresar el tipo de producto solicitado, la cantidad de unidades, el código de pedido, la fecha de solicitud y el comprobante.
Una vez que hayas creado las columnas, haz clic sobre el nombre de la primera para empezar a configurarla. Se abrirá un nuevo panel con las propiedades específicas para esa columna. En primer lugar, define como Name “historial_pedidos_producto” y en el apartado Type, elige que el tipo de campo sea Options, suponiendo que tenemos una cantidad limitada de productos entre las que el usuario puede elegir. Pulsa OK para guardar. A continuación, establece como Label “Producto” y como Size, 3 unidades.
En el apartado de opciones, define los valores como “Rojo”, “Verde” y “Azul”. Haz clic en Back para volver a las propiedades de la tabla.
Selecciona ahora la segunda columna. Define como Name “historial_pedidos_cantidad” y como tipo de campo, Number. Su Label será “Cantidad” y tendrá un tamaño de 2 unidades. Establece como Placeholder “Unidades solicitadas” y como valor máximo 100.
Regresa a las propiedades de la tabla para seleccionar ahora la tercera columna, que llamarás “historial_pedidos_codigo” y define que el tipo de campo sea Text. Su Label será “Código de pedido”. Activa la previsualización en tiempo real y haz clic en el signo "+" que se muestra en la parte superior de la tabla para agregar dos filas.
Imaginemos que los códigos están compuestos del siguiente modo, con las primeras dos letras y los primeros tres números siempre invariables: SP ZYR-30032905BC. Es posible reproducir esta estructura a través de las propiedades Prefix y Mask. Intenta configurar este campo y a continuación prueba ingresando los siguientes códigos:
Código correcto: SP ATI-30058452YT
Código incorrecto: SP RU-8001573PH1
El formulario debería impedir la carga de los datos incorrectos. Comprueba a continuación los parámetros que pueden utilizarse para la validación del código:
Establece el tamaño del campo en 3 unidades y vuelve hacia atrás para seleccionar ahora la cuarta columna. Define para la propiedad Name el valor “historial_pedidos_fecha”y escoge como tipo de campo Date. Su Label será “Fecha de solicitud” y su tamaño será de 2 unidades.
Por último, dirígete a las propiedades de la tabla y selecciona la última columna, que llamaremos “historial_pedidos_comprobante”. Establece como tipo de campo Attachment, define su Label como “Comprobante de pedido” y, dado que ya hemos ocupado 10 de las 12 unidades del ancho total con las columnas restantes, establece su tamaño en 2 unidades.
Una vez que hayas finalizado, tu formulario debería verse como el siguiente:
