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.
