Guía paso a paso: creación de un formulario dinámico con KuFlow
Publicado el 11-09-2023 por Hector Tessari - KuFlow Team
Credits: Created by Hector Tessari
Crear formularios dinámicos no tiene por qué ser complicado. Con la integración de formularios JSON de KuFlow, puede crear fácilmente formularios intuitivos y fáciles de usar adaptados a sus necesidades. En esta guía, lo guiaremos a través del proceso paso a paso, comenzando desde la forma más simple y aumentando gradualmente hasta llegar a un ejemplo más complejo.
Paso 1: Creación de un formulario básico
Comencemos con un formulario básico que captura información personal como nombre, apellido, edad, fecha de nacimiento y nacionalidad. Así es como se verían el esquema y el esquema de la interfaz de usuario:
// Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
// TO DO... (definitions)
},
"properties": {
"person": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
},
"birthDate": {
"type": "string",
"format": "date"
},
"nationality": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
// ... (other Properties for contact, study & work, family)
}
}
}
}
// UI Schema
{
"type": "VerticalLayout",
"elements": [
{
"type": "Group",
"label": "Personal Information",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/name"
},
{
"type": "Control",
"scope":"#/properties/person/properties/surname"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/age"
},
{
"type": "Control",
"scope": "#/properties/person/properties/birthDate"
},
{
"type": "Control",
"scope": "#/properties/person/properties/nationality"
}
]
},
// ... (other groups for contact, study & work, family)
]
}
]
}Paso 2: Adición de información de padres/tutores
Amplíe el formulario agregando una sección para la información de los padres/tutores. Esta sección se mostrará condicionalmente si la edad de la persona es menor de 18 años.
// Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
// TO DO... (definitions)
},
"properties": {
"person": {
"type": "object",
"properties": {
// ... (Previous Properties for name, surname, age, birthdate, and nationality)
"parent": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
},
// ... (other Properties for contact, study & work, family)
}
}
}
}
// UI Schema (inside the "Personal Information" group)
{
// ... (previous controls for name, surname, age, birthdate, and nationality)
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/name",
"label": "Parent/Guardian Name"
},
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/surname",
"label": "Parent/Guardian Surname"
},
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/age",
"label": "Parent/Guardian Age"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/age",
"schema": {
"type": "integer",
"minimum": 0,
"maximum": 18
}
}
}
// ... (other groups for contact, study & work, family)
}
}
Paso 3: Incorporación de información de contacto
Mejore el formulario al incluir información de contacto, incluido el correo electrónico, el teléfono y la preferencia de contacto principal.
// Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
// TO DO... (definitions)
},
"properties": {
"person": {
"type": "object",
"properties": {
// ... (Previous Properties for name, surname, age, birthdate, nationality, and parents)
"contact": {
"type": "object",
"properties": {
"email": {
"type": "string",
"format": "email"
},
"phone": {
"type": "string",
"format": "tel"
},
"mainContact": {
"type": "string",
"enum": [
"Email",
"Phone"
]
}
}
},
// ... (other Properties for study & work, family)
}
}
}
}
// UI Schema (inside the "Contact Information" group)
{
// ... (previous controls for name, surname, age, birthdate, nationality, and parents)
{
{
"type": "Group",
"label": "Contact Information",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/email"
},
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/phone"
},
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/mainContact",
"options": {
"format": "radio"
}
}
]
}
]
},
// ... (other groups for study & work, family)
}
}
Paso 4: Introducción a los detalles de estudio y trabajo
Expanda el formulario para recopilar detalles relacionados con el estudio y el trabajo, como el último grado, la institución de estudio y la información de empleo.
// Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
// TO DO... (definitions)
},
"properties": {
"person": {
"type": "object",
"properties": {
// ... (Previous Properties for name, surname, age, birthdate, nationality, parents, and contact info)
{
"type": "Group",
"label": "Study & Work",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/lastGrade"
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/studyInstitution"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/yearGrade"
}
]
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/working"
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/companyName"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/seniority"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/studyWork/properties/working",
"schema": {
"const": true
}
}
}
}
]
}
]
},
// ... (other Properties for family)
}
}
}
}
// UI Schema (inside the "Study & Work" group)
{
// ... (previous controls for name, surname, age, birthdate, nationality, parents, and conctact info)
{
{
{
"type": "Group",
"label": "Study & Work",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/lastGrade"
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/studyInstitution"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/yearGrade"
}
]
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/working"
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/companyName"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/seniority"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/studyWork/properties/working",
"schema": {
"const": true
}
}
}
}
]
}
]
},
// ... (other groups for family)
}
}
}
Paso 5: Gestión de la información familiar
Lleve el formulario al siguiente nivel capturando información relacionada con la familia, incluido el estado civil, los detalles del cónyuge/pareja, la presencia de los hijos y la información de los hijos.
// Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
// TO DO... (definitions)
},
"properties": {
"person": {
"type": "object",
"properties": {
// ... (Previous Properties for name, surname, age, birthdate, nationality, parents, contact info, and study & work)
"civilStatus": {
"type": "string",
"enum": [
"Single",
"Married",
"Divorced",
"Widow",
"Other..."
]
},
"couple": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
},
"childrens": {
"type": "boolean"
},
"childs": {
"type": "array",
"items": {
"type": "object",
"required": [
"childName"
],
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
}
}
}
}
}
}
// UI Schema (inside the "Family" group)
{
// ... (previous controls for name, surname, age, birthdate, nationality, parents, conctact info, and study & work)
{
"type": "Group",
"label": "Family",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/civilStatus"
},
{
"type": "Label",
"text":" "
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/name"
},
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/surname"
},
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/age"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/civilStatus",
"schema": {
"const": "Married"
}
}
}
}
]
},
{
"type": "Control",
"scope": "#/properties/person/properties/childrens"
},
{
"type": "Control",
"scope": "#/properties/person/properties/childs",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/childrens",
"schema": {
"const": true
}
}
}
}
]
}
}
¡Felicidades! Ha creado con éxito un formulario dinámico usando KuFlow y JSON Forms. A partir de un formulario simple, ha ido construyendo gradualmente su complejidad para capturar una amplia gama de información. Esta guía paso a paso muestra el poder de las capacidades de creación de formularios de KuFlow, lo que le permite crear formularios personalizados e interactivos con facilidad.
A continuación puede ver el resultado del formulario y compartiremos el código completo
Schema
{
"title": "A form",
"description": "A simple form example",
"type": "object",
"definitions": {
"PersonType": {
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
"surname": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
"age": {
"type": "integer",
"minimum": 0,
"maximum": 200
}
}
}
},
"properties": {
"person": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
},
"birthDate": {
"type": "string",
"format": "date"
},
"nationality": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
"parent": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
},
"contact": {
"type": "object",
"properties": {
"email": {
"type": "string",
"format": "email"
},
"phone": {
"type": "string",
"format": "tel"
},
"mainContact": {
"type": "string",
"enum": [
"Email",
"Phone"
]
}
}
},
"studyWork": {
"type": "object",
"properties": {
"lastGrade": {
"type": "string",
"enum": [
"Primary School",
"High School",
"Bachelor",
"University"
]
},
"working": {
"type": "boolean"
},
"companyName": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
"seniority": {
"type": "number"
},
"studyInstitution": {
"type": "string",
"minLength": 0,
"maxLength": 30
},
"yearGrade": {
"type": "string",
"pattern": "^(19[5-9][0-9]|20[0-1][0-9]|202[0-3])$"
}
}
},
"civilStatus": {
"type": "string",
"enum": [
"Single",
"Married",
"Divorced",
"Widow",
"Other..."
]
},
"couple": {
"type": "object",
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
},
"childrens": {
"type": "boolean"
},
"childs": {
"type": "array",
"items": {
"type": "object",
"required": [
"childName"
],
"properties": {
"name": {
"$ref": "#/definitions/PersonType/properties/name"
},
"surname": {
"$ref": "#/definitions/PersonType/properties/surname"
},
"age": {
"$ref": "#/definitions/PersonType/properties/age"
}
}
}
}
}
}
}
}UI Schema
{
"type": "VerticalLayout",
"elements": [
{
"type": "Group",
"label": "Personal Information",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/name"
},
{
"type": "Control",
"scope":"#/properties/person/properties/surname"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/age"
},
{
"type": "Control",
"scope": "#/properties/person/properties/birthDate"
},
{
"type": "Control",
"scope": "#/properties/person/properties/nationality"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/name",
"label": "Parent/Guardian Name"
},
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/surname",
"label": "Parent/Guardian Surname"
},
{
"type": "Control",
"scope": "#/properties/person/properties/parent/properties/age",
"label": "Parent/Guardian Age"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/age",
"schema": {
"type": "integer",
"minimum": 0,
"maximum": 18
}
}
}
}
]
},
{
"type": "Group",
"label": "Contact Information",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/email"
},
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/phone"
},
{
"type": "Control",
"scope": "#/properties/person/properties/contact/properties/mainContact",
"options": {
"format": "radio"
}
}
]
}
]
},
{
"type": "Group",
"label": "Study & Work",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/lastGrade"
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/studyInstitution"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/yearGrade"
}
]
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/working"
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/companyName"
},
{
"type": "Control",
"scope": "#/properties/person/properties/studyWork/properties/seniority"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/studyWork/properties/working",
"schema": {
"const": true
}
}
}
}
]
}
]
},
{
"type": "Group",
"label": "Family",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/civilStatus"
},
{
"type": "Label",
"text":" "
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/name"
},
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/surname"
},
{
"type": "Control",
"scope": "#/properties/person/properties/couple/properties/age"
}
],
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/civilStatus",
"schema": {
"const": "Married"
}
}
}
}
]
},
{
"type": "Control",
"scope": "#/properties/person/properties/childrens"
},
{
"type": "Control",
"scope": "#/properties/person/properties/childs",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/person/properties/childrens",
"schema": {
"const": true
}
}
}
}
]
}
]
}Messages
{
"person.studyWork.yearGrade.error.pattern": "Must be between 1950 and 2023"
}Data (after the form completion)
{
"person": {
"name": "Hector",
"surname": "Tessari",
"age": 38,
"birthDate": "1984-10-25",
"nationality": "Italy",
"couple": {
"name": "Florencia",
"surname": "Bena",
"age": 33
},
"contact": {
"email": "htessar@kuflow.com",
"phone": "+34 645142541",
"mainContact": "Email"
},
"studyWork": {
"lastGrade": "Bachelor",
"studyInstitution": "IFTS5",
"yearGrade": "2017",
"working": true,
"companyName": "KuFlow S.L.",
"seniority": 1
},
"civilStatus": "Married",
"childrens": true,
"childs": [
{
"name": "pepe",
"surname": "pepino",
"age": 1
},
{
"name": "pipa",
"surname": "pipina",
"age": 2
}
]
}
}Para ver más ejemplos, visite nuestra Seccion de Community Examples.
