# Diseño de un formulario básico ## Layout 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. ## Elementos estáticos 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”.

## Campos de entrada 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:

Campos con propiedades **Name** definidas

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.