Wat bedoel ik met een rekentool?

De afgelopen tijd ben ik veel bezig geweest met het maken van zogenaamde rekentools in Drupal. Deze rekentools zijn formulieren waarmee mensen iets uit kunnen rekenen. Bijvoorbeeld of ze in aanmerking komen voor subsidie en hoeveel subsidie ze dan mogelijk kunnen krijgen. De tools hoeft dus alleen maar berekeningen te maken en deze terug te koppelen aan de bezoeker. Het formulier wordt niet opgeslagen of verstuurd.

Waarom rekentools maken in Webforms?

Als je Drupal gebruikt zou je een rekentool zelf kunnen programmeren. Het nadeel hieraan is:

• Dat je moet kunnen programmeren
• Je alles zelf van scratch moet bouwen (zoals formuliervelden en achterliggende logica)

Het voordeel is dat je meer flexibiliteit hebt omdat je bij de Webform module soms tegen beperkingen aanloopt die niet snel of makkelijk op te lossen zijn.

Als je voor de Webform module kiest hoef je alleen maar de module te installeren en kun je aan de slag. Out of the box heb je al alle mogelijk formuliervelden (denk aan radio buttons, checkboxes en select velden) maar ook kun je condities instellen: wanneer een gebruiker kies voor optie A laat dan het veld B zien.

De juiste rechten

Zorg er eerst voor dat je de juiste rechten hebt. Je hebt namelijk rechten 'Edit webform Twig templates' nodig om iets in te kunnen vullen bij een 'Computed Twig' element.

Kun je dit niet zelf aanpassen? Vraag het dan aan de beheerder van je website.

Gebruik AJAX

Je zet AJAX aan door in het Computed Twig veld 'Automatically update the computed value using Ajax' aan te vinken. Hierdoor worden de waarden die een gebruiker invoert direct verwerkt en is het resultaat meteen zichtbaar. Dus als je bijvoorbeeld een veld hebt met 'kosten' en een veld met 'aantal uur' dan wordt de computed Twig 'berekening' (bijvoorbeeld kosten maal aantal uur) automatisch geüpdatet.

Let wel op dat dit ook voor problemen kan zorgen. Zoals dat het te vaak herberekenen ervoor zorgt dat de anti-spam maatregel in werking treedt en het formulier blokkeert.

Leer Twig

Als je computed Twig velden wil gebruiken is het uiteraard handig dat je de Twig syntax leert kennen. Er is een uitgebreide documentatiewebsite beschikbaar.

Een paar dingen die ik handig vond om te weten:

• Je kan zelf variabelen 'setten' met {% set variabele = 'tekst' %} en dus kun je dan weer (her)gebruiken in je berekening
• Als je een variabel wil tonen kan dat door {{ variabel }} te gebruiken (dus zonder procenttekens).
• Wanneer het gaat om een veld uit je webform dan gebruik je {{ data.veld_key }} waarbij veld_key de machinenaam is van het webform element dat je eerder hebt aangemaakt.
• Het handiger om een tekstveld element te gebruiken in plaats van een getal element omdat je dan dingen zoals een input mask kan gebruiken. Je moet dan wel de string converteren naar een integer omdat je er anders geen berekeningen op uit kan voeren. Dit doe je met door |number_format() achter het data element te zetten. Dus {{ data.kosten|number_format() - data.subsidie|number_format() }}

Gebruik een Text editor die de Twig Syntax herkent

Correcte en goed werkende Twig code schrijven kan lastig zijn. Vooral als je het in het veld doet bij het Computed Twig webform element. 

Zelf gebruik ik daarom de Sublime text editor en heb daarin de Twig package geïnstalleerd. Hierdoor krijgen de verschillende functies een eigen kleur en is het makkelijker om fouten te herkennen en te verbeteren.

Ik maak daarom altijd een apart bestand aan waarin ik de Twig code schrijf en kopieer deze dan naar het Webform element als ik het wil testen. Ook heb ik op deze manier een extra kopie van de code mocht deze om wat voor een reden verloren gaan in het Drupal Webform.

Vragen of tips

Heb je zelf nog vragen of tips wat betreft het maken van Rekentools met het Computed Twig element in Webforms? Laat het mij weten door hieronder een reactie achter te laten.