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.
