Tipo de página

Wizard: un registro largo, dividido en pasos.

Esta contratación corre en la app de ejemplo, publicada en la Prueba online. Son cuatro pasos: datos generales, dirección, cuenta bancaria y resumen. Cada uno guarda en su tabla y se valida antes de avanzar.

Cuatro pasos, con todo el camino a la vista

Arriba, cada paso tiene un ícono y muestra si está hecho, en curso o pendiente. Quien completa ve solo los campos de ese momento, en vez de una pantalla con 40 campos.

Primer paso de la contratación de una persona, con nombre, documento y los cuatro pasos indicados arriba — En el paso 1, datos generales, los cuatro pasos ya aparecen arriba de la pantalla.

Cada paso guarda en una tabla

Cada sección del formulario (<mad-form-section>) se vuelve un paso. El nombre de la sección dice en qué tabla guarda ese bloque. Aquí son tres: persona, dirección y cuenta bancaria.

resources/views/…blade.php

<mad-form submit="onSave"><mad-form-section title="Datos generales" icon="clipboard-list" name="dados"><mad-form-grid :cols="2"><mad-input-field name="nome" label="Nombre" :required="true" /><mad-input-field name="documento" label="Documento" :required="true" /></mad-form-grid></mad-form-section><mad-form-section title="Dirección" icon="map-pin" name="endereco__"><mad-form-grid :cols="2"><mad-input-field name="rua" label="Calle" /><mad-dbcombo-field name="cidade_id" label="Ciudad" model="Cidade" display="{nome}" /></mad-form-grid></mad-form-section>...</mad-form>

Segundo paso de la contratación, con calle, número, barrio, código postal y la ciudad elegida en una lista — En el paso 2, dirección, la lista de ciudades viene de la base de datos y el paso 1 ya aparece concluido.

Solo avanza con el paso válido

El botón Avanzar solo pasa si el paso es válido. El error aparece en el propio campo, y los pasos ya concluidos siguen marcados. Volver no borra nada de lo que se escribió.

Tercer paso de la contratación, con aviso de campo obligatorio debajo del campo Banco — En el paso 3, el aviso de campo obligatorio retiene el avance, y los pasos 1 y 2 siguen concluidos.

Cuándo usar el wizard

Úsalo cuando un registro tiene demasiados campos para una sola pantalla. Por pasos, quien completa ve solo lo que importa ahora, sabe cuánto falta y corrige el error en el paso en que ocurrió.

Contratación de empleado (RR. HH.). Datos, dirección y cuenta bancaria, como en el ejemplo de arriba.
Registro de proveedor (compras). Datos de la empresa, contacto, cuenta bancaria y los documentos adjuntos.
Cliente nuevo (ventas). Datos del cliente, dirección de entrega y condición de pago.
Matrícula o inscripción. Datos del alumno, del responsable y del pago, con un resumen para revisar antes de guardar.

Si el registro cabe en una pantalla, o es una venta con ítems, usa el formulario. Si el registro guardado aún necesita aprobación, usa la cola de aprobación. El agente de IA también genera wizards a partir de una especificación.

Lo que configuras

Los pasos son las secciones del formulario. El indicador de pasos del framework es <mad-steps>, con un <mad-step> por paso.

Título, subtítulo e ícono de la sección title subtitle icon: El nombre del bloque de campos, una línea de apoyo y el ícono.
Formato del indicador variant: El camino de arriba aparece como flechas, puntos, números o una barra de progreso.
Nombre, descripción e ícono del paso label description icon: Lo que el indicador muestra en cada paso, como "Dirección" y una descripción corta.
Paso actual current: El paso en curso. Los anteriores quedan concluidos y los siguientes pendientes, sin que marques uno por uno.
Método que guarda submit: El método que se llama al enviar el formulario, como el onSave del código de arriba.

Lo que va al proyecto Laravel

El wizard es un formulario por pasos: una clase en app/Control y la vista con <mad-form>. En el patrón de wizard del framework, el controller maneja los pasos así:

Avanzar revisa solo el paso actual. El método onNext valida solo las reglas de ese paso, y nadie ve un aviso de un campo que ni apareció. Volver (onPrev) solo cambia de paso.
Terminar guarda en una transacción. El método onFinish revisa el último paso y guarda en una transacción de la base de datos.
El paso actual queda en el controller. Es una propiedad pública ($step), por eso se mantiene en cada ida al servidor.

Como toda pantalla de MadBuilder, esos archivos se abren en tu editor, van a tu Git y aceptan código a mano en bloques protegidos, que siguen ahí cuando la pantalla se genera de nuevo. Mira cómo se genera el código.

Preguntas sobre el wizard

¿El wizard guarda en cada paso o solo al final?

Tú eliges entre guardar en cada paso o solo al final, de una vez. En ambos casos, cada paso puede guardar en una tabla distinta.

¿El wizard acepta los mismos campos del formulario?

Sí. Los pasos usan los mismos tipos de campo del formulario, más de 40, como lista de la base de datos, fecha, moneda y carga de archivos.

¿Se puede hacer clic en un paso e ir directo a él?

Sí. El indicador de pasos tiene un modo clicable, y un método del controller recibe el clic y decide qué pasa.

Y más

Guardar en cada paso o solo al finalVolver sin perder lo que ya se escribióPaso de resumen antes de guardarÍcono y situación de cada paso: hecho, actual o pendienteCada paso puede guardar en una tabla distintaLos mismos tipos de campo del formulario, más de 40

Mira también el Formulario o los tipos de página.

Crea la cuenta, arma una pantalla, descarga el proyecto.

Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.

Probar la app ahora Ver el código generado

Crea la cuentaBeta abierta, sin tarjeta.
Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
Descarga el .zipUn proyecto Laravel que corre donde quieras.