| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Over regels
Met regels kan je logic logica 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.
Algemene Werkwijze:
Als je op een component klikt, zie je een reeks iconen verschijnen:
...
Als je er op klikt krijg je een nieuw scherm met een lijst van alle componenten in het formulier.
Een groene bol bij een component geeft aan dat voor de deze component een regel bestaat:
...
En ook bij de actie die je moet volgen zijn er heel wat keuzes:
...
Met deze 3 keuzelijsten samen kan je dus dingen doen als:
...
Via “Add condition” kan je verschillende voorwaarden toevoegen, en deze combinern combineren met AND/OR
Via “Add Statement” kan je verschillende taken laten uitvoeren als er aan een voorwaarde is voldaan.
...
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:
...
In dit voorbeeld is “Receptie” een keuzelijst in het formulier met de opties “Ik blijf graag voor de receptie/Ik blijf niet voor de receptie”.
Een veld opvullen met de waarde van een ander veld
Voorbeeld: Als de gebruiker zijn email invult, willen we die prefillen in de notificatiecomponent die we gebruiken om de gebruiker een bevestigingsemail te sturen:
...
Hierbij is “Notificatie” de naam van de notificatiecomponent in het formulier.
Visual editor vs. code editor
...
Dit is handig om meer complexe regels te maken, maar dit vereist enige kennis van javascript. Voor doorsnee gebruik raden we dit dan ook niet aan.
...
Hiervoor maak je dus een regel aan op de “Verzenden” knop, ga je naar de Code editor en kiest als actie “Navigation”
...
Regels die je kan instellen op de Datumkiezer
1. Selecteer de datum component, en ga naar de rule editor:
...
2. Maak een nieuwe rule aan voor het datumveld
...
3. Ga naar de code editor:
...
4. Voeg de gewenste functie toe
Voorbeeld:
...
Volgende functies kan u gebruiken bij “Initialise” van het datumveld:
Bepaalde dagen van de week niet toelaten;
disableWeekdaysOnDatePicker(this,[0,6],”U kan geen
${weekday}kiezen”);dit voorbeeld wil zeggen: zaterdag en zondag niet toegelaten
0 is zondag, 1 is maandag, 6 is zaterdag etc U kan kiezen welke dagen u niet wil toelaten.
De gebruiker kan de dag wel kiezen in de datepicker (niet doorkruist) maar krijgt dan een foutmelding
U kan de foutboodschap optioneel meegeven, met “weekday” als parameter
resultaat:
disableWeekdaysOnDatePicker(this,[0]); → enkel zondag niet toegelaten
setNewMinimumDateOnDatePicker(this,"['15/06/2023']");
alle data voor 15/06 worden doorkruist in de datepicker
OPGELET: niet te combineren met de standaard functionaliteit voor dit veld om een minimum in te geven
setNewMaximumDateOnDatePicker(this,"['30/06/2023']");
alle data na 30/06 worden doorkruist in de datepicker
OPGELET: niet te combineren met de standaard functionaliteit voor dit veld om een maximum in te geven
setNewDynamicMaxDateOnDatePicker(this,50);
Enkel data tot vandaag + 50 dagen worden toegelaten
Om 6 maanden in de toekomst toe te laten is dus: setNewDynamicMaxDateOnDatePicker(this,183);
OPGELET: niet te combineren met de standaard functionaliteit voor dit veld om een maximum in te geven
setNewDynamicMinDateOnDatePicker(this,x,”Foutboodschap”);
Enkel data vanaf vandaag + x dagen worden toegelaten
x mag ook negatief zijn (bv tot 5 dagen in het verleden)
Om enkel data in de toekomst toe te laten is dus : setNewDynamicMinDateOnDatePicker(this,0, ”U kan geen datum uit het verleden kiezen”);
OPGELET: niet te combineren met de standaard functionaliteit voor dit veld om een minimum in te geven
Bepaalde dagen niet toelaten:
disableDatesOnDatePicker(this,"['22/06/2023','23/06/2023']", ”${date}is uitzonderlijk niet toegelaten”);dit voorbeeld: 22 en 23/6 worden niet toegelaten
U kan een reeks data meegeven
De gebruiker kan de dag wel kiezen in de datepicker (niet doorkruist) maar krijgt dan een foutmelding
U kan de foutboodschap zelf meegeven, met de datum als een parameter
Feestdagen niet toelaten
setHolidaysDisabledOnDatePicker(this, true,"${holiday} kan u niet kiezen");Alle Belgische feestdagen worden uitgesloten
De gebruiker kan de dag wel kiezen in de datepicker (niet doorkruist) maar krijgt dan een foutmelding
U kan een aangepaste foutmelding meegeven, met de naam van de feestdag als parameter
voorbeeld:
URL parameters doorgeven aan een formulier
Stel dat je bepaalde velden in een formulier wil prefillen, door een parameter die je al meegeeft in de url van het formulier.
Voorbeeld: je wil een veld “naam” op een formulier invullen door de naam al mee te geven in de url.
Op het formulierveld “Naam”, maak je een regel aan:
gebruik de functie “getUrlParam”
De input voor deze functie is de naam van de url parameter, in dit geval “naam”
Als het formulier opent, gebeurt de “Initialise” actie voor het veld “Naam”, en zal het systeem kijken naar de waarde van de urlParameter “naam”, en deze invullen in het tekstveld.
...
Open je het formulier met deze url:
https://dv.formulieren-ti.vlaanderen.be/content/forms/af/vlaamse-overheid/demo/test/url-params.html?naam=Peter met achteraan ?naam=Peter, dan is dit het resultaat:
...
Je kan ook op verschillende velden een gelijkaardige regel zetten, en dus verschillende velden prefillen met waardes die je meegeeft via url parameters.