Conditionals
Conditionals in Bubble
In dieser Lektion wirst du lernen wie man bei Bubble mit Bedingungen arbeiten kann - hier „Conditionals“ genannt. Du erinnerst dich, dass es im Property Editor neben Appearance und Layout noch einen dritten Tab gibt, richtig? Mit dem setzen wir uns jetzt auseinander.
#grundlagen
Conditionals
Conditionals sind Bedingungen, die wir festlegen, anhand dessen Bubble bestimmten Sachen tut oder nicht tut.
Ein Conditional kann z.B. sein: Wenn Custom State = „Free“, dann Text = „bla bla bla“
Aber auch: Wenn Bildschirmgröße < 720px, dann Größe des Logos auf 50% verringern. Und so weiter.
Dank Conditionals lässt sich sehr viel in der Web-App individualisiert anpassen. Gepaart mit Custom States und Workflows ist das die geballte Power von Bubble.
Jetzt machen wir uns Conditionals zunutze, um Elemente anhand von Bedingungen anzeigen oder nicht anzeigen zu lassen. Konkret geht es um den Header der jeweiligen Spalten in unserer Tabelle und einem Button unter der Tabelle.
In dieser Lektion wirst du lernen wie man bei Bubble mit Bedingungen arbeiten kann - hier „Conditionals“ genannt. Du erinnerst dich, dass es im Property Editor neben Appearance und Layout noch einen dritten Tab gibt, richtig? Mit dem setzen wir uns jetzt auseinander.
#grundlagen
Conditionals
Conditionals sind Bedingungen, die wir festlegen, anhand dessen Bubble bestimmten Sachen tut oder nicht tut.
Ein Conditional kann z.B. sein: Wenn Custom State = „Free“, dann Text = „bla bla bla“
Aber auch: Wenn Bildschirmgröße < 720px, dann Größe des Logos auf 50% verringern. Und so weiter.
Dank Conditionals lässt sich sehr viel in der Web-App individualisiert anpassen. Gepaart mit Custom States und Workflows ist das die geballte Power von Bubble.
Jetzt machen wir uns Conditionals zunutze, um Elemente anhand von Bedingungen anzeigen oder nicht anzeigen zu lassen. Konkret geht es um den Header der jeweiligen Spalten in unserer Tabelle und einem Button unter der Tabelle.
#praxis
Wie du dich vielleicht erinnern kannst, haben wir in den Header: Name und Header: CO₂ Elementen die Einstellung getroffen, dass der Text nicht sichtbar sein soll, wenn die Seite lädt - Häkchen raus bei This element is visible on page load.
Das liegt zum einen daran, dass wir eben nicht wollen, dass man diesen Text sieht, bevor wir nicht mindestens einen Wert in unserer Tabelle haben. Zum anderen und vor allem aber daran, dass wir diesen Text nur einmal angezeigt bekommen wollen - nämlich ganz oben. Die Repeating Group funktioniert aber grade so, dass, wenn dieses Element von vornherein sichtbar wäre, bei jedem neuen Eintrag den Header anzeigen würde. Also so:
Wollen wir so aber nicht haben.
1. Conditional Visibility
Öffne den Property Editor von einem der zwei Text Felder → Conditional Tab → Define another condition → When: Current cell’s index is 1
Dann bei „Select a property to change when true“ wählst du „This element is visible“. Dann musst du noch das Häkchen dafür setzen. Damit sagen wir Bubble, dass der Text nur dann angezeigt werden soll, wenn die Zeilen Nummer = 1 ist. Ab der zweiten Zeile soll es nicht mehr angezeigt werden.
2. Bedingung kopieren
Wenn du dieselbe Formatierung nochmal woanders brauchst, dann musst du die nicht jedes Mal neu bauen, sondern kannst sie einfach kopieren und dort einfügen, wo du sie brauchst.
Dafür musst du auf das gewünschte Element mit der Formatierung rechts-klicken → Copy conditional formatting → Rechtsklick auf das andere Element → Paste conditional formatting.
Geh’ nun in die Preview und probier es mal aus.
Klappt’s? Sehr gut! Damit hast du dein erstes Conditional gebaut!
Wie du dich vielleicht erinnern kannst, haben wir in den Header: Name und Header: CO₂ Elementen die Einstellung getroffen, dass der Text nicht sichtbar sein soll, wenn die Seite lädt - Häkchen raus bei This element is visible on page load.
Das liegt zum einen daran, dass wir eben nicht wollen, dass man diesen Text sieht, bevor wir nicht mindestens einen Wert in unserer Tabelle haben. Zum anderen und vor allem aber daran, dass wir diesen Text nur einmal angezeigt bekommen wollen - nämlich ganz oben. Die Repeating Group funktioniert aber grade so, dass, wenn dieses Element von vornherein sichtbar wäre, bei jedem neuen Eintrag den Header anzeigen würde. Also so:
Wollen wir so aber nicht haben.
1. Conditional Visibility
Öffne den Property Editor von einem der zwei Text Felder → Conditional Tab → Define another condition → When: Current cell’s index is 1
Dann bei „Select a property to change when true“ wählst du „This element is visible“. Dann musst du noch das Häkchen dafür setzen. Damit sagen wir Bubble, dass der Text nur dann angezeigt werden soll, wenn die Zeilen Nummer = 1 ist. Ab der zweiten Zeile soll es nicht mehr angezeigt werden.
2. Bedingung kopieren
Wenn du dieselbe Formatierung nochmal woanders brauchst, dann musst du die nicht jedes Mal neu bauen, sondern kannst sie einfach kopieren und dort einfügen, wo du sie brauchst.
Dafür musst du auf das gewünschte Element mit der Formatierung rechts-klicken → Copy conditional formatting → Rechtsklick auf das andere Element → Paste conditional formatting.
Geh’ nun in die Preview und probier es mal aus.
Klappt’s? Sehr gut! Damit hast du dein erstes Conditional gebaut!
3. Button einfügen
Wir können jetzt nach Lebensmitteln suchen und diese einer Liste hinzufügen. Als Nächstes sollte dann die Berechnung der Gesamtsumme der g CO₂/100g Werte stattfinden. Dafür werden wir einen weiteren Workflow bauen sowie eine zweite Section in der das Ergebnis angezeigt wird.
Bevor das passiert, müssen wir diese Berechnung, und damit den Workflow, irgendwie lostreten. Dafür werden wir einen Button nutzen.
Zieh dir aus den Visual Elements das Button Element unter deine Repeating Group. Ändere den Text auf „Jetzt Berechnen“ und zentrier’ das Horizontal alignment über den Layout Tab. Jetzt kannst du oben noch Margins einfügen, damit etwas Abstand zur Tabelle herrscht. Über Fit width to content kannst du außerdem noch sicherstellen, dass alles in einer Zeile steht und der Button genau die richtige Breite hat.
Gehst du jetzt auf die Preview, wirst du sofort merken, dass der Button jetzt einfach da ist. Ohne irgendwelche Daten in der Tabelle macht das aber wenig Sinn. Wir müssen dem Button also auch ein Conditional verpassen.
4. Conditional zum Button hinzufügen
Was wäre die Logik, die wir hier brauchen? Vielleicht fällt es dir ja selbst ein...
Nein? Also:
„Zeig den Button an, sobald etwas in der Liste steht.“
D.h. WENN die Liste nicht leer ist, DANN zeig den Button an.
When: index's Liste ausgewählter Essen:count > 0 DANN This element is visible
Hier sagen wir Bubble also, es soll die Zeilen in der Liste abzählen und sobald dieser Wert größer als Null ist, soll der Button sichtbar sein.
UND
Im Layout Tab natürlich noch einstellen, dass das Element nicht visible on page load ist (also Häkchen raus) + Häkchen rein bei collapse when hidden.
5. Container Höhe und Design anpassen
Ganz zu Beginn, als wir alle Container eingefügt haben, hatten wir die Min Height dieser absichtlich noch nicht auf 0px gestellt, damit man diese eben noch sieht. Jetzt wo die Container aber Inhalt haben, kannst du alles so einstellen, dass die Min Height 0px ist und fit height to content einstellen. Gleiches gilt für die Min Width.
ABER
Ob du das machen willst, hängt natürlich davon ab, wie das Design deiner Tabelle sein soll. Möchtest du, dass alle Zellen gleichmäßig sind? Dann machst du das am besten über fixed height und fixed width. Ich persönlich habe mit für ein Design entschieden, in dem die ausgewählten Lebensmittel in einer Art Blase oder Pille angezeigt werden:
Dafür ich ich folgende Einstellungen vorgenommen:
Wir können jetzt nach Lebensmitteln suchen und diese einer Liste hinzufügen. Als Nächstes sollte dann die Berechnung der Gesamtsumme der g CO₂/100g Werte stattfinden. Dafür werden wir einen weiteren Workflow bauen sowie eine zweite Section in der das Ergebnis angezeigt wird.
Bevor das passiert, müssen wir diese Berechnung, und damit den Workflow, irgendwie lostreten. Dafür werden wir einen Button nutzen.
Zieh dir aus den Visual Elements das Button Element unter deine Repeating Group. Ändere den Text auf „Jetzt Berechnen“ und zentrier’ das Horizontal alignment über den Layout Tab. Jetzt kannst du oben noch Margins einfügen, damit etwas Abstand zur Tabelle herrscht. Über Fit width to content kannst du außerdem noch sicherstellen, dass alles in einer Zeile steht und der Button genau die richtige Breite hat.
Gehst du jetzt auf die Preview, wirst du sofort merken, dass der Button jetzt einfach da ist. Ohne irgendwelche Daten in der Tabelle macht das aber wenig Sinn. Wir müssen dem Button also auch ein Conditional verpassen.
4. Conditional zum Button hinzufügen
Was wäre die Logik, die wir hier brauchen? Vielleicht fällt es dir ja selbst ein...
Nein? Also:
„Zeig den Button an, sobald etwas in der Liste steht.“
D.h. WENN die Liste nicht leer ist, DANN zeig den Button an.
When: index's Liste ausgewählter Essen:count > 0 DANN This element is visible
Hier sagen wir Bubble also, es soll die Zeilen in der Liste abzählen und sobald dieser Wert größer als Null ist, soll der Button sichtbar sein.
UND
Im Layout Tab natürlich noch einstellen, dass das Element nicht visible on page load ist (also Häkchen raus) + Häkchen rein bei collapse when hidden.
5. Container Höhe und Design anpassen
Ganz zu Beginn, als wir alle Container eingefügt haben, hatten wir die Min Height dieser absichtlich noch nicht auf 0px gestellt, damit man diese eben noch sieht. Jetzt wo die Container aber Inhalt haben, kannst du alles so einstellen, dass die Min Height 0px ist und fit height to content einstellen. Gleiches gilt für die Min Width.
ABER
Ob du das machen willst, hängt natürlich davon ab, wie das Design deiner Tabelle sein soll. Möchtest du, dass alle Zellen gleichmäßig sind? Dann machst du das am besten über fixed height und fixed width. Ich persönlich habe mit für ein Design entschieden, in dem die ausgewählten Lebensmittel in einer Art Blase oder Pille angezeigt werden:
Dafür ich ich folgende Einstellungen vorgenommen: