Diseño de un formulario básico
Last updated
Last updated
Los formularios se maquetan sobre una estructura de secciones, compuestas a su vez por columnas en las que se añaden los distintos tipos de campos de datos.
Para añadir nuevas secciones o columnas, es necesario dirigirse a la cinta de herramientas y pulsar sobre la opción Layout.
Al hacer clic, la herramienta quedará seleccionada y el cursor mostrará una línea de color en el espacio donde se agregará dicha columna (si se está incluyendo dentro de una sección existente) o sección (si no se está incluyendo en otra existente). Es posible añadir tantas secciones y columnas como sea necesario.
Las secciones ocupan el ancho completo del formulario mientras que las columnas tienen un tamaño total de 12 unidades, equivalente a un 100% del ancho de la sección. Al seleccionar una columna, se mostrará el apartado Properties. En la sección General, podrás ver propiedades generales como el tamaño y el título.
Comienza insertando una nueva sección. A continuación, inserta una columna dentro de la sección y reduce su ancho a 6 unidades. Luego, inserta otra columna al lado, de modo que queden dos pares de columnas dentro de la sección.
Finalmente, pulsa sobre el botón Save para guardar el progreso.
Ahora es momento de renombrar las secciones. Haz clic sobre la primera sección y dirígete a Properties > General > Title. Llamaremos a esta sección “Datos personales”. Luego, dirígete a la segunda sección y nómbrala “Datos de contacto”. A continuación, selecciona cada una de las columnas y asegúrate de que no tengan un título, ya que estos estarán asignados a los campos.
Comenzaremos a añadir componentes al formulario. Algunos elementos serán útiles para mostrar información estática, mientras que otros te permitirán recoger datos de los usuarios.
Entre los elementos estáticos, encontramos las herramientas Text e Image, que permiten añadir un texto o imagen fijos. Por lo general, este tipo de elementos se utilizan para añadir títulos, logos o brindar un mensaje de ayuda o información destacada al usuario final.
En el formulario predeterminado, este campo se utiliza dentro de la columna en el apartado superior para mostrar el nombre del formulario. Al igual que con las secciones, puedes dirigirte a Properties > General > Title para modificar su nombre. Lo llamaremos con el mismo nombre que el formulario: “Actualización de datos”.
Los campos de entrada presentan mayor variedad, dado que están pensados para registrar distintos tipos de datos. Además de las tablas, que tienen su propio botón en la cinta de herramientas, puedes encontrar todas las opciones que necesites en el desplegable Text field.
Vamos a añadir a nuestro formulario dos tipos de campos básicos:
| Campo | Modo de uso |
|---|---|
Text | Permite ingresar una línea de texto, resultando útil para datos breves como nombres y direcciones. |
Number | Está configurado para ingresar solo caracteres de tipo numérico, siendo útil para aplicarse, por ejemplo, en números de teléfono, identificaciones y cantidades. |
Selecciona la opción Text en el desplegable y pulsa sobre la primera columna de la Sección “Datos personales” para añadirlo.
El apartado Properties > Name se utiliza para colocar un nombre que identifique a cada campo particular del formulario. Es recomendable que los nombres no tengan espacios y sean claros, dado que solo se visualizarán internamente, permitiendo recuperar y organizar los datos. Renombra este campo como “apellido_nombre” y pulsa sobre OK (o la tecla enter).
Coloca otro campo de texto debajo, cambia su nombre a “nacionalidad” y pulsa OK.
Ahora repite el mismo procedimiento en la segunda columna, pero esta vez añadiendo un campo de tipo numérico y otro de tipo texto. Selecciona la opción Number en el desplegable y coloca un campo al que llamaremos “dni”. Luego desde la opción Text inserta un campo donde el usuario ingresará su clave tributaria, al que llamaremos “cuil_cuit” según su denominación en Argentina.
Los campos deberían verse del siguiente modo:
Más adelante, veremos en profundidad las propiedades, apariencia y comportamientos de cada tipo de elementos y conoceremos distintas opciones de validación. Por el momento, nos enfocaremos en el apartado General:
| Propiedad | Función |
|---|---|
Label | Permite establecer el nombre que verá el usuario final al acceder al formulario. |
Size | Define el ancho del campo. Al igual que ocurre con las columnas y las secciones, las 12 unidades son proporcionales e implican que el campo ocupa el 100% de la columna en la que se encuentra. Este número se puede reducir disminuyendo su tamaño y liberando espacio para insertar nuevos campos junto a los existentes. |
Required | Establece si el formulario es un campo obligatorio (True) o no lo es (False). Ten presente que, como veremos más adelante, esta propiedad puede ser reemplazada por la expresión de validación isEmpty que devuelve un mensaje más específico y personalizado cuando un campo se encuentra en blanco. |
Selecciona cada uno de los campos que has creado y establece los siguientes valores:
Label será nombrado en cada caso: Apellido y nombre, Nacionalidad, DNI y Clave tributaria.
Size mantendrá el ancho por defecto de 12 unidades.
Required tendrá el valor True en los cuatro campos, para volverlos obligatorios.
Para comprobar tus avances, puedes utilizar el modo Live Editor del editor visual, que encontrarás con el nombre Preview a la derecha de los elementos de formulario. Al activar el botón, te mostrará una previsualización en tiempo real de tu formulario, donde puedes seguir editando las propiedades de sus componentes y comprobando su funcionamiento.
La principal restricción de este modo es que no podrás agregar nuevos campos o elementos de layout, por lo que deberás desactivarlo para seguir trabajando en el diseño de tu formulario.
Ahora es momento de completar la segunda sección: “Datos de contacto”. Añade un campo de tipo Text en la primera columna. Definiremos para él las propiedades Name: “email” y Label: “Correo electrónico”. Añade otro campo de tipo Number en la segunda columna, con las propiedades Name: “tel” y Label: “Teléfono”. Si añades un componente por error, siempre puedes eliminarlo seleccionando dicho elemento y pulsando sobre la opción Delete que se muestra en la esquina inferior derecha.
Cuando termines, pulsa Save para guardar el formulario y dirígete a la opción Preview que se encuentra junto a los botones del editor visual y el editor de código para comprobar el diseño final de tu formulario en esta primera etapa.
Finalmente, pulsa la cruz para cerrar el formulario y regresar a la pantalla principal de tu espacio de trabajo.
¡Felicitaciones! Has completado el inicio rápido aprendiendo a crear un formulario con nuevas secciones y componentes para recabar datos básicos. Continúa avanzando para conocer más sobre las características y funciones de RPA Connect.
