Organisation

Erstellen & Versenden

Sicherheit

API

Rules Engine

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.

Auf dieser Seite

• Bedingte Sichtbarkeit in Abhängigkeit eines Radio-Auswahlfelds
• Eine festgelegte Option ist ausgewählt
• Eine von mehreren festgelegten Optionen ist ausgewählt
• Variante: Eine Option aus einer Liste von festgelegten Optionen ist ausgewählt