Un model amb les propietats correctes només és la meitat de la feina — el formulari que els teus usuaris omplen surt de les vistes i les restriccions del model. Aquest tutorial mostra les tasques més habituals de disseny de formularis: amagar camps de sistema en la creació, marcar camps calculats com a només lectura en l'edició, agrupar camps relacionats visualment i posar-los costat a costat.

Suposem un model Customer amb aquestes propietats: name, email, taxId, notes, createdOn, updatedOn.

1. Amaga els camps d'auditoria al formulari de creació

createdOn i updatedOn s'omplen automàticament — els usuaris no els haurien de veure quan creen un client.

  1. Obre el model Customer a l'Explorador.
  2. Tria la vista create al selector de vistes.
  3. Fes clic a createdOn. Posa la restricció de visualització a visible = false. Desa.
  4. Repeteix-ho amb updatedOn.

La vista per defecte no canvia, així que la resta de llocs que no la sobreescriuen (el formulari d'edició, la taula) continuen mostrant els camps.

2. Mostra els camps d'auditoria en només lectura al formulari d'edició

Per a un registre existent, els camps d'auditoria sí haurien de veure's — però no es poden editar.

  1. Tria la vista update al selector de vistes.
  2. Fes clic a createdOn. Posa visible = true, readonly = true. Desa.
  3. Repeteix-ho amb updatedOn.

Ara el formulari d'edició mostra quan i qui va crear i actualitzar per última vegada el client, però l'usuari no pot canviar aquests valors.

3. Fes que un camp sigui obligatori només en crear

Pots exigir email en crear, però permetre que estigui buit quan edites registres antics.

  1. Tria la vista create.
  2. Fes clic a email. Afegeix una restricció de String amb required = true. Desa.
  3. Tria la vista update.
  4. Fes clic a email. Afegeix una restricció de String amb required = false. Desa.

La restricció de la vista per defecte, si n'hi ha, s'aplica només quan ni create ni update la sobreescriuen.

4. Agrupa camps relacionats en una secció

L'agrupació visual fa que els formularis llargs es llegeixin millor.

  1. Tria la vista default (perquè l'agrupació s'apliqui a tot arreu).
  2. A cada propietat, posa el camp group de la restricció de visualització a una etiqueta:
    • name, email, taxId → grup Identificació.
    • notes → grup Notes.
  3. Ordena les propietats: name (1), email (2), taxId (3), notes (10), createdOn (20), updatedOn (21).

El formulari ara mostra dues seccions plegables amb les propietats en l'ordre correcte.

5. Fes servir flex per col·locar camps en paral·lel

Per defecte cada propietat ocupa la seva fila. La restricció de visualització flex controla quant d'espai horitzontal pren una propietat quan diverses comparteixen fila.

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

Dins del grup Identificació, aquestes tres propietats ara comparteixen una fila amb taxId ocupant menys espai que les altres dues.

6. Previsualitza el resultat

Obre l'Explorador i crea un Customer nou. El formulari de creació hauria de:

  • No mostrar createdOn ni updatedOn.
  • Exigir email.
  • Mostrar name, email, taxId en una fila i després notes, tot sota seccions amb etiqueta.

Obre un client existent i passa al formulari d'edició. Els camps d'auditoria ara haurien de veure's al final, en només lectura.

Relacionats