Créer un formulaire d’ouverture de dossier

ReactVite

Dans ce guide, vous créez un formulaire d’ouverture de dossier de support et vous l’exécutez dans le starter React et Vite. Le formulaire comprend :

des champs de contact qui apparaissent, et deviennent obligatoires, selon le mode de contact préféré ;
une priorité calculée à partir des réponses ;
une date de réponse calculée à partir de la priorité ;
un champ d’impact métier obligatoire uniquement pour les dossiers de priorité haute.

Tout ce comportement tient dans un seul schéma JSON. Le code de l’application se contente d’enregistrer le formulaire.

Durée : environ 15 minutes.

Avant de commencer

Node.js 22.19.0+
form0-cli, installé avec npm install --global form0-cli

Le starter React + Vite inclut les paquets form0 nécessaires. Si vous utilisez une application existante, elle doit utiliser au minimum form0-core 0.4.1 et form0-react 0.2.2. Suivez Installer et afficher avec React pour les installer ou les mettre à jour avant de copier le schéma.

Créer le formulaire

Créez une application web avec le starter :
```
Code
form0 init case-intake-app
```
Choisissez Application web, puis React + Vite. Entrez ensuite dans le dossier du projet :
```
Code
cd case-intake-app
```

Créez src/forms/case-intake/schema.json avec ce schéma :


Code
{
  "form": {
    "name": "Case intake",
    "description": "Log a new support case.",
    "elements": [
      {
        "type": "Section",
        "key": "requester",
        "data_name": "requester",
        "label": "Requester",
        "display": "inline",
        "description": null,
        "description_mode": null,
        "visible": true,
        "visible_conditions": null,
        "elements": [
          {
            "type": "TextField",
            "key": "name",
            "data_name": "name",
            "label": "Full name",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "pattern": null,
            "pattern_description": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          },
          {
            "type": "SingleChoiceField",
            "key": "contact_method",
            "data_name": "contact_method",
            "label": "Preferred contact method",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "allow_other": false,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null,
            "is_searchable": false,
            "is_searchable_mode": null,
            "choices": [
              {
                "label": "Email",
                "value": "email"
              },
              {
                "label": "Phone",
                "value": "phone"
              }
            ]
          },
          {
            "type": "TextField",
            "key": "email",
            "data_name": "email",
            "label": "Email",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": false,
            "required_conditions": {
              "field_id": "contact_method",
              "operator": "equal_to",
              "value": "email"
            },
            "visible": false,
            "visible_conditions": {
              "field_id": "contact_method",
              "operator": "equal_to",
              "value": "email"
            },
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "pattern": null,
            "pattern_description": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          },
          {
            "type": "TextField",
            "key": "phone",
            "data_name": "phone",
            "label": "Phone",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": false,
            "required_conditions": {
              "field_id": "contact_method",
              "operator": "equal_to",
              "value": "phone"
            },
            "visible": false,
            "visible_conditions": {
              "field_id": "contact_method",
              "operator": "equal_to",
              "value": "phone"
            },
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "pattern": null,
            "pattern_description": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          }
        ]
      },
      {
        "type": "Section",
        "key": "case",
        "data_name": "case",
        "label": "Case",
        "display": "inline",
        "description": null,
        "description_mode": null,
        "visible": true,
        "visible_conditions": null,
        "elements": [
          {
            "type": "DateField",
            "key": "received_on",
            "data_name": "received_on",
            "label": "Received on",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": "now"
          },
          {
            "type": "TextField",
            "key": "summary",
            "data_name": "summary",
            "label": "Summary",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "pattern": null,
            "pattern_description": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          },
          {
            "type": "SingleChoiceField",
            "key": "impact",
            "data_name": "impact",
            "label": "Who is affected?",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "allow_other": false,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null,
            "is_searchable": false,
            "is_searchable_mode": null,
            "choices": [
              {
                "label": "Only me",
                "value": "person"
              },
              {
                "label": "My team",
                "value": "team"
              },
              {
                "label": "The whole organization",
                "value": "organization"
              }
            ]
          },
          {
            "type": "BooleanField",
            "key": "blocked",
            "data_name": "blocked",
            "label": "Is work blocked?",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": true,
            "required_conditions": null,
            "visible": true,
            "visible_conditions": null,
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null,
            "third_option_enabled": false,
            "choices": [
              {
                "value": "yes",
                "label": "Yes"
              },
              {
                "value": "no",
                "label": "No"
              }
            ]
          },
          {
            "type": "CalculatedField",
            "key": "priority",
            "data_name": "priority",
            "label": "Priority",
            "display": {
              "style": "text"
            },
            "description": null,
            "description_mode": null,
            "required": false,
            "visible": true,
            "visible_conditions": null,
            "read_only": true,
            "calculate": "IF(!CHOICEVALUE($impact), null, IF(CHOICEVALUE($blocked) === \"yes\" || CHOICEVALUE($impact) === \"organization\", \"high\", IF(CHOICEVALUE($impact) === \"team\", \"normal\", \"low\")))",
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          },
          {
            "type": "CalculatedField",
            "key": "respond_by",
            "data_name": "respond_by",
            "label": "Respond by",
            "display": {
              "style": "date"
            },
            "description": null,
            "description_mode": null,
            "required": false,
            "visible": true,
            "visible_conditions": null,
            "read_only": true,
            "calculate": "DATEADD($received_on, IF($priority === \"high\", 1, IF($priority === \"normal\", 3, IF($priority === \"low\", 7, null))))",
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          },
          {
            "type": "TextField",
            "key": "business_impact",
            "data_name": "business_impact",
            "label": "Describe the business impact",
            "display": "default",
            "description": null,
            "description_mode": null,
            "required": false,
            "required_conditions": {
              "field_id": "priority",
              "operator": "equal_to",
              "value": "high"
            },
            "visible": false,
            "visible_conditions": {
              "field_id": "priority",
              "operator": "equal_to",
              "value": "high"
            },
            "read_only": false,
            "read_only_conditions": null,
            "default_value": null,
            "pattern": null,
            "pattern_description": null,
            "supporting_image": false,
            "supporting_image_path": null,
            "supporting_image_display": null
          }
        ]
      }
    ]
  }
}

Dans ce schéma, la key de chaque champ est identique à son data_name, pour que les conditions restent lisibles. Quand vous ajoutez des champs avec la CLI, elle génère des clés aléatoires.

Enregistrez le formulaire dans src/forms/registry.js en ajoutant une entrée au tableau forms :


Code
{
  id: 'case-intake',
  title: 'Case intake',
  description: 'Log a new support case.',
  loadSchema: () => import('./case-intake/schema.json'),
},

Démarrez l’application et le serveur de développement form0 :
```
Code
form0 serve --app src/forms/case-intake/schema.json
```
La CLI installe les dépendances au premier lancement, valide le schéma, surveille ses modifications et démarre le serveur Vite.
Ouvrez http://localhost:5173/case-intake et essayez le formulaire :
- Choisissez Email comme mode de contact. Le champ Email apparaît et devient obligatoire. Passez à Phone : le champ Phone le remplace.
- Choisissez My team et répondez No à Is work blocked?. Priority affiche normal, et Respond by tombe trois jours après Received on.
- Changez la réponse en Yes. Priority passe à high, Respond by avance au lendemain et Describe the business impact apparaît comme champ obligatoire.
Remplissez les champs obligatoires et soumettez le formulaire. Ouvrez la console de développement de votre navigateur pour voir l’enregistrement structuré que le starter affiche.

Comment ça marche

Champs conditionnels

Le champ Email est masqué par défaut. Ses conditions l’affichent, et le rendent obligatoire, lorsque le mode de contact est email :


Code
{
  "data_name": "email",
  "visible": false,
  "visible_conditions": {
    "field_id": "contact_method",
    "operator": "equal_to",
    "value": "email"
  },
  "required_conditions": {
    "field_id": "contact_method",
    "operator": "equal_to",
    "value": "email"
  }
}

Une condition sur un champ de choix compare la value du choix sélectionné, pas son libellé. Consultez Conditions et opérateurs.

Masquer un champ n’efface pas sa valeur. Si quelqu’un saisit une adresse e-mail puis passe à Phone, l’adresse reste dans les valeurs du formulaire. C’est à votre application de décider si les valeurs masquées doivent être conservées.

Priorité calculée

priority est un CalculatedField. Son expression calculate lit les réponses à Who is affected? et Is work blocked? :


Code
IF(
  !CHOICEVALUE($impact),
  null,
  IF(
    CHOICEVALUE($blocked) === "yes" || CHOICEVALUE($impact) === "organization",
    "high",
    IF(CHOICEVALUE($impact) === "team", "normal", "low"),
  ),
)

CHOICEVALUE() renvoie la valeur sélectionnée d’un champ de choix. Le premier IF() laisse la priorité vide tant que Who is affected? n’a pas de réponse.

Les expressions de cette page sont réparties sur plusieurs lignes pour rester lisibles. Dans le schéma, chacune tient sur une seule ligne. Si vous écrivez un calcul sur plusieurs lignes, indiquez son résultat avec SETRESULT() ou une instruction return explicite.

Date de réponse

respond_by ajoute un nombre de jours à received_on, selon la priorité :


Code
DATEADD(
  $received_on,
  IF($priority === "high", 1, IF($priority === "normal", 3, IF($priority === "low", 7, null))),
)

DATEADD() renvoie null lorsque le nombre de jours est vide : la date reste vide tant qu’il n’y a pas de priorité. "display": { "style": "date" } indique au renderer d’afficher le résultat comme une date.

Une condition pilotée par un calcul

Describe the business impact utilise le même type de condition que Email, mais il lit priority, qui est lui-même calculé :


Code
{
  "data_name": "business_impact",
  "visible": false,
  "visible_conditions": {
    "field_id": "priority",
    "operator": "equal_to",
    "value": "high"
  },
  "required_conditions": {
    "field_id": "priority",
    "operator": "equal_to",
    "value": "high"
  }
}

Cela fonctionne parce que le moteur exécute les calculs avant d’évaluer les conditions.

Ce qui vient de se passer

À chaque réponse modifiée, le renderer du starter l’a transmise au moteur form0. Le moteur a recalculé priority puis respond_by, dans l’ordre des dépendances, puis il a réévalué quels champs sont visibles et obligatoires. Le renderer s’est contenté d’afficher le résultat. Le même schéma produit le même comportement dans toute application qui utilise form0.

Pour aller plus loin :

Cycle d’évaluation : ce que fait une passe d’évaluation, et dans quel ordre.
Calculs et dépendances : comment le moteur ordonne les calculs qui dépendent les uns des autres.
Soumissions et connecteurs : où va l’enregistrement soumis dans le starter, et comment l’envoyer vers une base de données.

Edit this page

Last modified on October 28, 2026