Quand il s'agit d'afficher des données, Bubble vous facilite grandement la tâche.
Vous glissez un Repeating Group sur votre page, vous le branchez à vos données et c'est parti.
Mais !
Ce n'est pas toujours aussi simple. Si vous avez beaucoup de données retournées par votre recherche et injectées dans votre Repeating Group, il pourrait finir par afficher des centaines ou des milliers d'éléments en même temps.
Le résultat ? Un temps de chargement élevé et une forte consommation de Workload Unit.
Pas bon.
Heureusement, il existe des solutions. Vous devez simplement limiter le nombre d'éléments affichés dans votre Repeating Group aux "premiers X éléments" et donner aux utilisateurs la possibilité de "Voir plus" avec un clic sur un bouton.
Et vous avez de la chance, c'est précisément ce que vous allez apprendre dans ce tutoriel.
Étape 1 - Configurer votre Repeating Group
Évidemment, la première étape de ce tutoriel sera d'avoir un Repeating Group configuré et prêt à être utilisé.
Il peut afficher n'importe quel type de données (produits, hôtels, articles de blog... vous voyez l'idée).
Dans mon cas, j'utilise une section d'articles de blog que j'ai copiée du Bubble.io UI Kit de Nocodable Component.
Rien de trop compliqué.
Comme vous pouvez le voir, j'ai fait une simple recherche pour mon Data Type dans mon Repeating Group.
Étape 2 - Stocker le nombre d'éléments à afficher
Maintenant vient la première partie importante, qui est de suivre le nombre d'éléments que nous voulons montrer aux utilisateurs.
Et comment gardons-nous temporairement une trace de quelque chose ?
C'est exact, avec un Custom State !
Alors allons-y et créons-en un. Quand c'est possible, j'aime attacher mes custom states à la page, c'est ce que j'ai fait ici. Mais vous pouvez l'attacher où vous voulez.
Comme vous pouvez le voir, j'ai défini son Type sur "Number". C'est vraiment important pour s'assurer que nous pouvons l'utiliser comme un nombre réel.
Assurez-vous également de définir une Default Value. Dans mon cas, je l'ai définie sur 5, mais vous pouvez choisir n'importe quel nombre qui correspond à votre cas d'usage.
Étape 3 - Limiter le nombre d'éléments à afficher de notre Repeating Group
Maintenant que nous stockons effectivement le nombre d'éléments que notre Repeating Group doit réellement afficher, nous pouvons l'utiliser.
Pour ce faire, nous ajouterons simplement l'opérateur ":items until #" directement après la data source de notre Repeating Group.
Et pour le nombre, nous utiliserons la valeur de notre Custom State.
Avec cela, Bubble saura qu'il ne doit charger que "les premiers X éléments" retournés par votre recherche. X étant la valeur du custom state que nous avons créé plus tôt (qui dans mon cas est 5 par défaut).
Très bien, maintenant le nombre d'éléments retournés par notre recherche est effectivement limité.
Si vous cliquez sur preview, vous devriez le voir (dans mon cas, je n'obtiens que 5 éléments). Si ce n'est pas le cas, assurez-vous d'avoir défini une Default Value sur votre custom state !
Étape 4 - Faire fonctionner notre bouton Voir plus
Très bien, passons maintenant à la partie importante, faire fonctionner notre bouton Voir plus.
Si vous avez compris ce que nous avons fait plus tôt, vous savez que la seule chose que nous devons faire est d'augmenter la valeur stockée dans notre Custom State.
Une fois que ce sera fait, notre Repeating Group affichera le nombre d'éléments correspondant.
Donc fondamentalement, chaque fois que nous cliquons sur le bouton "Voir plus", nous voulons que notre custom state augmente de "X" (de 5 par exemple).
Pour faire cela, ajoutons d'abord un Button sous notre Repeating Group (ne le placez pas à l'intérieur du RG, placez-le directement en dessous).
Une fois que vous avez fait cela, ajoutons ce workflow dessus :
Comme vous pouvez le voir ci-dessus, j'ai utilisé une action "Set State of an Element".
Maintenant, la chose intéressante que vous devez voir est que dans mon expression, je pars toujours de la valeur du Custom state et j'y ajoute ensuite 5.
Maintenant, si vous cliquez sur preview et essayez, vous verrez que ça fonctionne parfaitement !
Étape 5 - Masquer le bouton "Voir plus" quand il n'y a plus de résultats à afficher
Dernière étape, nous devons nous assurer de masquer ce bouton "Voir plus" lorsqu'il n'y a plus de résultats à afficher.
Sinon, ce serait une expérience frustrante pour vos utilisateurs, et nous ne voulons pas cela.
Alors ajoutons une condition sur notre bouton pour le masquer quand nécessaire.
Fondamentalement, ce que nous voulons faire est de masquer notre bouton lorsque la valeur de notre Custom State (c'est-à-dire le nombre d'éléments à afficher) est supérieure ou égale au nombre d'éléments que nous avons réellement dans notre base de données.
Voici à quoi ça ressemble :
Maintenant, la chose délicate est de savoir que nous devons en fait utiliser exactement la même data source que nous utilisons dans notre Repeating Group.
Pourquoi ? Eh bien parce que si nous essayons de prendre le "Repeating Group's Items:Count", cela ne nous donnera pas le bon nombre de résultats, car nous l'avons limité.
Donc allez-y et copiez la data source de votre repeating group et ajoutez un opérateur ":count".
Et voilà ! Vous avez maintenant un bouton Voir plus entièrement fonctionnel !
Assurez-vous de l'utiliser chaque fois que possible. C'est un excellent moyen d'optimiser votre consommation de Workload Unit et votre temps de chargement de page.
Questions fréquentes
Comment faire un bouton "Voir plus" dans Bubble ?
Créez un Custom State de type Number pour stocker le nombre d'éléments à afficher. Utilisez l'opérateur ":items until #" sur votre Repeating Group avec la valeur du Custom State, puis créez un bouton qui augmente cette valeur à chaque clic.
Pourquoi limiter l'affichage d'un Repeating Group ?
Limiter l'affichage évite de charger des centaines d'éléments en une fois, ce qui réduit drastiquement le temps de chargement et la consommation de Workload Units. C'est essentiel pour optimiser les performances de votre application Bubble.
Quelle valeur mettre par défaut pour un bouton Voir plus ?
La valeur par défaut dépend de votre contenu. Généralement, 5 à 10 éléments pour des articles de blog, 12 à 24 pour des produits en grille. L'important est de trouver l'équilibre entre UX et performances.
Comment masquer le bouton Voir plus quand il n'y a plus de résultats ?
Ajoutez une condition sur votre bouton : cachez-le quand la valeur du Custom State est supérieure ou égale au nombre total d'éléments (utilisez la même data source que votre Repeating Group avec l'opérateur :count).
Peut-on charger 20 éléments à chaque clic sur Voir plus ?
Oui, modifiez simplement la valeur que vous ajoutez au Custom State dans votre workflow. Au lieu d'ajouter 5, ajoutez 20. Adaptez ce nombre en fonction de la taille et du type de vos éléments.
Le bouton Voir plus consomme-t-il beaucoup de Workload Units ?
Non, au contraire ! Le bouton Voir plus optimise la consommation de Workload Units en chargeant les données progressivement plutôt que tout d'un coup. C'est une des meilleures pratiques pour réduire les coûts sur Bubble.
