In dit voorbeeld bouw ik een tool waarmee een gebruiker de hoeveelheid subsidie kan berekenen die woningcorporaties ontvangen bij het verduurzamen van panden.

Het maken van Webform velden

Eerst maken we een webform en de benodigde elementen. Bij het aanmaken van elementen heb je de keuze tussen verschillende typen zoals tekstveld, nummer of keuzerondjes.

Wanneer je met getallen werkt lijkt het logisch om te kiezen voor een nummer element. Deze hebben echter ongewenste functionaliteit. Als je de focus op het nummer veld staat en je scrolt naar beneden of boven, om bijvoorbeeld de rest van het formulier te bekijken, dan wordt het getal verlaagd of opgehoogd. Dit is mij een aantal keer gebeurt zonder dat ik het door had dus vandaar dat ik kies voor tekstvelden met een input mask. Met een input mask kun je bepalen wat een gebruiker kan invoeren. Bij het aanmaken of bewerken van een tekstveld element kun je bij 'Form Display' kiezen wat voor een input mask je wilt gebruiken. Bij jaartal kies ik voor 'Custom...' en dan '9999'. Dat houdt in dat gebruikers 4 cijfers moeten invullen.

De elementen die ik het toegevoegd:

• Bouwjaar van het huis (tekstveld met input mask '9999')
• Het type huis: eengezinswoning of meergezinswoning (keuzerondjes)
• De compactheid van het gebouw (tekstveld met input mask '9,9')
• Hoeveel energie er nodig is in KwH (tekstveld met input mask '99')
• Hoeveel duurzame energie er wordt opgewekt wat altijd 0 of minder moet zijn (tekstveld met input mask '-99'

Verschillende resultaten laten zien op basis van de ingevulde waarden/keuzes van de gebruiker

Op basis van de waarden die de gebruiker invoert wordt een verschillende 'EPV'-waarde, de hoeveelheid subsidie per vierkante meter, getoond op de resultatenpagina. Als een gebruiker bijvoorbeeld het volgende invoert:

• Bouwjaar: 2018
• Type: eengezinswoning
• Compactheid: 0,8
• Energiebehoefte: 40
• Opgewekte energie: 0

Dan zal de EPV-waarde 1,25 euro zijn.

Maar als de gebruiker andere input levert moet de EPV-waarde ook veranderen. Bijvoorbeeld:

• Bouwjaar: 2019
• Type: meergezinswoning
• Compactheid: 0,6
• Energiebehoefte: 10
• Opgewekte energie: -20

Dan moet de EPV-waarde 1,15 euro zijn.

Eerst maken we een tekstveld in het webformulier dat de variabele EPV-waarde kan bevatten die we kunnen bijwerken. Dit veld, genaamd 'EPV-waarde', wordt ingesteld op privé onder het tabblad 'Geavanceerd'. Hierdoor wordt het veld niet op het formulier getoond voor de bezoeker. Ook is het verstandig het veld uit te schakelen zodat een beheerder tijdens het testen niet per ongeluk iets in kan voeren.

De standaardwaarde stellen we in op 'niet van toepassing'. Dit wordt getoond als de gebruikers waarden invoeren waardoor ze niet in aanmerking komen voor het ontvangen van de EPV-subsidie.

Nu kunnen we de waarde van het 'EPV-waarde'  veld aanpassen op basis van de invoer van de gebruiker. Dit doen we door, nadat het formulier is verzonden, verschillende handlers toe te voegen. Deze handlers maak je aan in het webform onder 'Instellingen > Emails/Handlers > Handler toevoegen'.

Bij het aanmaken of bewerken van de handler kun je in het veld 'Update the below submission data. (YAML)' de waarde van het 'EPV-waarde' veld overschrijven. Dit doen we door de sleutel van het veld te gebruiken wat je kan vinden in de tabel met elementen onder 'Build'. Het gaat dan om de tekst onder het kopje 'Sleutel' van het element dat je wil bewerken. Wij gebruiken de sleutel 'epv' en die overschrijven we door 'epv: 1,25 euro' in het 'Update the below submission data. (YAML)' veld te zetten.

We willen er alleen voor zorgen dat de waarde overschreven wordt als er aan bepaalde voorwaarden wordt voldaan. Dit kunnen we toevoegen onder de 'Voorwaarden' tab bij de Handler. Eerst geven we aan dat de status 'Ingeschakeld' moet zijn en dat aan alle voorwaarden moet worden voldaan voordat de handler uitgevoerd wordt.

Hierna voegen we de volgende condities toe:

• Het 'Bouwjaar' moet 'Kleiner dan' het getal '2019' zijn. Dit betekent dat de EPV waarde alleen geupdate wordt als er een getal kleiner dan 2019 is ingevoerd door de gebruiker.
• Het 'Type woning' moet met 'Value is' ingesteld zijn op eensgezinswoning
• 'Compactheid' moet 'Kleiner dan' het getal '1' zijn
• De 'Warmtebehoefte' moet 'Kleiner dan' het getal '43' zijn
• De 'Opgewekte energie moet 'Kleiner dan of gelijk aan' het getal '0' zijn

Alleen wanneer een gebruiker waarden in het webform invult die voldoen aan deze voorwaarden wordt deze handler getriggerd en de 'EPV-waarde' bijgewerkt. Nu is het mogelijk om meerdere handlers toe te voegen die op basis van andere condities de 'EPV-waarde' updaten.

Complexe berekening/formule

De rekentool kent ook nog een ingewikkelde formule die in werking treedt als er bij de 'Compactheid' meer dan '1' wordt ingevoerd. De Warmtebehoefte moet dan namelijk (43 + 40 * (compactheid - 1)) zijn. Stel je voor date e gebruiker bij compactheid 1,5 invoert dan moet de ingevulde waarde bij de ' Warmtebehoefte' lager of gelijk zijn aan (43 + 40 * (1,5 - 1)).

Om deze formule uit te voeren in een webform maken we gebruik van een 'Computed Twig' element en noemen we deze 'Formule' met als sleutel 'formule'. Met dit veld kun je namelijk berekeningen uitvoeren en het resultaat opslaan in het veld. Bij het aanmaken van een Computed Twig element voer je bij het 'Computed value/markup' veld de formule in volgens het volgende format {{ formule }}. In dit geval {{ (43 + 40 * (data.compactheid - 1)) }}.

Omdat het resultaat van de formule is opgeslagen in het veld 'Formule' kunnen we dit gebruiken in de condities van de voorwaarden van de handlers. We kunnen een handler aanmaken waarbij de 'Warmtebehoefte' kleiner dan of gelijk moet zijn aan de resultaten van het 'Formule' veld. Dit doen we door dit resultaat aan te roepen met de volgende token: [webform_submission:values:formule].

Resultaten aan de gebruiker tonen

Nu moeten we er nog voor zorgen dat de gebruiker de uitkomsten van de rekentool te zien krijgt. Dit doen we met de 'EPV-waarde' die we via de handlers hebben bijgewerkt op basis van de ingevulde velden van de gebruiker.

Zodra de gebruiker op de submit button klikt is het mogelijk een bericht te tonen. Deze stellen we in onder 'Instellingen > Confirmation' in het webform. In het 'Bevestegingsbericht' kun je de 'EPV-waarde' tonen door gebruik te maken van de volgende token '[webform_submission:values:epv]'. Zoals je kan zien wordt hier de 'epv' sleutel gebruikt die we hebben bijgewerkt via de handler. Het bevestigingsbericht kunnen we verder nog aanvullen met uitleg of door de andere ingevulde waarden te herhalen.

Drupal + Webform = Low code rekentool configurator

Zoals je hebt kunnen ontdekken is Drupal in combinatie met de Webform module uitermate geschikt om rekentools met complexe logica bij elkaar te klikken. Door gebruik te maken van handlers, condities, tokens en het Computed Twig veld heb je als ambitieuze site-builder weinig beperkingen in het maken van dergelijke tools.

Heb je vragen of opmerkingen over het bovenstaande? Laat dan hieronder een reactie achter.