3. Bedingte Sichtbarkeit

3. Bedingte Sichtbarkeit

Organisation

‣
Aufbau und Nutzer

Erstellen & Versenden

‣
Templates
‣
Formulare
‣
Inhaltsblöcke und Formularfelder

Sicherheit

‣
Login

API

‣
Integrationen

Rules Engine

‣
Erste Schritte
‣
Bedingte Sichtbarkeit

3. Bedingte Sichtbarkeit

Regeln für Bedingte Sichtbarkeit

icon
In diesem Abschnitt werden Sie lernen, wie Sie mit dynamischen Regeln die Sichtbarkeit einzelner Blöcke während des Ausfüllens steuern können.

Eine Regel für Bedingte Sichtbarkeit erstellen:

  1. Wählen Sie zunächst den Block aus, für den Sie eine Bedingte Sichtbarkeitsregel implementieren wollen.
  2. Aktivieren Sie in den Blockeinstellungen den Schalter Bedingte Sichtbarkeit.
    3. image
  3. Anschließend öffnet sich ein Code-Editor, in welchem Sie mit JavaScript eine Sichtbarkeitsregel formulieren können.
    4. icon
    Im Code-Editor können Sie beliebige JavaScript Funktionalität implementieren. Neben der Unterstützung von Auto-Complete bietet der Editor Ihnen außerdem nützliche Debug-Informationen, wie eine Übersicht über alle Elemente des Dokuments und die Ausgabe von Berechnungsergebnissen oder Fehlermeldungen in Echtzeit.
  1. Die Bedingte Sichtbarkeit eines Blockes kann jederzeit durch Klicken des Buttons Bedingte Sichtbarkeit in den Blockeinstellungen weiter angepasst werden.
    2. image

Beispiele im Formular:

Der erste Block, der mit einer Bedingten Sichtbarkeit versehen werden soll ist der Datei-Upload-Block für Studienbescheinigungen mit dem Slug cert_enrollment. Dieser soll nur Studierenden angezeigt werden. Folgen Sie dafür zunächst den oben genannten Schritten 1 bis 3, um die Bedingte Sichtbarkeit für diesen Block zu aktivieren. Im Code-Editor kann nun anhand von JavaScript-Code eine Regel formuliert werden: 

blocks.registration_type.options.student.selected;

Die Bestandteile des Code-Snippets kurz erklärt:

icon
blocks ist ein fester Bestandteil der Rules Engine API und ermöglicht den Zugriff auf alle Blöcke eines Formulars anhand ihrer Slugs.
icon
registration_type ist der Slug des Radio-Blocks, mit dem Teilnehmende ihren Besuchertyp wählen können. Alle Blöcke können über ihren Slug nach dem Schema blocks.<slug> angesprochen werden.
icon
options ist ebenfalls ein fester Bestandteil der Rules Engine API und ermöglicht für Radio- und Checkbox-Blöcke Zugriff auf alle Auswahloptionen.
icon
student ist der Slug einer konkreten Auswahloption. Auswahloptionen können ähnlich wie Blöcke ebenfalls über ihre Slugs nach dem Schema options.<slug> angesprochen werden.
icon
selected ist ebenfalls fester Bestandteil der Rules Engine API und gibt für die jeweilige Auswahloption zurück, ob diese gerade ausgewählt ist, oder nicht.

Es wird also aus allen Blöcken (blocks), für den Block mit dem Slug registration_type überprüft, ob aus dessen Auswahlmöglichkeiten (options) die Option mit dem Slug student ausgewählt (selected) wurde.

Der Radio-Block für Helferschichten (shift_preferences) soll hingegen lediglich freiwilligen Helfern angezeigt werden. Analog zum vorherigen Block, lässt sich diese Regel mit folgendem Code-Snippet umsetzen:

blocks.registration_type.options.volunteer.selected;

Alternativ lässt sich der Auswahlstatus einer Option auch über die Funktion isOptionSelected() abfragen:

blocks.registration_type.isOptionSelected("volunteer");
icon
isOptionSelected(”<slug>”) ist fester Bestandteil der Rules Engine API und ist äquivalent zu options.<slug>.selected , profitiert jedoch nicht im gleichen Maße von den Auto-Complete Funktionen des Editors und ist daher weniger intuitiv in der Benutzung.

Die Block-Gruppe mit Hinweistext (note) soll freiwilligen Helfern (volunteer) und Vortragenden (speaker) angezeigt werden. Sie können die Ergebnisse der jeweiligen Abfragen mit logischen Ausdrücken, z.B. einem ODER (||), verknüpfen um mehrere Optionen zu berücksichtigen.

blocks.registration_type.options.volunteer.selected || blocks.registration_type.options.speaker.selected;

Da sich der Preis, den der Teilnehmer zu zahlen hat, erst ermitteln lässt, wenn dieser einen Besuchertyp gewählt hat, soll der Texteingabe-Block für den Preis erst angezeigt werden, wenn eine Auswahloption des Blocks registration_type ausgewählt worden ist.

blocks.registration_type.hasOptionSelected();
icon
hasOptionSelected() ist fester Bestandteil der Rules Engine API und gibt für Radio-Blöcke Auskunft, ob mindestens eine Auswahloption ausgewählt ist.

Die beiden Blöcke workshop_selection und shirt_text sollen allen Teilnehmern außer Studenten angezeigt werden, da diese zwar kostenlos teilnehmen dürfen, aber im Gegenzug keine Workshops buchen können und kein Konferenz-Shirt erhalten.

Sie können mehrere Blöcke mit der gleichen Regel versehen, indem Sie diese zunächst gruppieren. Wählen Sie hierfür die betreffenden Blöcke aus und pressen Sie anschließend Strg + G . Die Gruppe kann über den Befehl Strg + Shift + G bei Bedarf wieder aufgelöst werden.

Gruppieren Sie nun die beiden Blöcke workshop_selection und shirt_text und versehen Sie die Block-Gruppe mit der folgenden Regel:

blocks.registration_type.hasOptionSelected() && !blocks.registration_type.options.student.selected;

Hier werden wieder zwei Abfragen mit einem logischen Ausdruck, nämlich einem UND (&&) verknüpft. Zunächst wird abgefragt, ob NICHT (!) die Option student ausgewählt ist. Da dies allerdings auch vor dem Ausfüllen immer bereits der Fall ist und die Gruppe somit von Beginn an angezeigt werden würde, wird mit hasOptionSelected() zusätzlich geprüft, ob überhaupt schon eine Option des Blocks registration_type ausgewählt ist.

icon
Gruppen sparen Zeit und Aufwand, wenn mehrere Blöcke mit der selben Sichtbarkeitsregel versehen werden sollen. Wird die Gruppe später wieder aufgelöst, verfällt die Regel allerdings für alle Blöcke der Gruppe.