Met regels werken

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:

Open

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:

Open

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.

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:

    •  

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.