Formulierveld eigenschappen

Concept

Een formulier wordt opgebouwd als een JSON. Het bestaat enerzijds uit algemene structuurelementen op formulierniveau (label, key, secties, computed expressions) en anderzijds uit formuliervelden en hun specifieke eigenschappen.

Algemene structuurelementen

Voorbeeld 1: formulier met eenvoudige (platte) structuur, twee multiline tekstvelden en een computed expression (formulier logica).

CODE

{
  "label": "vraag",
  "name": "vraag",
  "fields": [
    {
      "name": "uwVraag",
      "label": "Vraag:",
      "type": "multiline"
    },
    {
      "name": "antwoord",
      "label": "Antwoord:",
      "type": "multiline",
      "computedShow": [
        "beantwoordVraag"
      ]
    }
  ],
  "computedExpressions": {
    "beantwoordVraag": "Boolean(currentTask) && currentTask.taskDefinitionKey === 'Activity_1j3wibr'"
  }
}

Voorbeeld 2: formulier met twee secties, waarvan de eerste naam en e-mailadres bevat, en de tweede een keuze uit drie opties. De functionaliteit validatie per sectie is ingesteld.

JSON

{
  "label": "beoordeling",
  "name": "beoordeling",
  "sectionBasedValidation": true,
  "sections": [
    {
      "name": "sectie1",
      "label": "sectie 1",
      "fields": [
        {
          "name": "naam",
          "label": "naam",
          "type": "text"
        },
        {
          "name": "emailadres",
          "label": "emailadres",
          "type": "email"
        }
      ]
    },
    {
      "name": "sectie2",
      "label": "sectie 2",
      "fields": [
        {
          "name": "keuzeMenu",
          "label": "keuze menu",
          "type": "choice",
          "choices": [
            {
              "name": "zalm",
              "label": "zalm"
            },
            {
              "name": "burger",
              "label": "burger"
            },
            {
              "name": "veggie",
              "label": "veggie"
            }
          ]
        }
      ]
    }
  ]
}

Formuliervelden

Bij de JSON-definitie van formuliervelden maken we een onderscheid tussen algemene eigenschappen die gemeenschappelijk zijn voor alle elementtypes (denk aan naam, key, type, condities), en specifieke eigenschappen per elementtype (bijvoorbeeld conditioneel inschakelen van een keuzeoptie in een meerkeuzeveld).

Algemene eigenschappen formulier elementen

Specifieke eigenschappen per elementtype

Voorbeeld 1: detail van een formulierveld met type getal. Hier is ook een validatieregel aan toegevoegd.

CODE

{
  "name": "geefGetal",
  "label": "Geef een getal tussen 10 en 20",
  "type": "number",
  "conditions": [
    {
      "name": "getalTussen10En20",
      "level": "error",
      "expression": "$ !== undefined ? $ > 10 && $ < 20 : true",
      "errorMessage": "Getal moet tussen 10 en 20 liggen."
    }
  ]
},

Voorbeeld 2: detail van een formulierveld met type keuze. Hier is één optie standaard aangevinkt.

CODE

{
  "name": "keuzeMenu",
  "label": "keuze menu",
  "type": "choice",
  "default": "burger",
  "choices": [
    {
      "name": "zalm",
      "label": "zalm"
    },
    {
      "name": "burger",
      "label": "burger"
    },
    {
      "name": "veggie",
      "label": "veggie"
    }
  ]
}

Voorbeeld 3: detail van een veldengroep

CODE

{
   "name": "identiteit",
   "label": "identiteit",
   "type": "fieldset",
   "fields": [
     {
       "name": "naam",
       "label": "naam",
       "type": "text"
     },
     {
       "name": "voornaam",
       "label": "voornaam",
       "type": "text"
     }
   ]
}