Over regels
Met regels kan je logic inbouwen in het formulier:
als een gebruiker x kiest bij een bepaalde vraag, toon/verberg dan andere velden van het formulier
als een bepaald veld wordt aangepast, maak dan andere velden leeg
etc.
Werkwijze:
Als je op een component klikt, zie je een reeks iconen verschijnen:
De meest linkse, de steeksleutel, gebruik je om de eigenschappen van de component in te stellen.
De tweede, het hamertje, gebruik je om regels te beheren.
Als je er op klikt krijg je een nieuw scherm met een lijst van alle componenten in het formulier.
Een groene bol geeft aan dat voor de component een regel bestaat:
Als je op een component met een groene bol klikt krijg je de regels te zien die bestaan:
Om voor een component een regel te maken klik je eerst op de component, en dan op “Create”
Je krijgt dan een visuele editor waarmee je een regel kan instellen:
In de eerste dropdown heb je allerlei opties:(standaard: WHEN)
Ook bij de “select state” zijn er een aantal keuzes:
En ook bij de actie die je moet volgen zijn er heel wat keuzes:
Met deze 3 keuzelijsten kan je dus dingen doen als:
Wanneer (dit veld) gelijk is aan (een string, een ander veld, een waarde in een dropdown) toon dan (een ander veld)
Wanneer (dit veld) wordt veranderd dan “Clear value” van (een ander veld)
Via “Add condition” kan je verschillende voorwaarden toevoegen, en deze combinern met AND/OR
Via “Add Statement” kan je verschillende taken laten uitvoeren als er aan een voorwaarde is voldaan.
Velden tonen op basis van een vraag
In dit voorbeeld vragen we de gebruiker:
blijf je voor de receptie of niet
Als hij “Ja” zegt willen we extra vragen tonen, anders niet.
Dit kan door deze regel aan te maken op het optionele veld met de vragen over de receptie:
Een veld opvullen met de waarde van een ander veld
Als de gebruiker zijn email invult, willen we die prefillen in de notificatiecomponent die we gebruiken om de gebruiker een bevestigingsemail te sturen:
Visual editor vs. code editor
Als je een regel aan het maken bent zie je rechts bovenaan staan “Visual Editor”
Als je dit verandert naar “Code editor” krijg je een meer technische vertaling van de regel te zien.
Dit is handig om meer complexe regels te maken, maar vereist enige kennis van javascript. Voor doorsnee gebruik raden we dit dan ook niet aan.
Let op! Eens je gekozen hebt voor “Code editor” kan je niet meer terug naar de “Visual editor” voor deze regel.
Hieronder enkele gevallen waar de “code editor” van pas kan komen
De knop “Verzenden” pas tonen in de laatste stap van een multistep formulier
Meestal wil je dat pas in de laatste stap van een multistep formulier de gebruiker het formulier kan indienen.
Dit kan je doen door deze regel toe te voegen aan de Verzenden knop:
this.visible = wizardpanel.navigationContext.isLastItem;
Hiervoor maak je dus een regel aan op de knop, ga je naar de Code editor en kiest als actie “Navigation”
