Bubble.io Tutorial - ✅ Alle Auswählen Funktion bei einer Liste erstellen (Deutsch)

In diesem Video erstellen wir das Feature, um alle Datenpunkte in einer Liste mit einem Klick auszuwählen. Dies erlaubt dem User zum Beispiel alle Teilnehmer zu einem Meeting einzuladen.

Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir ein alle auswählen Feature in Bubble erstellen können. Das heißt, wenn wir z.B. hier die Form haben, ein Meeting zu erstellen, sagen am Donnerstag von 8:00 bis 10:00 Uhr machen wir ein Sprint Meeting.

Und als Besonderheit wollen wir nicht nur eins, zwei oder drei, sondern alle auswählen, um dieses Meeting zu erstellen. Das ist das Feature, was wir heute einmal durchgehen. Jetzt seht ihr, sind auch alle im Meeting eingeladen. Und wir gehen direkt mal in Bubble. Ich habe schon einige Sachen vorbereitet. Es heißt, wir haben einmal einen Großteil der Form, wir brauchen nur den Teilnehmer und in der Datenbank haben wir einmal das Meeting an sich mit einem Startdatum, Enddatum, Name und einer Liste, oft Users Teilnehmer.

Und wir haben auch den User bereits angelegt. Das seht ihr. Wenn ich hier auf alle Users gehen, haben wir hier eine Liste an User. Das heißt, das wissen wir quasi schon mal vorab einfügen. Wir gehen jetzt zurück ins Designte und erstellen eine Gruppe. 300. 63 Und. Diese Gruppen nennen Group Teilnehmer in der Gruppe. Erstellen wir jetzt eine Repeating Group. Machen full list. Eine Reihe. Und als Type of content User, die wir vorher schon angelegt haben und durch Search vor User. Und nun legen wir eben zwei Elemente an. Einmal ein Icon. Und wir wählen hier dieses Rechteck aus, quasi ein nicht selektiert.

Und daneben den Text mit current cell's users email. Und schließlich noch darüber den Button. Mit alles auswählen. Und wir können uns das einmal kurz im Preview anschauen. Und wir sehen jetzt wunderbar, wie wir alle User hier in einer Liste haben, quasi dieses Icon für die Selektierung als Checkbox und alle auswählen als Button. Das heißt, im nächsten Schritt gehen wir jetzt auch in die Workflows. Wir gehen auf die Repeating Group Info und Add a new custom State und wir fragen, ob diese ausgewählt ist. Wir machen ein User und wichtig, die List of Users. Das heißt, hier sind alle Nutzer drin, die gerade ausgewählt wurden. Wir erstellen diesen State. Und wenn wir jetzt auf die Repeating Group gehen, haben wir hier unser Icon und wir legen eine Bedingung fest. Wenn Repeating Group User und wir nehmen den Staat ausgewählt contains Current cell's User. Dann. Ändern wir das Icon und nehmen dieses Checkbox Icon. Und ändern auch die Icon color auf ein Grün. Als nächstes gehen wir in den Button. Und auch hier erstellen wir ein neues Conditional Repeating Group User ausgewählt.

Und wir nehmen den Count, also die Anzahl. Also die Anzahl im State, wenn diese der Repeating Group User list of users count entspricht, also wenn der State genau so viele Nutzer hat wie die Repeating Group an sich Nutzer, also alle ausgewählt sind, dann ändern wir den Text auf alle statt auswählen abwählen.

Denn im Workflow wollen wir dem User, sobald alle Nutzer ausgewählt sind, natürlich auch die Möglichkeit geben, wiederum alle abzuwählen. Und wir gehen jetzt in den Workflow, um die Funktionalität zu erstellen. Start/edit workflow. Und wir liegen hier ein Conditional Fest. Wenn Repeating Group User ausgewählt und wir nehmen wiederum den Count. Ist nicht. Repeating Group User List of users count. D.h. Wir haben hier quasi die Funktionalität. Bitte alle auswählen, dann set state of an Element und wir nehmen die Repeating Group. Ausgewählt. Und als Value nehmen wir jetzt Repeating Group Users List of users.

Das heißt, in unserem Staate wollen wir nun alle Nutzer der Repeating Group hinzufügen. Wenn wir nun diese Gruppe und ich mach die mal grün, d.h, dass es die alle auswählen Gruppe, wenn wir diese jetzt einmal kopieren und einfügen und sagen, wir nehmen jetzt den Fall für alle abwählen. Dann ändern wir hier die Bedingungen, auf welchen Repeating Group User ausgewählt. Die Anzahl ist genau die List of Users, dann ändern wir den State auf leer. D.h. hier ist quasi der Button definiert, um alle abzuwählen. Als nächstes gehen wir in das Icon. Start/edit workflow und ich mache das blau, um es zu sehen. Nur wenn Repeating Groups User ausgewählt doesn't contain current cell's User, d. h. es ist quasi aktuell leer und wir möchten es auswählen durch den Klick. Machen wir hier Value Repeating Group User ausgewählt und plus Item Current cell's User.

Wir kopieren wiederum diesen Workflow. Und machen diesen z.B. orange und sagen Wenn aber Contains current cell's User, dann ist es nicht plus item, sondern minus item des Current cell's Users. Und so haben wir beide Funktionen abgedeckt. Wenn wir nun zurückgehen auf Meeting erstellen, Start/edit workflow und dann Data Create a new thing Meeting und wir nehmen. Name ist Inputs' name's Value. Startdatum ist dann Datepicker Start's Value, Enddatum Datepickerr End's value und Teilnehmer ist nun add list und wir nehmen genau aus der Repeating Group User den Status ausgewählt.

Und haben hier quasi diese Liste im State. Anschließend gehen wir auf Go to page und diese Page wiederum heißt Meeting, dem ich davor schon angelegt, können einmal kurz reingehen. Das ist quasi ein Type of content Meeting und das Backupfield for URL ist Name. Und als Titel haben wir Current page's meeting's name und wir haben hier ein Textfeld, was quasi Current page  Meetings Teilnehmer als Liste hinzufügt. Wenn wir nun zurückgehen in den Workflow, dann gehen wir eben auf Go to page Meeting Meeting und Result of Step 1. Wir schauen uns jetzt das Ganze einmal im Preview an.. Wir haben die Liste an Teilnehmern und wir sehen, wir können einzelne Teilnehmer auswählen, wir können einzelne Teilnehmer wieder deselektieren.

Wir können alle auswählen. Wir können alle wählen und wenn wir alle auswählen und ein Meeting erstellen. Dann erstellte er jetzt quasi das neue Meeting. Alle Teilnehmer, dann fügt er hinzu und leitet uns auf die Seite weiter. Somit konnte quasi sehen, wie wir relativ einfach in Bubble ein Select All Feature programmieren können.

Wenn euch dieses Video gefallen hat, klickt gerne auf den Like-Button und subscribe unseren Channel. Das hilft uns, dass wir wiederum mehr Reichweite bekommen. Und dadurch lohnt es sich dann auch weiterhin kostenlos noch mehr Content für Bubble in Deutsch anzubieten.

Wenn ihr Fragen habt, schreibt gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.