Formulier met (extra) opties in selectievakjes, keuzelijst en radio-velden

In dit voorbeeld maken we een deel-formulier waarbij een vaste groep keuzeopties dynamisch uitgebreid wordt op basis van logica-regels.

Deze functionaliteit kan op eenzelfde manier worden gebruikt voor de “radio”-, “keuzelijst”- en de “selectievakjes”-componenten.

Note

U kunt dit voorbeeld downloaden en importeren in Open Formulieren.

Download: dynamische-keuzelijsten.zip

Formulier maken

1. Maak een formulier aan met de volgende gegevens:

   • Naam: Dynamische keuzelijsten

2. Klik op het tabblad Variabelen. Klik hierbinnen op het tabblad Gebruikersvariabelen.

3. Voeg een variabele toe door op Variabele toevoegen link te klikken, en voer in:

   • Naam: Checkbox options

   • Datatype: Lijst (array)

   • Beginwaarde: vink “Gebruik ruwe JSON-invoer” aan en voer de JSON-array in:

     [
       [
         "option1",
         "Option 1"
       ],
       [
         "option2",
         "Option 2"
       ]
     ]
     

4. Klik op het tabblad Stappen en velden.

5. Klik aan de linkerkant op Stap toevoegen en selecteer Maak een nieuwe formulierdefinitie.

6. Onder de sectie (Herbruikbare) stapgegevens vul het volgende in:

   • Naam: Variabele selectievakjesopties

7. Scroll naar de sectie Velden.

8. Sleep een Selectievakje component op het witte vlak, vul de volgende gegevens in en druk daarna op Opslaan:

   • Label: Toon optie 3

9. Sleep een Selectievakjes component op het witte vlak, vul de volgende gegevens in en druk daarna op Opslaan:

   • Label: Variabele opties selectievakjes

   • Beschrijving: De beschikbare opties zijn afhankelijk van eerdere antwoorden.

   • Keuzeopties: Variabele

   • Opties-expressie:

     {
       "var": "checkboxOptions"
     }
     

   Deze referentie komt overeen met de sleutel van de eerder toegevoegde gebruikersvariabele.

10. Klik op het tabblad Logica en voeg een eenvoudige regel toe.

11. Kies als triggervoorwaarde:

    • Als “Variabele selectievakjesoptie: Toon optie 3 (toonOptie3)”

    • “is gelijk aan”

    • “de waarde”

    • “Ja”

12. Voeg een actie toe:

    • dan “zet de waarde van een variabele/component”

    • “Checkbox options (checkboxOptions)”

    • voer de volgende JsonLogic in:

      {
        "merge": [
          {
            "var": "checkboxOptions"
          },
          [
            [
              "option3",
              "Option 3"
            ]
          ]
        ]
      }
      

13. Klik onderaan op Opslaan om het formulier volledig op te slaan.

U kunt nu het formulier bekijken.

Note

Deze expressie gebruik de JsonLogic merge operatie om de bestaande gebruikersvariabele uit te breiden met extra keuzeopties. U kunt vrij gebruikersvariabelen combineren zolang de variabele voor de selectievakjes component een lijst van opties (waarde en label) bevat.