4. Variablen

4. Variablen

Organisation

‣
Aufbau und Nutzer

Erstellen & Versenden

‣
Templates
‣
Formulare
‣
Inhaltsblöcke und Formularfelder

Sicherheit

‣
Login

API

‣
Integrationen

Rules Engine

‣
Erste Schritte
‣
Bedingte Sichtbarkeit

4. Variablen

Regeln als Variablen

In manchen Fällen ist es sinnvoll, Regeln nicht pro Block zu definieren, sondern als formularweite JavaScript Variable anzulegen. Eine solche Variable kann wiederum in einzelnen Blöcken abgefragt werden, um deren Bedingte Sichtbarkeit zu bestimmen.

Dies ist besonders sinnvoll für Regeln, die für viele Blöcke relevant sind, und / oder deren Berechnung aufwändiger ist.

Darüber hinaus kann das Ergebnis der Regel-Berechnung als Variable in Text-Blöcken verwendet werden.

Eine Variable erstellen:

  1. Klicken Sie auf den Reiter Regeln am rechten Bildschirmrand.
  2. Klicken Sie anschließend auf das Plus-Zeichen, um eine neue Regel zu erstellen.
    3. image
  3. Wählen Sie in der Maske den Typ JavaScript Variable.
  4. Vergeben Sie einen kurzen, aber ausdrucksstarken Namen für die neue Regel.
  5. Klicken Sie nun auf Erstellen.
    6. image
  6. Anschließend öffnet sich ein Code-Editor, in welchem Sie mit JavaScript eine Regel formulieren können.

Beispiele im Formular:

JavaScript Variablen für Bedingte Sichtbarkeit nutzen:

Anhand des payment_details Blocks werden Sie nun zunächst lernen, wie eine JavaScript Variable für die Bedingte Sichtbarkeit verwendet werden kann.

Legen Sie dazu, wie zuvor beschrieben, eine JavaScript Variable has_to_pay an.

Das Ziel ist, zu überprüfen, ob der Teilnehmer einem der Besuchertypen regular, vip, oder speaker angehört oder ob er einen Workshop gebucht hat. Beides führt dazu, dass der Teilnehmer eine Teilnahmegebühr zahlen muss und die Zahlungsdaten als Pflichtfeld angezeigt werden. Versehen Sie dafür die Variable has_to_pay mit folgendem Code:

const payingAttendees = ["regular", "vip", "speaker"];

const isPayingAttendee = payingAttendees.includes(blocks.registration_type.selectedOption.slug);

const workshopSelected = blocks.workshop_selection.anyOptionSelected();

isPayingAttendee || workshopSelected;
icon
selectedOption ist fester Bestandteil der Rules Engine API und gibt für Radio-Blöcke die ausgewählte Option zurück.
icon
slug ist fester Bestandteil der Rules Engine API und gibt den Slug einer Auswahloption zurück.

Es wird also zunächst geprüft, ob der Slug des gewählten Besuchertyps regular, vip, oder speaker lautet.

icon
anyOptionSelected() ist fester Bestandteil der Rules Engine API und gibt für Checkbox-Blöcke Auskunft, ob mindestens eine Auswahloption ausgewählt ist

Hier wird also geprüft, ob der Besucher mindestens einen der angebotenen Workshops ausgewählt hat.

Anschließend können Sie in der Bedingten Sichtbarkeit des Blockes payment_details das Ergebnis der JavaScript Variable abfragen:

tokens.has_to_pay;
icon
tokens ist fester Bestandteil der Rules Engine API und ermöglicht den Zugriff auf alle von Ihnen definierten JavaScript Variablen nach dem Schema tokens.<Name der Variable>.

JavaScript Variablen im Text referenzieren:

icon
JavaScript Variablen können ähnlich wie Platzhalter auch direkt in Text-Blöcke integriert werden.

Legen Sie hierfür zunächst eine neue JavaScript Variable mit dem Namen shirt_text an.

Fügen Sie nun den folgenden Code ein, um den Vornamen, Nachnamen und den Besuchertyp des Besuchers zu einem String zusammenzusetzen: 

blocks.first_name.value + " " + blocks.last_name.value + ": " + blocks.registration_type.selectedOption.name + " Attendee"
icon
value ist fester Bestandteil der Rules Engine API und ermöglicht für Texteingabe-Blöcke den Zugriff auf den eingegebenen Text.
icon
name ist fester Bestandteil der Rules Engine API und gibt für Radio und Checkbox-Blöcke den Anzeige-Text der entsprechenden Auswahloption zurück.

Klicken Sie anschließend in den Text-Block, den Sie zuvor zum Anzeigen des T-Shirt Aufdrucks angelegt haben (Slug: shirt_text), und fügen Sie die Variable am Ende des Textes ein.

image

Die JavaScript Variable wird nun gelb unterlegt im Text angezeigt.

Abschließend möchten Sie nun auch die Teilnahmegebühr anzeigen, die sich für jeden Teilnehmenden individuell aus dem gewählten Besuchertyp und der Anzahl ausgewählter Workshops ergibt. So soll der reguläre Preis 300 Euro betragen, der VIP-Preis 400 Euro und der Preis für Vortragende 100 Euro, während Studierende und Helfer keine Grundgebühr zahlen. Zusätzlich sollen für jeden gebuchten Workshop weitere 50 Euro hinzukommen.

Erstellen Sie hierfür nun eine weitere Variable price mit folgendem JavaScript Code:

const base_prices = {
    "regular": 300,
    "vip": 400,
    "speaker": 100,
    "volunteer": 0,
    "student": 0 
};

const registration_type = blocks.registration_type.selectedOption.slug;
const number_of_workshops = blocks.workshop_selection.selectedOptions.length;
const workshop_price = 50 * number_of_workshops;
const total_price = base_prices[registration_type] + workshop_price;

total_price;
icon
selectedOptions ist fester Bestandteil der Rules Engine API und gibt für Checkbox-Blöcke alle ausgewählten Auswahloptionen zurück.

Fügen sie die Variable price anschließend wie zuvor in den Text-Block price_text ein.