Crea un modulo di apertura pratiche

ReactVite

In questa guida crei un modulo di apertura pratiche di supporto e lo esegui nello starter React e Vite. Il modulo ha:

campi di contatto che compaiono, e diventano obbligatori, in base al metodo di contatto preferito;
una priorità calcolata dalle risposte;
una data di risposta calcolata dalla priorità;
un campo sull'impatto per l'attività, obbligatorio solo per le pratiche ad alta priorità.

Tutto questo comportamento sta in un unico schema JSON. Il codice dell'applicazione si limita a registrare il modulo.

Tempo: circa 15 minuti.

Prima di iniziare

Node.js 22.19.0+
form0-cli, installato con npm install --global form0-cli

Lo starter React + Vite include i pacchetti form0 necessari. Se usi un'applicazione esistente, servono almeno form0-core 0.4.1 e form0-react 0.2.2. Segui Installazione e rendering con React per installarli o aggiornarli prima di copiare lo schema.

Crea il modulo

Crea un'app web con lo starter:
```
Code
form0 init case-intake-app
```
Scegli App web, poi React + Vite. Quindi entra nella cartella del progetto:
```
Code
cd case-intake-app
```

Crea src/forms/case-intake/schema.json con questo schema:


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
          }
        ]
      }
    ]
  }
}

In questo schema la key di ogni campo coincide con il suo data_name, così le condizioni restano facili da leggere. Quando aggiungi campi con la CLI, vengono generate chiavi casuali.

Registra il modulo in src/forms/registry.js aggiungendo una voce all'array forms:


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

Avvia l'app e il server di sviluppo di form0:
```
Code
form0 serve --app src/forms/case-intake/schema.json
```
La CLI installa le dipendenze al primo avvio, valida lo schema, ne controlla le modifiche e avvia il server Vite.
Apri http://localhost:5173/case-intake e prova il modulo:
- Scegli Email come metodo di contatto. Compare il campo Email, obbligatorio. Passa a Phone e il campo Phone lo sostituisce.
- Scegli My team e rispondi No a Is work blocked?. Priority mostra normal e Respond by cade tre giorni dopo Received on.
- Cambia la risposta in Yes. Priority diventa high, Respond by si sposta al giorno successivo e Describe the business impact compare come campo obbligatorio.
Compila i campi obbligatori e invia il modulo. Apri la console per sviluppatori del browser per vedere il record strutturato che lo starter registra.

Come funziona

Campi condizionali

Il campo Email è nascosto per impostazione predefinita. Le sue condizioni lo mostrano, e lo rendono obbligatorio, quando il metodo di contatto è 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"
  }
}

Una condizione su un campo a scelta confronta il value della scelta selezionata, non la sua etichetta. Vedi Condizioni e operatori.

Nascondere un campo non ne cancella il valore. Se qualcuno inserisce un indirizzo email e poi passa a Phone, l'indirizzo resta nei valori del modulo. Decidi nella tua applicazione se i valori nascosti vanno conservati.

Priorità calcolata

priority è un CalculatedField. La sua espressione calculate legge le risposte a Who is affected? e Is work blocked?:


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

CHOICEVALUE() restituisce il valore selezionato di un campo a scelta. Il primo IF() lascia la priorità vuota finché Who is affected? non ha una risposta.

Le espressioni in questa pagina sono divise su più righe per leggibilità. Nello schema ognuna sta su una sola riga. Se scrivi un calcolo su più righe, fornisci il risultato con SETRESULT() o un'istruzione return esplicita.

Data di risposta

respond_by aggiunge un numero di giorni a received_on, in base alla priorità:


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

DATEADD() restituisce null quando il numero di giorni è vuoto, quindi la data resta vuota finché non c'è una priorità. "display": { "style": "date" } indica al renderer di mostrare il risultato come data.

Una condizione guidata da un calcolo

Describe the business impact usa lo stesso tipo di condizione di Email, ma legge priority, che a sua volta è calcolato:


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"
  }
}

Funziona perché il motore esegue i calcoli prima di valutare le condizioni.

Cosa è appena successo

A ogni risposta modificata, il renderer dello starter l'ha passata al motore di form0. Il motore ha ricalcolato priority e poi respond_by, in ordine di dipendenza, e poi ha rivalutato quali campi sono visibili e obbligatori. Il renderer si è limitato a mostrare il risultato. Lo stesso schema produce lo stesso comportamento in qualsiasi applicazione che usa form0.

Per approfondire:

Ciclo di valutazione: cosa fa un passaggio di valutazione, e in quale ordine.
Calcoli e dipendenze: come il motore ordina i calcoli che dipendono l'uno dall'altro.
Invii e connettori: dove finisce il record inviato nello starter e come mandarlo a un database.

Edit this page

Last modified on October 28, 2026