Un modelo con las propiedades adecuadas solo es la mitad del trabajo — el formulario que tus usuarios rellenan sale de las vistas y las restricciones del modelo. Este tutorial muestra las tareas más habituales de diseño de formularios: ocultar campos de sistema en la creación, marcar campos calculados como solo lectura en la edición, agrupar campos relacionados visualmente y ponerlos lado a lado.

Suponemos un modelo Customer con estas propiedades: name, email, taxId, notes, createdOn, updatedOn.

1. Oculta los campos de auditoría en el formulario de creación

createdOn y updatedOn se rellenan automáticamente — los usuarios no deberían verlos al crear un cliente.

  1. Abre el modelo Customer en el Explorador.
  2. Elige la vista create en el selector de vistas.
  3. Haz clic en createdOn. Pon la restricción de visualización a visible = false. Guarda.
  4. Repítelo con updatedOn.

La vista por defecto no cambia, así que el resto de lugares que no la sobrescriben (el formulario de edición, la tabla) siguen mostrando los campos.

2. Muestra los campos de auditoría en solo lectura en el formulario de edición

Para un registro existente, los campos de auditoría sí deberían verse — pero no se pueden editar.

  1. Elige la vista update en el selector de vistas.
  2. Haz clic en createdOn. Pon visible = true, readonly = true. Guarda.
  3. Repítelo con updatedOn.

Ahora el formulario de edición muestra cuándo y quién creó y actualizó por última vez al cliente, pero el usuario no puede cambiar esos valores.

3. Haz que un campo sea obligatorio solo al crear

Puedes exigir email al crear, pero permitir que esté vacío al editar registros antiguos.

  1. Elige la vista create.
  2. Haz clic en email. Añade una restricción de String con required = true. Guarda.
  3. Elige la vista update.
  4. Haz clic en email. Añade una restricción de String con required = false. Guarda.

La restricción de la vista por defecto, si la hay, se aplica solo cuando ni create ni update la sobrescriben.

4. Agrupa campos relacionados en una sección

La agrupación visual hace que los formularios largos se lean mejor.

  1. Elige la vista default (para que la agrupación se aplique en todos los sitios).
  2. En cada propiedad, pon el campo group de la restricción de visualización a una etiqueta:
    • name, email, taxId → grupo Identificación.
    • notes → grupo Notas.
  3. Ordena las propiedades: name (1), email (2), taxId (3), notes (10), createdOn (20), updatedOn (21).

El formulario muestra ahora dos secciones plegables con las propiedades en el orden correcto.

5. Usa flex para colocar campos en paralelo

Por defecto cada propiedad ocupa su fila. La restricción de visualización flex controla cuánto espacio horizontal toma una propiedad cuando varias comparten fila.

  • name → flex 2
  • email → flex 2
  • taxId → flex 1

Dentro del grupo Identificación, estas tres propiedades comparten ahora una fila con taxId ocupando menos espacio que las otras dos.

6. Previsualiza el resultado

Abre el Explorador y crea un Customer nuevo. El formulario de creación debería:

  • No mostrar createdOn ni updatedOn.
  • Exigir email.
  • Mostrar name, email, taxId en una fila y luego notes, todo bajo secciones con etiqueta.

Abre un cliente existente y pasa al formulario de edición. Los campos de auditoría ahora deberían verse al final, en solo lectura.

Relacionados