Startseite Rules Engine – Bedingte Sichtbarkeit
👁️‍🗨️

Rules Engine – Bedingte Sichtbarkeit

Sebastian Herd
Von Dilara Karaca und Sebastian Herd
• 7 Artikel

Bedingte Sichtbarkeit: Schnelleinführung

In Paperless kannst du Inhalte in Verträgen mithilfe von Regeln dynamisch steuern – also ein- oder ausblenden, je nachdem, welche Eingaben durch den Empfänger gemacht werden. Das sorgt für ein intuitiveres Ausfüllerlebnis und eine effizientere Vertragsverwaltung. Im folgenden Beispiel zeigen wir dir, wie sich Vertragsinhalte automatisch anpassen, abhängig davon, welche Option in einem Auswahlfeld gewählt wurde. 💡 Voraussetzung: Damit du Regeln nutzen kannst, muss das Modul „Rules Engine“ in deinem Workspace unter „Erweiterungen“ aktiviert sein. Du findest hier ein ausführliches Erklärungsvideo sowie weiter unten im Artikel eine Schritt-für-Schritt-Anleitung mit Beispiel-Code. https://vimeo.com/1082941583?share=copy Schritt-für-Schritt Anleitung Zielsetzung: Je nachdem, ob im Radio-Feld angegeben wurde „Es wurden keine Mängel festgestellt“ oder „Es wurden Mängel festgestellt“ [1], soll darunter der Datensatz mit der Dokumentationsmöglichkeit der Mängel angezeigt werden oder nicht [2]. Wenn „Es wurden keine Mängel festgestellt“ → soll der Datensatz nicht angezeigt werden Wenn „Es wurden Mängel festgestellt“ → soll der soll der Datensatz angezeigt werden Voraussetzungen und Umsetzung Damit die sogenannte bedingte Sichtbarkeit korrekt funktioniert, sind zwei Schritte notwendig: Vergabe sinnvoller Slugs für das Radio-Feld und seine Optionen Hinterlegen des passenden JavaScript-Codes im Low-Code Editor Anpassung der Slugs Damit du im zweiten Schritt mit deinem Code den richtigen Block ansprichst - in dem Fall die festgestellten Mängel, ist es wichtig, dass dieser Block einen sinnvollen Namen hat. Wenn du den Block anwählst, erscheint oben rechts der generisch vergebene Name des Blocks. Diesen kannst du sinngemäß anpassen. In diesem Beispiel verwenden wir den Slugnamen maengel 💡 Slugs dürfen keine Umlaute, Großbuchstaben oder Leerzeichen enthalten. Als Nächstes benennst du die Slugs der Radio-Optionen um. Um diese Slugs umzubenennen, klicke bitte rechts auf "Erweitert". Auch hier ist bereits ein generisch vergebener Slug hinterlegt. Wir benennen die Slugs wie folgt um: maengel_nein → für „Es wurden keine Mängel festgestellt“ maengel_ja → für „Es wurden Mängel festgestellt“ Schließe die Maske, nachdem du beide Slugs angepasst hast. Hinterlegen des Java Script Codes Klicke nun auf den Block, der abhängig von der Auswahl angezeigt werden soll – in unserem Fall: der Mängel-Datensatz. [1] Aktiviere unten rechts die Option „Bedingte Sichtbarkeit“ [2]. Dadurch öffnet sich automatisch der Low-Code Editor, in dem du deine Regel hinterlegst.Für dieses Beispiel lautet der Code: blocks.maengel.options.maengel_ja.selected Erklärung: Der Block wird nur dann angezeigt, wenn im Radio-Feld maengel die Option maengel_ja ausgewählt wurde – also „Es wurden Mängel festgestellt“. Neutral formuliert lautet die Regel demnach: blocks.maengel.options.maengel_ja.selected Regel testen Aktiviere die Vorschau (Testmodus) Der Block ist aktuell nicht sichtbar, da noch keine Auswahl getroffen wurde. Klicke auf "Es wurden Mängel festgestellt" Deine Regel funktioniert, wenn der Block jetzt sichtbar wird. 💡Die bedingte Sichtbarkeit lässt sich nicht nur mit Radio-Feldern, sondern auch mit Checkboxen kombinieren. Du kannst beliebige Elemente sichtbar machen – z. B. Datensätze, Gruppen, Textfelder oder sogar komplette Vertragsabschnitte.

Zuletzt am 15. August aktualisiert

Bedingte Sichtbarkeit: Radio-Auswahlfeld

Bedingte Sichtbarkeit in Abhängigkeit eines Radio-Auswahlfelds Eine festgelegte Option ist ausgewählt Beispiel: 💡 Das Texteingabe-Feld Bemerkung soll nur angezeigt werden, wenn Rot ausgewählt wurde. Beispiel-Code: blocks.color.options.red.selected Erklärung: Über blocks erhält man Zugriff auf alle Blöcke im vorliegenden Dokument bzw. Formular. Innerhalb von blocks sind die Blöcke unter ihrem jeweiligen slug im Schema blocks.slug — also beispielsweise blocks.color — erreichbar. Bei einem Radio/Button/Select-Auswahlfeld bietet der Block dann eine Reihe von Eigenschaften und Methoden, unter anderem auch die Liste an auswählbaren Optionen — erreichbar unter blocks.color.options. Jede Option — erreichbar unter ihrem jeweiligen Slug — hat wiederum die Eigenschaft selected, welche zurückgibt, ob die Option gerade ausgewählt ist (true) oder nicht (false). Der Code blocks.color.options.red.selected liefert als genau dann true zurück (und schaltet damit den mit der Sichtbarkeitsregel belegten Block auf sichtbar), wenn die Option red aus der Auswahl color gerade ausgewählt ist. Hier Regel kopieren: blocks.[Slug Radio Block].options.[Slug Radio Option].selected Eine von mehreren festgelegten Optionen ist ausgewählt Beispiel: 💡 Das Texteingabe-Feld Bemerkung soll nur angezeigt werden, wenn Rot oder Grün ausgewählt wurde. Beispiel-Code: blocks.color.options.red.selected || blocks.color.options.green.selected Erklärung: Über blocks erhält man Zugriff auf alle Blöcke im vorliegenden Dokument bzw. Formular. Innerhalb von blocks sind die Blöcke unter ihrem jeweiligen slug im Schema blocks.slug — also beispielsweise blocks.colors — erreichbar. Bei einem Radio/Button/Select-Auswahlfeld bietet der Block dann eine Reihe von Eigenschaften und Methoden, unter anderem auch die Liste an auswählbaren Optionen — erreichbar unter blocks.color.options. Jede Option — erreichbar unter ihrem jeweiligen Slug — hat wiederum die Eigenschaft selected, welche zurückgibt, ob die Option gerade ausgewählt ist (true) oder nicht (false). Der Code blocks.color.options.red.selected liefert als genau dann true zurück (und schaltet damit den mit der Sichtbarkeitsregel belegten Block auf sichtbar), wenn die Option red aus der Auswahl color gerade ausgewählt ist. Der oder-Operator || verknüpft zwei Aussagen miteinander, sodass genau dann true zurückgegeben wird, wenn eine der beiden Aussagen true zurückgeben. Hier also, wenn entweder Rot ausgewählt wurde (blocks.color.options.red.selected) oder (||) Grün ausgewählt wurde (blocks.color.options.green.selected). Hier Regel kopieren: blocks.[Slug Radio Block].options.[Slug Radio Option 1].selected || blocks.[Slug Radio Block].options.[Slug Radio Option 2].selected Variante: Eine Option aus einer Liste von festgelegten Optionen ist ausgewählt Es ist sehr müßig, eine größere Menge bzw. Liste von festgelegten Optionen über den ||-Operator aufzuzählen. Hierfür gibt es übersichtlichere Alternativen: [ blocks.colors.options.red.slug, blocks.colors.options.green.slug, blocks.colors.options.purple.slug, blocks.colors.options.orange.slug ].includes(blocks.colors.selectedOption.slug) ["red", "green", "purple", "orange"].includes(blocks.colors.selectedOption.slug) Die zentrale Idee hierbei besteht darin eine festgelegte Liste von Optionen (genauer: deren slugs) aufzuzählen und dann nachzuschauen, ob die ausgewählte Option in dieser Liste vorkommt. Der slug jeder Option kann über die Eigenschaft slug abgerufen werden. Bei einem Radio/Button/Select-Auswahlfeld bietet der Block die Eigenschaft selectedOption , welche diejenige Option zurückgibt, welche gerade ausgewählt ist. Im ersten Beispiel wird die bekannte Punktnotation verwendet, um über den Auswahlblock und dessen Optionen jeweils an die Option-slugs zu gelangen. Im zweiten Beispiel wird direkt mit einer Liste von slugs (welche explizit aufgezählt werden) gearbeitet. Während das erste Beispiel nicht vorhandene Optionen (slug unbekannt) direkt als Fehler kennzeichnet, würden fehlende/fehlerhafte slugs im zweiten Beispiel nicht erkannt werden.

Zuletzt am 15. August aktualisiert

Bedingte Sichtbarkeit: Datensätze

Regeln innerhalb von Datensätzen Lokale Adressierung von Blöcken (self.siblings) Üblicherweise können alle Blöcke mittels Punktnotation über blocks.slug adressiert werden. Innerhalb von Datensätzen funktioniert die Adressierung von Blöcken konzeptionell anders. Hintergrund ist die logische Dopplung eines jeden Blocks pro Datensatz. Im folgenden Beispiel ist für *jede “*Vorherige Versicherung” der Block “Name der Versicherung” vorhanden. Der bekannte Weg über blocks.insurance_name würde also die Frage aufwerfen, der Name welcher vorherigen Versicherung denn nun zurückgegeben werden würde. Um dieses Problemfeld zu umgehen, sind Blöcke innerhalb von Datensätzen nicht über blocks.slug erreichbar. Um von außen auf diese Blöcke zuzugreifen, wird mit blocks.datensatz.rows gearbeitet (Gegenstand eines anderen Artikels). An dieser Stelle soll es Sichtbarkeitsregeln innerhalb von Datensätzen gehen — d.h. die Eingaben innerhalb eines Datensatzes wirken sich auf die Sichtbarkeit von Blöcken innerhalb des gleichen Datensatz-Eintrags aus. Um lokal begrenzt — innerhalb eines Datensatz-Eintrags — auf die “Geschwister” eines Blocks zuzugreifen, muss die self.siblings-Notation verwendet werden. Hierüber sind alle Blöcke innerhalb eines Datensatz-Eintrags genau so erreichbar wie normalerweise alle Blöcke über blocks.slug. Beispiel: 💡 Das Feld Unterlagen soll nur angezeigt werden, wenn Nein ausgewählt wurde. Beispiel-Code: self.siblings.documents_present.options.documents_present_true.selected Erklärung: Über self erhält man Zugriff auf den aktuellen (lokalen) Eintrag des Datensatzes. Innerhalb von self.siblings sind die Blöcke unter ihrem jeweiligen slug im Schema self.siblings.slug — also beispielsweise self.siblings.documents_present — erreichbar. Der Code self.siblings.documents_present.options.documents_present_true.selected liefert also genau dann true zurück (und schaltet damit den mit der Sichtbarkeitsregel belegten Block auf sichtbar), wenn die Option documents_present_true aus der Auswahl documents_present im jeweiligen Datensatz-Eintrag gerade ausgewählt ist. Hier Regel kopieren: self.siblings.[Slug Radio Block].options.[Slug Radio Option].selected

Zuletzt am 15. August aktualisiert

Bedingte Sichtbarkeit: Checkbox-Auswahl

Bedingte Sichtbarkeit in Abhängigkeit einer Checkbox-Auswahl Eine festgelegte Option ist ausgewählt Beispiel: 💡 Das Texteingabe-Feld Bemerkung soll nur angezeigt werden, wenn Grün ausgewählt wurde. Beispiel-Code: blocks.colors.options.green.selected Erklärung: Über blocks erhält man Zugriff auf alle Blöcke im vorliegenden Dokument bzw. Formular. Innerhalb von blocks sind die Blöcke unter ihrem jeweiligen slug im Schema blocks.slug — also beispielsweise blocks.colors — erreichbar. Bei einem Checkbox-Auswahlfeld bietet der Block dann eine Reihe von Eigenschaften und Methoden, unter anderem auch die Liste an auswählbaren Optionen — erreichbar unter blocks.colors.options. Jede verfügbare Option — erreichbar unter ihrem jeweiligen Slug — hat wiederum die Eigenschaft selected, welche zurückgibt, ob die Option gerade ausgewählt ist (true) oder nicht (false). Der Code blocks.colors.options.green.selected liefert als genau dann true zurück (und schaltet damit den mit der Sichtbarkeitsregel belegten Block auf sichtbar), wenn die Option green aus der Checkbox-Auswahl colors gerade ausgewählt ist. Hier Regel kopieren: blocks.[Slug Checkbox Block].options.[Slug Checkbox Option].selected Eine von mehreren festgelegten Optionen ist ausgewählt Beispiel: Das Texteingabe-Feld Bemerkung soll nur angezeigt werden, wenn Grün oder Orange ausgewählt wurde. Beispiel-Code: blocks.colors.options.green.selected || blocks.colors.options.orange.selected Erklärung: Über blocks erhält man Zugriff auf alle Blöcke im vorliegenden Dokument bzw. Formular. Innerhalb von blocks sind die Blöcke unter ihrem jeweiligen slug im Schema blocks.slug — also beispielsweise blocks.colors — erreichbar. Bei einem Checkbox-Auswahlfeld bietet der Block dann eine Reihe von Eigenschaften und Methoden, unter anderem auch die Liste an auswählbaren Optionen — erreichbar unter blocks.colors.options. Jede verfügbare Option — erreichbar unter ihrem jeweiligen Slug — hat wiederum die Eigenschaft selected, welche zurückgibt, ob die Option gerade ausgewählt ist (true) oder nicht (false). Der Code blocks.colors.options.green.selected liefert als genau dann true zurück (und schaltet damit den mit der Sichtbarkeitsregel belegten Block auf sichtbar), wenn die Option green aus der Checkbox-Auswahl colors gerade ausgewählt ist. Der oder-Operator || verknüpft zwei Aussagen miteinander, sodass genau dann true zurückgegeben wird, wenn eine der beiden Aussagen true zurückgeben. Hier Regel kopieren: blocks.[Slug Checkbox Block].options.[Slug Checkbox Option 1].selected || blocks.[Slug Checkbox Block].options.[Slug Checkbox Option 2].selected Variante: Eine Option aus einer Liste von festgelegten Optionen ist ausgewählt Es ist sehr müßig, eine größere Menge bzw. Liste von festgelegten Optionen über den ||-Operator aufzuzählen. Hierfür gibt es übersichtlichere Alternativen: blocks.colors.anyOptionSelected([ blocks.colors.options.green.slug, blocks.colors.options.orange.slug, blocks.colors.options.yellow.slug ]) blocks.colors.anyOptionSelected(["yellow", "green", "orange"]) Die Methode anyOptionSelected für Checkbox-Blöcke bietet die komfortable Möglichkeit, auf einmal prüfen, ob eine oder mehrere Optionen aus einer ganzen Liste von Optionen (genauer: deren slugs) ausgewählt sind. Im ersten Beispiel wird die bekannte Punktnotation verwendet, um über den Auswahlblock und dessen Optionen jeweils an die Option-slugs zu gelangen. Im zweiten Beispiel wird direkt mit einer Liste von slugs (welche explizit aufgezählt werden) gearbeitet. Die anyOptionSelected-Methode prüft direkt bei der Eingabe, ob alle slugs aus der Liste der zu prüfenden Slugs auch vorhanden sind. Sollte keine Option mit dem angegebenen slug vorhanden sein, wird der Fehler Error: Option 'apple' not found in checkbox 'colors' zurückgegeben.

Zuletzt am 15. August aktualisiert

Bedingte Sichtbarkeit: Erweiterte Erklärung

Regeln für Bedingte Sichtbarkeit 💡 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: Wählen Sie zunächst den Block aus, für den Sie eine Bedingte Sichtbarkeitsregel implementieren wollen. Aktivieren Sie in den Blockeinstellungen den Schalter Bedingte Sichtbarkeit. Anschließend öffnet sich ein Code-Editor, in welchem Sie mit JavaScript eine Sichtbarkeitsregel formulieren können. 💡 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. Die Bedingte Sichtbarkeit eines Blockes kann jederzeit durch Klicken des Buttons Bedingte Sichtbarkeit in den Blockeinstellungen weiter angepasst werden. 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: blocks ist ein fester Bestandteil der Rules Engine API und ermöglicht den Zugriff auf alle Blöcke eines Formulars anhand ihrer Slugs. 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. options ist ebenfalls ein fester Bestandteil der Rules Engine API und ermöglicht für Radio- und Checkbox-Blöcke Zugriff auf alle Auswahloptionen. 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. 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"); 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(); 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. 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.

Zuletzt am 15. August aktualisiert

Bedingte Sichtbarkeit: Mit Regeln

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: Klicken Sie auf den Reiter Regeln am rechten Bildschirmrand. Klicken Sie anschließend auf das Plus-Zeichen, um eine neue Regel zu erstellen. Wählen Sie in der Maske den Typ JavaScript Variable. Vergeben Sie einen kurzen, aber ausdrucksstarken Namen für die neue Regel. Klicken Sie nun auf Erstellen. 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; ⚙️ selectedOption ist fester Bestandteil der Rules Engine API und gibt für Radio-Blöcke die ausgewählte Option zurück. ⚙️ 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. ⚙️ 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; ⚙️ 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: 💡 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" ⚙️ value ist fester Bestandteil der Rules Engine API und ermöglicht für Texteingabe-Blöcke den Zugriff auf den eingegebenen Text. ⚙️ 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. 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; ⚙️ 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.

Zuletzt am 15. August aktualisiert