In this example, I'm building a tool that allows a user to calculate the amount of subsidy that housing associations receive when renovating buildings.

Creating Webform Fields

First, we create a webform and the necessary elements. When creating elements, you have the choice between different types such as text fields, numbers, or radio buttons.

When working with numbers, it may seem logical to choose a number element. However, these have unwanted functionality. If you have the focus on the number field and scroll up or down, for example, to view the rest of the form, the number is decreased or increased. This happened to me a few times without realizing it, which is why I opt for text fields with an input mask. With an input mask, you can determine what a user can enter. When creating or editing a text field element, you can choose what input mask to use under 'Form Display.' For the year, I choose 'Custom...' and then '9999.' This means users must enter 4 digits.

The elements I have added are:

• Year of construction of the house (text field with input mask '9999')
• Type of house: single-family or multi-family (radio buttons)
• The compactness of the building (text field with input mask '9.9')
• Amount of energy required in kWh (text field with input mask '99')
• Amount of sustainable energy generated, which should always be 0 or less (text field with input mask '-99')

Displaying Different Results Based on User Input/Choices

Based on the values the user enters, a different 'EPV' value, the subsidy amount per square meter, is displayed on the results page. For example, if a user enters the following:

• Year of construction: 2018
• Type: single-family house
• Compactness: 0.8
• Energy requirement: 40
• Generated energy: 0

Then the EPV value will be 1.25 euros.

But if the user provides different input, the EPV value should also change. For example:

• Year of construction: 2019
• Type: multi-family house
• Compactness: 0.6
• Energy requirement: 10
• Generated energy: -20

Then the EPV value should be 1.15 euros.

First, we create a text field in the webform that can contain the variable EPV value that we can update. This field, named 'EPV value,' is set to private under the 'Advanced' tab. This means the field is not shown on the form to the visitor. It's also advisable to disable the field so that an administrator can't accidentally enter something during testing.

We set the default value to 'not applicable.' This is displayed when users enter values that make them ineligible for EPV subsidy.

Now we can adjust the value of the 'EPV value' field based on the user's input. We do this by adding various handlers after the form is submitted. These handlers are created in the webform under 'Settings > Emails/Handlers > Add Handler.'

When creating or editing the handler, you can override the value of the 'EPV value' field in the 'Update the below submission data. (YAML)' field. We do this by using the key of the field, which you can find in the elements table under 'Build.' It's the text under the 'Key' heading of the element you want to edit. We use the key 'epv' and override it by putting 'epv: 1.25 euros' in the 'Update the below submission data. (YAML)' field.

We want to ensure that the value is overridden only if certain conditions are met. We can add this under the 'Conditions' tab of the Handler. First, we indicate that the status must be 'Enabled' and that all conditions must be met before the handler is executed.

Next, we add the following conditions:

• The 'Year of construction' must be 'Less than' the number '2019.' This means the EPV value is updated only if a number less than 2019 is entered by the user.
• The 'Type of house' must be set to 'single-family' using 'Value is.'
• 'Compactness' must be 'Less than' the number '1.'
• The 'Heating requirement' must be 'Less than' the number '43.'
• The 'Generated energy' must be 'Less than or equal to' the number '0.'

Only when a user enters values in the webform that meet these conditions will this handler be triggered, and the 'EPV value' will be updated. Now it's possible to add multiple handlers that update the 'EPV value' based on other conditions.

Complex Calculation/Formula

The calculator tool also has a complex formula that comes into play when 'Compactness' is greater than '1.' The heating requirement must be (43 + 40 * (compactness - 1)). For example, if the user enters 1.5 for compactness, the entered value for 'Heating requirement' must be lower or equal to (43 + 40 * (1.5 - 1)).

To execute this formula in a webform, we use a 'Computed Twig' element and name it 'Formula' with the key 'formula.' With this field, you can perform calculations and store the result in the field. When creating a Computed Twig element, you enter the formula in the 'Computed value/markup' field in the following format {{ formula }}. In this case, {{ (43 + 40 * (data.compactness - 1)) }}.

Because the result of the formula is stored in the 'Formula' field, we can use it in the conditions of the handlers' requirements. We can create a handler where the 'Heating requirement' must be less than or equal to the result of the 'Formula' field. We do this by calling this result with the following token: [webform_submission:values:formula].

Displaying Results to the User

Now we need to ensure that the user sees the results of the calculator tool. We do this with the 'EPV value' that we have updated via the handlers based on the user's input fields.

As soon as the user clicks the submit button, it's possible to display a message. We set this up under 'Settings > Confirmation' in the webform. In the 'Confirmation message,' you can display the 'EPV value' by using the following token '[webform_submission:values:epv]'. As you can see, we use the 'epv' key that we updated via the handler. The confirmation message can be further supplemented with explanations or by repeating the other entered values.

Drupal + Webform = Low-code Calculator Configurator

As you have discovered, Drupal in combination with the Webform module is extremely suitable for creating calculators with complex logic. By using handlers, conditions, tokens, and the Computed Twig field, you have few limitations as an ambitious site builder when creating such tools.

If you have any questions or comments about the above, please leave a comment below.

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.