# Modifica il tuo primo schema

<PageBadges />

import { Callout } from "zudoku/ui/Callout"
import { Stepper } from "zudoku/ui/Stepper"

## Flusso di modifica live

Questa pagina presuppone che tu abbia già eseguito `serve` e che l'anteprima live sia aperta su `http://localhost:3030`.

<Stepper>

1. Entra nella modalità di modifica dello schema:

   ```ansi
   form0(server)> schema edit
   ```

   {/* prettier-ignore */}
   <Callout type="caution" title="Editor richiesto">

   La modalità di modifica dello schema apre il tuo editor. Assicurati che la variabile `EDITOR` o `VISUAL` sia configurata:

   - **Linux/macOS**: Aggiungi `export EDITOR=nano` a `~/.bashrc`, `~/.zshrc` o `~/.profile`, poi riavvia il terminale o esegui `source ~/.bashrc`.
   - **Windows (PowerShell)**: Esegui `$env:EDITOR = "notepad"` per la sessione corrente, oppure aggiungilo al tuo profilo PowerShell (`$PROFILE`).
   - **Windows (CMD)**: Usa `set EDITOR=notepad` per la sessione, oppure impostalo in modo permanente tramite _Proprietà del sistema → Variabili d'ambiente_.

   Per usare VS Code, imposta `EDITOR` a `code --wait`, non `code`. Senza `--wait`, la CLI prosegue prima che tu salvi e le modifiche vanno perse. Altri editor grafici richiedono lo stesso flag (ad esempio, `subl -w`, `zed --wait`).

   </Callout>

1. Visualizza l'anteprima dello schema del form:

   ```ansi
   form0(server,schema)> preview
   ```

1. Aggiungi un _NumericField_ dopo un campo a tua scelta, usando il numero di riga mostrato all'inizio di ogni linea (ad esempio, `2` in `2 | TextField ...`) nell'anteprima dello schema:

   ```ansi
   form0(server,schema)> add NumericField after <id>
   ```

   La CLI aprirà un template JSON nel tuo editor. Mantieni i valori di default e modifica alcuni campi, ad esempio:

   ```json
   {
     "data_name": "quantity",
     "label": "Quantity",
     "min": 1,
     "max": 100,
     "format": "integer"
   }
   ```

1. Aggiungi un _CalculatedField_ dopo il campo `quantity` appena creato:

   ```ansi
   form0(server,schema)> add CalculatedField after <new-id>
   ```

   Modifica lo stile di visualizzazione e l'espressione di calcolo:

   ```json
   {
     "data_name": "total",
     "label": "Total",
     "display": { "style": "numeric" },
     "calculate": "$quantity * 2"
   }
   ```

1. Salva e chiudi l'editor.

   Lo schema viene salvato e validato automaticamente. Eventuali avvisi verranno mostrati nella CLI.

1. Controlla l'anteprima live.

   I nuovi campi dovrebbero apparire immediatamente nel browser.

1. Esci dalla modalità di modifica dello schema:

   ```ansi
   form0(server,schema)> q
   ```

   E ferma il server di sviluppo:

   ```ansi
   form0(server)> serve stop
   ```

</Stepper>