IF / ELSE-Logik: zwischen zwei Ergebnissen umschalten

Im Template-Editor lässt du eine Eigenschaft mit der Funktion IF zwischen zwei Werten wechseln, je nachdem, was Nutzer im Design-Generator eingeben. In dieser Anleitung blendet eine Checkbox einen dunklen Balken hinter einem Text ein. Ist der Balken zu sehen, wird der Text weiß, sonst schwarz. Dafür brauchst du den Balken hinter dem Text und ein Checkbox-Input-Feld, das ihn ein- und ausblendet. Wie du dieses Input-Feld erstellst, steht in Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen.

Das geht in zwei Schritten:

1. Schreibe die Expression im Template-Editor.
2. Teste das Ergebnis im Design-Generator.

Expression schreiben

1. Schau im Input Fields View in den Einstellungen deines Checkbox-Input-Felds nach seinem Namen bei Variable name. In dieser Anleitung heißt er showBar. Wie du die Einstellungen öffnest, steht in Einstellungen eines Input-Felds.
2. Klicke in der Toolbar oben auf das kursive fx. Das ist das Werkzeug Connect expressions.
   
3. Klicke auf dem Canvas oder im Layers-Panel auf den Text, dessen Farbe wechseln soll. Das Properties-Panel zeigt seine Eigenschaften.
4. Klicke im Properties-Panel im Abschnitt Appearance auf den Farbwert unter Fill Color. Der Expression-Editor öffnet sich als Popup.
   
5. Klicke oben rechts im Expression-Editor auf die spitzen Klammern. Die Code-Ansicht öffnet sich.
6. Gib statt des bisherigen Inhalts diese Expression ein: IF(showBar, `#ffffff`, `#000000`). Setze statt showBar den Variablennamen deines Checkbox-Input-Felds ein. Der Text ist jetzt weiß, wenn der Balken zu sehen ist, sonst schwarz.
   Oben rechts erscheint ein kleiner roter Kasten?

   Die Expression enthält einen Schreibfehler, zum Beispiel eine fehlende Klammer, ein fehlendes Komma oder einen fehlenden Backtick um eine Farbe. Solange der Kasten da ist, übernimmt Bluepic deine Änderung nicht.

   Die Farbe ändert sich nicht?

   Bluepic übernimmt eine Expression nur, wenn es alle Namen darin kennt. Ist der Variablenname falsch geschrieben, bleibt die alte Farbe, ohne Meldung. Vergleiche den Namen mit Variable name, auch die Groß- und Kleinschreibung.

7. Klicke oben links auf ×. Der Expression-Editor schließt sich. Deine Änderung ist schon übernommen.

IF hat immer drei Teile: die Bedingung, den Wert, wenn sie wahr ist, und den Wert, wenn sie falsch ist. Statt einer Checkbox kann die Bedingung auch ein Vergleich oder eine Prüfung sein:

• price > 100: wahr, wenn die Zahl price größer als 100 ist.
• IS_EMPTY_STRING(subtitle): wahr, wenn der Text subtitle leer ist.
• NOT(…), AND(…) und OR(…): kehren eine Bedingung um oder verknüpfen mehrere.

Bei IF zählt auch die Zahl 0 als wahr. Prüfe Zahlen deshalb mit einem Vergleich wie count > 0. Für mehr als zwei Ergebnisse setzt du ein IF in ein anderes oder nimmst SWITCH. Beide stehen in der Übersicht der Expression-Funktionen.

In der visuellen Ansicht zeigt der Expression-Editor die drei Teile von IF als Bausteine.

Ergebnis im Design-Generator testen

Der Design-Generator ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier kannst du die Expression gefahrlos testen: Was du dort auswählst, ändert dein Template nicht dauerhaft.

1. Klicke oben rechts auf Share und dann auf Publish Template Link. Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.
2. Klicke auf Copy URL und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich.
3. Klicke auf die Checkbox. Prüfe, ob der Balken erscheint und der Text weiß wird und ob der Text beim nächsten Klick wieder schwarz ist.