# Modifiez votre premier schéma

<PageBadges />

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

## Flux d'édition en direct

Cette page suppose que vous avez déjà exécuté `serve` et que l'aperçu en direct est ouvert à l'adresse `http://localhost:3030`.

<Stepper>

1. Entrez dans le mode d'édition du schéma :

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

   {/* prettier-ignore */}
   <Callout type="caution" title="Éditeur requis">

   Le mode d'édition du schéma ouvre votre éditeur. Assurez-vous que la variable `EDITOR` ou `VISUAL` est configurée :

   - **Linux/macOS** : Ajoutez `export EDITOR=nano` à `~/.bashrc`, `~/.zshrc` ou `~/.profile`, puis redémarrez votre terminal ou exécutez `source ~/.bashrc`.
   - **Windows (PowerShell)** : Exécutez `$env:EDITOR = "notepad"` pour la session en cours, ou ajoutez-le à votre profil PowerShell (`$PROFILE`).
   - **Windows (CMD)** : Utilisez `set EDITOR=notepad` pour la session, ou configurez-le de façon permanente via _Propriétés système → Variables d'environnement_.

   Pour utiliser VS Code, définissez `EDITOR` sur `code --wait`, et non `code`. Sans `--wait`, la CLI continue avant que vous n'enregistriez et vos modifications sont perdues. Les autres éditeurs graphiques nécessitent la même option (par exemple, `subl -w`, `zed --wait`).

   </Callout>

1. Prévisualisez le schéma du formulaire :

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

1. Ajoutez un _NumericField_ après un champ de votre choix, en utilisant le numéro de ligne affiché au début de chaque ligne (par exemple, `2` dans `2 | TextField ...`) dans l'aperçu du schéma :

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

   La CLI ouvrira un modèle JSON dans votre éditeur. Gardez les valeurs par défaut et modifiez quelques champs, par exemple :

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

1. Ajoutez un _CalculatedField_ après le champ `quantity` que vous venez de créer :

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

   Modifiez le style d'affichage et l'expression de calcul :

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

1. Enregistrez et fermez votre éditeur.

   Le schéma est sauvegardé et validé automatiquement. Les éventuels avertissements s'afficheront dans la CLI.

1. Vérifiez l'aperçu en direct.

   Vos nouveaux champs devraient apparaître immédiatement dans le navigateur.

1. Quittez le mode d'édition du schéma :

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

   Et arrêtez le serveur de développement :

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

</Stepper>