Vous avez probablement déjà vu une fonctionnalité de sélection multiple sur une Table.
Vous savez, ces petites cases à cocher qui permettent de sélectionner plusieurs lignes d'une Table ?
Cette fonctionnalité est indispensable pour pratiquement toute application qui affiche des données à ses utilisateurs.
Avec cela, vos utilisateurs pourront sélectionner plusieurs éléments et effectuer des opérations sur eux (comme les dupliquer ou les supprimer par exemple).
Dans cet article, je vais vous montrer comment faire exactement cela dans Bubble !
Étape 1 - Construire votre Table
Évidemment, la première étape de ce tutoriel est de construire l'interface de votre Table.
Je recommande d'utiliser l'élément Table de Bubble. Même s'il est encore en bêta, il est très pratique et aide beaucoup à construire de belles Tables assez rapidement.
Dans mon cas, j'utiliserai le composant Table 6 de la bibliothèque Nocodable Component.
Il est livré avec tous les workflows pré-construits, donc si vous ne voulez pas passer du temps à construire cela de zéro, vous devriez y jeter un œil !
Voici avec quoi je vais travailler :
Comme vous pouvez le voir, c'est une Table assez simple affichant des Factures.
Une chose importante à noter :
Les cases à cocher dans cette Table ne sont pas faites en utilisant les éléments checkbox natifs de Bubble.
Ce sont simplement des éléments Icons, car cela nous donne plus de flexibilité. Nous y reviendrons plus tard.
Maintenant que vous avez construit l'interface de votre Table, vous pouvez aller de l'avant et la lier à votre Data Source.
Étape 2 - Stocker notre liste d'éléments sélectionnés
Très bien, maintenant que nous avons construit l'interface de notre Table, nous pouvons commencer à travailler sur la logique.
Fondamentalement, tout ce que nous voulons faire est de garder une trace de la liste des Factures (ou du Data Type de votre choix) qui ont été sélectionnées par un utilisateur.
Présenté comme ça, ça ne semble pas trop difficile, n'est-ce pas ?
Maintenant que nous savons cela, nous devons trouver un moyen de stocker cette liste d'éléments sélectionnés.
Et la meilleure façon de le faire est d'utiliser un Custom State.
Alors allons-y et créons un Custom State qui stockera une liste des éléments qui ont été sélectionnés par notre utilisateur.
Vous pouvez l'ajouter où vous voulez sur votre page, mais dans mon cas, je vais l'attacher à ma Table.
Comme mentionné dans la capture d'écran, vous devez vous assurer que le Data Type de ce Custom State est identique au data type de votre Table.
Par exemple, si votre Table affiche une liste d'"Articles de Blog", vous définirez le data type de votre Custom State sur "Articles de Blog".
Très bien, maintenant que nous avons configuré notre Custom State, nous pouvons passer à l'étape suivante : construire les workflows !
Étape 3 - Construire nos Workflows
Avant de plonger dans l'éditeur de Workflow, décomposons ce que nous voulons que notre fonctionnalité fasse lorsque l'utilisateur clique sur une case à cocher :
1 - Si l'élément n'est pas déjà sélectionné --> Nous voulons l'ajouter à la liste stockée dans notre Custom State
2 - Si l'élément est déjà sélectionné --> Nous voulons supprimer cet élément de la liste stockée dans notre Custom State
Donc, à première vue, nous allons avoir besoin de deux workflows !
Commençons par le premier.
Workflow 1 - Ajouter un élément à notre liste
Très bien, allons-y et ajoutons un nouveau workflow à votre Checkbox.
Ce workflow sera celui qui ajoutera l'élément à la liste donc comme nous l'avons dit plus tôt, il ne devrait être déclenché que lorsque l'élément de la ligne n'est pas déjà sélectionné.
Donc, dit d'une autre manière : quand notre Custom State ne contient pas cet élément.
Alors ajoutons une condition à notre workflow :
Avec cette condition définie, nous nous assurons maintenant que ce workflow s'exécutera uniquement si cet élément particulier n'est pas déjà sélectionné.
Alors continuons à construire notre workflow pour qu'il ajoute effectivement l'élément à notre Custom State :
Pour ce faire, nous allons utiliser une action "Set State of an Element" pour changer la valeur de notre Custom State.
Et la valeur que nous allons donner à ce Custom State est sa Current Value + l'élément que nous voulons ajouter.
De cette façon, si le Custom State contient déjà des éléments, notre workflow ajoutera simplement notre élément à cette liste !
Donc, voici à quoi ça ressemble :
Et voilà, maintenant ce workflow ajoutera de nouveaux éléments à notre liste d'éléments sélectionnés !
Workflow 2 - Retirer un élément de notre liste
Maintenant que nous pouvons ajouter des éléments à notre liste, nous devons évidemment pouvoir les supprimer également !
Tout ce que nous devons faire ici est de dupliquer le workflow qui ajoute un élément, et simplement le "renverser".
Nous voulons qu'il se déclenche uniquement lorsque l'élément est déjà présent dans la liste de notre Custom State et nous ne voulons pas qu'il l'ajoute, nous voulons qu'il le supprime !
Donc voici à quoi ressemblera notre condition :
Comme vous pouvez le voir, la condition est passée d'un opérateur "Doesn't contain" à un opérateur "Contains".
Et maintenant, pour notre workflow :
Comme vous pouvez le voir ici, l'expression que nous utilisons pour définir la valeur de notre Custom State a un peu changé.
Au lieu de l'opérateur ":plus item", nous utilisons le ":minus item", qui supprime effectivement un seul élément d'une liste.
Et c'est tout !
Tout ce que nous devons faire maintenant est d'ajouter une simple condition à nos cases à cocher pour montrer quand l'élément est sélectionné.
Étape 4 - Changer l'apparence de notre checkbox quand un élément est sélectionné
Dernière étape de notre tutoriel : faire en sorte que l'apparence de la checkbox change lorsqu'un élément est déjà sélectionné.
Faire cela est assez simple, tout ce que vous devez faire est d'ajouter cette condition à votre icône checkbox :
Fondamentalement, cette condition vérifie simplement si l'élément de la ligne est présent dans notre Custom State.
Si c'est le cas, alors cela signifie que cet élément est déjà sélectionné et nous devons donc refléter ce changement !
Et voilà ! Votre fonctionnalité de sélection par checkbox est maintenant entièrement fonctionnelle 😎
Vous pouvez maintenant utiliser la liste stockée dans notre Custom State pour effectuer des opérations, comme la supprimer ou modifier le statut de chaque élément par exemple.
Ce sera très pratique pour vos utilisateurs !
FAQ - Sélection Multiple Bubble.io
Q : Comment faire une sélection multiple dans Bubble ?
Pour créer une sélection multiple dans Bubble, utilisez un Custom State pour stocker la liste des éléments sélectionnés. Créez deux workflows : un pour ajouter les éléments (quand la checkbox est cochée) et un autre pour les retirer (quand elle est décochée).
Q : Pourquoi utiliser un Custom State pour la sélection multiple ?
Le Custom State permet de stocker temporairement la liste des éléments sélectionnés sans modifier votre base de données. C'est la solution la plus performante et flexible pour gérer une sélection multiple dans Bubble.
Q : Comment savoir si un élément est sélectionné dans Bubble ?
Ajoutez une condition sur votre checkbox qui vérifie si l'élément de la ligne est présent dans votre Custom State. Si oui, changez l'apparence de la checkbox pour montrer qu'elle est cochée.
Q : Faut-il utiliser les checkboxes natives de Bubble ?
Non, il est recommandé d'utiliser des éléments Icons à la place des checkboxes natives de Bubble. Cela offre plus de flexibilité pour personnaliser l'apparence et le comportement de vos cases à cocher.
Q : Comment supprimer plusieurs éléments en même temps dans Bubble ?
Une fois vos éléments sélectionnés dans le Custom State, créez un workflow qui utilise cette liste pour effectuer des opérations en masse comme "Delete a list of things" ou modifier plusieurs enregistrements simultanément.
Q : Peut-on sélectionner tous les éléments d'une table en un clic ?
Oui, créez un bouton "Tout sélectionner" qui définit votre Custom State avec la valeur de votre Table's list of items. Pour tout désélectionner, réinitialisez simplement le Custom State à une liste vide.
