Crea un formulario de registro de casos
En esta guía, creas un formulario de registro de casos de soporte y lo ejecutas en el starter de React y Vite. El formulario tiene:
- campos de contacto que aparecen, y pasan a ser obligatorios, según el método de contacto preferido;
- una prioridad calculada a partir de las respuestas;
- una fecha de respuesta calculada a partir de la prioridad; y
- un campo de impacto en el negocio que solo es obligatorio en los casos de prioridad alta.
Todo este comportamiento vive en un único esquema JSON. El código de la aplicación solo registra el formulario.
Tiempo: unos 15 minutos.
Antes de empezar
- Node.js
22.19.0+ - form0-cli, instalado con
npm install --global form0-cli
El starter de React + Vite incluye los paquetes form0 necesarios. Si usas una aplicación existente,
necesita como mínimo form0-core 0.4.1 y form0-react 0.2.2. Sigue
Instalar y renderizar con React para instalarlos o
actualizarlos antes de copiar el esquema.
Crea el formulario
-
Crea una aplicación web con el starter:
CodeElige Aplicación web y después React + Vite. Luego entra en el directorio del proyecto:
Code -
Crea
src/forms/case-intake/schema.jsoncon este esquema:CodeEn este esquema, la
keyde cada campo coincide con sudata_namepara que las condiciones se lean con facilidad. Cuando añades campos con la CLI, esta genera claves aleatorias. -
Registra el formulario en
src/forms/registry.jsañadiendo una entrada al arrayforms:Code -
Inicia la aplicación y el servidor de desarrollo de form0:
CodeLa CLI instala las dependencias en la primera ejecución, valida el esquema, vigila sus cambios e inicia el servidor de Vite.
-
Abre
http://localhost:5173/case-intakey prueba el formulario:- Elige Email como método de contacto. Aparece el campo Email y es obligatorio. Cambia a Phone y el campo Phone lo sustituye.
- Elige My team y responde No a Is work blocked?. Priority muestra
normal, y Respond by cae tres días después de Received on. - Cambia la respuesta a Yes. Priority pasa a
high, Respond by se mueve al día siguiente y Describe the business impact aparece como campo obligatorio.
-
Rellena los campos obligatorios y envía el formulario. Abre la consola de desarrollo del navegador para ver el registro estructurado que muestra el starter.
Cómo funciona
Campos condicionales
El campo Email está oculto por defecto. Sus condiciones lo muestran, y lo hacen obligatorio,
cuando el método de contacto es email:
Code
Una condición sobre un campo de selección compara el value de la opción elegida, no su etiqueta.
Consulta Condiciones y operadores.
Ocultar un campo no borra su valor. Si alguien escribe una dirección de email y luego cambia a Phone, la dirección sigue en los valores del formulario. Decide en tu aplicación si los valores ocultos deben conservarse.
Prioridad calculada
priority es un CalculatedField. Su expresión calculate lee las respuestas a Who is
affected? y Is work blocked?:
Code
CHOICEVALUE() devuelve el valor elegido en un campo de selección. El primer IF() deja la
prioridad vacía hasta que Who is affected? tiene respuesta.
Las expresiones de esta página se dividen en varias líneas para que se lean mejor. En el esquema,
cada una ocupa una sola línea. Si escribes un cálculo de varias líneas, indica su resultado con
SETRESULT() o una sentencia return explícita.
Fecha de respuesta
respond_by suma un número de días a received_on, según la prioridad:
Code
DATEADD() devuelve null cuando el número
de días está vacío, así que la fecha queda vacía hasta que hay una prioridad.
"display": { "style": "date" } indica al renderer que muestre el resultado como fecha.
Una condición que depende de un cálculo
Describe the business impact usa el mismo tipo de condición que Email, pero lee priority,
que también es un valor calculado:
Code
Funciona porque el motor ejecuta los cálculos antes de evaluar las condiciones.
Qué acaba de pasar
Cada vez que cambiaste una respuesta, el renderer del starter la pasó al motor de form0. El motor
volvió a calcular priority y después respond_by, en orden de dependencias, y luego volvió a
evaluar qué campos son visibles y obligatorios. El renderer solo mostró el resultado. El mismo
esquema produce el mismo comportamiento en cualquier aplicación que use form0.
Para profundizar:
- Ciclo de evaluación: qué hace una pasada de evaluación y en qué orden.
- Cálculos y dependencias: cómo ordena el motor los cálculos que dependen unos de otros.
- Envíos y conectores: adónde va el registro enviado en el starter y cómo mandarlo a una base de datos.