Over regels
Met regels kan je 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:
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 bij een component geeft aan dat voor deze 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 samen 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 combineren 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:
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
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 dit 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 “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:
