02. Listado de familiares
Nivel de dificultad: MEDIO
Se recomienda haber realizado al menos el tutorial Primeros pasos en Webforms.
Introducción
Índice
Elementos utilizados
En este tutorial se han utilizado los siguientes aspectos de Webforms:
Objetivo del tutorial
Para ilustrar mejor el funcionamiento de las piezas de Webforms, se creará un Fragmento con la finalidad de listar todos los familiares que residan en el mismo domicilio, gracias a un elemento Tabla.
Dicho fragmento contendrá también elementos como desplegables, inputs o radios.
Este fragmento podría ser usado luego en diversos formularios, como por ejemplo de ayudas o becas.
Pasos
1. Creación de Fragmento
Para comenzar, vamos a la sección Fragmentos y hacemos clic el botón Añadir.
Acto seguido, introducimos los campos requeridos:
Una vez creado, vamos directos al Diseñador:
2. Creación de Tabla
El principal componente de este fragmento será la Tabla.
Gracias a este elemento podremos listar de forma tabulada una serie de datos que pueden ser repetibles.
Arrastramos el elemento al diseñador y lo configuramos de la siguiente forma:
3. Creación de campos
A continuación, comenzamos a arrastrar dentro de la tabla los campos que se van a solicitar por cada familiar.
Relación del familiar con el solicitante - Desplegable
Para añadir un listado del que se seleccione el tipo de relación lo ideal es utilizar un Desplegable.
Una vez arrastrado este elemento a la tabla lo configuramos de la siguiente forma:
Y, en la pestaña Opciones, introducimos los valores más comunes:
Añadir campo "Otro" - Nivel avanzado
Si se desease incluir un nuevo campo llamado "Otro" para otro tipo de familiares (abuelos, tíos, primos, etc.) es necesario un nuevo campo de tipo input que solo se muestre si se selecciona la opción Otro en el desplegable.
Para comenzar, incluimos la nueva opción Otro en el desplegable ya creado.
Para continuar, creamos un nuevo input que contendrá el tipo de relación de la persona a añadir. Lo configuramos de la siguiente forma:
Ahora, como no existe una opción predefinida para el funcionamiento deseado (que el campo aparezca en función de la selección en otro elemento), será necesario escribir algunas líneas de código.
Este código irá dentro de la pestaña Eventos.
El código sería el siguiente:
Elemento a mostrar en una tabla en función de un desplegable en la misma tabla
var indice = wf.obtenerContextoPadre(this).indice;
var valor = wf.obtenerValor("tabla-familiar-relacion", "[[tabla-listado]]", indice);
resolve(valor == "otro")La explicación es la siguiente, por líneas:
- Se realiza una consulta con el método obtenerContextoPadre, necesario para saber la iteración presente de la tabla y así mostrar el campo dependiendo de la entrada de datos actual.
- Se guarda el valor con el método obtenerValor. Es necesario el doble corchete únicamente en el ID de la tabla, y usamos el índice obtenido en el paso previo.
- Utilizamos el método resolve para ejecutar la condición, como se indica en la página Mostrar sólo si.
Comprobamos el resultado y proseguimos.
NIF/NIE - Input (con comprobación)
A continuación introduciremos un Input.
Este contendrá el DNI/NIF del familiar, por lo que configuramos el input de la siguiente forma:
Lo más destacable son los siguientes campos:
- Tipo: al elegir NIF o NIE, este elemento hará validaciones automáticas en el formulario final, sin necesidad de añadir ningún código.
- Placeholder: al escribir el NIF en ese formato, automáticamente el usuario ya entiende cómo tiene que introducir el suyo.
Nombre completo - Input
Será necesario un nuevo Input.
En esta ocasión será más sencillo, sin ningún tipo de validación, por lo que lo configuramos de la siguiente forma:
Grado de discapacidad - Radio
Un tipo de dato que podría ser relevante para un formulario (o, en este caso, fragmento del mismo) podría ser el grado de discapacidad de las personas que residen con el solicitante.
Así, podríamos generar un elemento tipo Radio.
Introducimos los siguientes datos:
Seleccionamos que no sean Inline para que aparezcan listados y, además, ponemos la Posición texto a la derecha por estética, ya que así quedan todos los radios alineados en la izquierda.
Opciones
De acuerdo, con la legislación actual, existen 5 grados de discapacidad, grosso modo. Utilizaremos esa clasificación como ejemplo.
- Clase 1: 0% discapacidad
- Clase 2: 1-24%
- Clase 3: 25-49%
- Clase 4: 50-70%
- Clase 5: 75% o más
En la pestaña Opciones quedaría así, siendo Etiqueta el texto a mostrar y Valor el dato que el formulario guarda:
Confirmación domicilio - Checkbox
Por último, añadimos un Checkbox.
Este permitirá una confirmación manual de que dicho miembro reside actualmente en el domicilio, a modo de última verificación.
Lo configuramos de la siguiente manera:
4. Vista previa
Al haber finalizado el fragmento, el resultado final se verá así:
Al hacer clic en la acción Vista Previa se puede ver cómo quedaría el fragmento dentro del formulario.
El resultado debería ser el siguiente:
Cuando estemos conformes con el resultado, podemos guardar el fragmento y salir.
Composición
Si se desea, se pueden modificar el campo "número de columnas" en cada elemento y añadir elementos del tipo Espaciador para que el usuario vea el formulario de la forma que el creador desee.
5. Publicación
Para publicar el borrador que acabamos de terminar, bastaría con hacer clic en Publicar.
6. Integración en formulario
Por último, a la hora de incrustar este fragmento en un formulario mayor, simplemente se ha de añadir un elemento del tipo Fragmento dentro del formulario deseado.
Como último apunte, recordar que, cuando modifiquemos y publiquemos este fragmento, cualquier formulario que lo esté utilizando se verá inmediatamente actualizado a una nueva versión menor. Puedes ver las diferencias entre nueva versión mayor y nueva versión menor en Control de versiones de los formularios.