16 sept. 2024
Maxime Gadras
Bubble est une plateforme no-code extrêmement puissante et flexible qui permet de créer des applications web sans avoir besoin d’écrire des lignes de code.
Parmi les nombreuses fonctionnalités offertes par l'outil, l'une des plus importantes, mais souvent sous-estimée, est celle des custom states.
Les custom states sont des variables présentes sur vos pages qui permettent de gérer des informations temporaires dans votre application, sans avoir à enregistrer ces données dans la base de données.
Dans cet article, nous allons explorer ce que sont les custom states, comment ils fonctionnent, et comment vous pouvez les utiliser efficacement pour optimiser la logique de votre application. Que vous soyez débutant ou un utilisateur plus expérimenté de Bubble, cet article vous fournira une compréhension complète de cette fonctionnalité essentielle, avec des exemples concrets.
Qu'est-ce qu'un custom state dans Bubble ?
Un custom state est une variable temporaire associée à un élément spécifique dans votre application, comme un bouton, une page, un groupe ou tout autre objet. Contrairement aux données stockées dans la base de données, les custom states ne sont pas permanents : ils existent uniquement tant que l’utilisateur est sur la page ou interagit avec l’application. Dès que l’utilisateur quitte la page ou que celle-ci est rechargée, les valeurs des custom states sont perdues (et la valeur de ce dernier est réinitialisée).
Les custom states sont utilisés pour stocker des informations temporairement, par exemple, pour suivre l’état d’un élément ou d’un utilisateur, modifier l’affichage de l’application sans avoir à recharger la page, ou gérer des interactions complexes entre différents éléments.
Pourquoi utiliser des custom states ?
Il existe plusieurs cas d'usage pour lesquelles vous pourriez préférer utiliser des custom states plutôt que de stocker des informations directement dans la base de données :
Performance et vitesse
Enregistrer de la donnée dans un custom state est beaucoup plus rapide que d'écrire cette même data dans la base de données. Lorsque vous enregistrez des données dans la base, Bubble doit interagir avec le serveur pour traiter la demande, ce qui peut ralentir l’application, surtout si vous travaillez avec des informations qui changent fréquemment. Les custom states, en revanche, sont stockés directement dans l'élément sur lequel ils sont définis, ce qui permet une interactivité fluide et rapide.
Simplicité
Les custom states permettent de gérer des données temporaires sans les complexités associées à la création de fields dans votre base de données. Par exemple, si vous souhaitez suivre l’état d’un bouton (activé ou désactivé) ou d’un élément (affiché ou masqué), il est souvent plus simple et plus rapide de le faire avec un custom state.
Dynamisme
Les custom states vous permettent de rendre votre interface utilisateur plus dynamique sans avoir à recharger toute la page ou à modifier les données dans la base de données. Par exemple, vous pouvez utiliser un custom state pour gérer l’affichage de différents onglets ou de sections, en fonction des interactions de l’utilisateur.
Comment fonctionnent les custom states ?
Un custom state est toujours associé à un élément spécifique, qu’il s’agisse d’une page, d’un groupe ou d’un bouton par exemple. Vous pouvez créer un custom state à partir du property editor et lui assigner une valeur. Voici les étapes pour ajouter et utiliser un custom state dans votre application :
Créer un custom state
Sélectionnez un élément (par exemple, un bouton ou un groupe) auquel vous souhaitez associer le custom state.
Dans le panneau des propriétés de l’élément, cliquez sur le bouton "Element Inspector, puis sur "Add a new custom state".
Vous aurez alors la possibilité de définir un nom pour votre custom state (par exemple, "onglet actif" ou "menu ouvert") et de spécifier un type de données (nombre, texte, booléen, etc.).
Enfin, vous pouvez définir la valeur initiale de ce custom state.
Modifier la valeur d’un custom state
Une fois votre custom state créé, vous pouvez le modifier à tout moment à travers un workflow. Par exemple, vous pouvez définir un workflow qui change la valeur du custom state lorsqu’un utilisateur clique sur un bouton ou interagit avec un élément de l’interface.
Allez dans le panneau des workflows et créez un nouveau workflow basé sur une interaction (comme le clic sur un bouton).
Ajoutez une action "Set State" à ce workflow.
Sélectionnez l’élément auquel le custom state est associé, puis choisissez le custom state que vous souhaitez modifier.
Définissez la nouvelle valeur du custom state (par exemple, changer un état de "false" à "true" pour basculer entre des affichages).
Utiliser un custom state dans des conditions
Vous pouvez utiliser les custom states pour conditionner l’affichage de certains éléments dans votre application. Par exemple, vous pourriez afficher ou masquer un groupe en fonction de la valeur d’un custom state.
Sélectionnez l’élément que vous souhaitez rendre conditionnel.
Dans l’onglet "Conditions", créez une nouvelle condition qui dépend de la valeur du custom state (par exemple, "si l'état personnalisé 'menu ouvert' est vrai, afficher cet élément").
Définissez ce qui doit se passer lorsque la condition est remplie (par exemple, afficher ou masquer l’élément).
Quelques cas d’usage concrets des custom states
Pour mieux comprendre comment utiliser les custom states, explorons quelques cas d’usage qui montrent à quel point ils peuvent simplifier le développement de vos apps.
Gestion d’un menu déroulant
Supposons que vous souhaitiez créer un menu déroulant qui s’affiche ou se cache lorsque l’utilisateur clique sur un bouton. Vous pouvez utiliser un custom state pour gérer l’état d’affichage du menu.
Créez un custom state appelé "menu_ouvert" sur le bouton qui déclenche le menu, de type yes/no.
Configurez un workflow pour changer la valeur du custom state chaque fois que l’utilisateur clique sur le bouton (passer de "false" (no) à "true" (yes) et inversement).
Dans les paramètres du menu, ajoutez une condition pour que le groupe qui affiche le menu ne soit visible uniquement lorsque le custom state "menu_ouvert" est défini sur "true".
Cela vous permet de créer un menu interactif sans avoir à interroger la base de données ni recharger la page.
Gestion des onglets dans une interface
Dans une application avec plusieurs groupes ou onglets, vous pouvez utiliser un custom state pour gérer quel onglet est actuellement actif.
Créez un custom state appelé "onglet_actif" sur le groupe contenant les onglets, de type text.
À chaque clic sur un onglet, utilisez un workflow pour définir la valeur du custom state sur le nom ou l’index de l’onglet.
Pour chaque groupe qui contient les éléments de l'onglet, créez une condition qui le rend visible uniquement si la valeur du custom state correspond au nom de l’onglet sélectionné.
Cette méthode permet de changer rapidement d’onglet sans avoir à recharger la page, améliorant ainsi l’expérience utilisateur.
Filtrer des listes en temps réel
Les custom states sont également utiles pour filtrer des listes ou des repeating groups de manière dynamique. Par exemple, si vous avez une liste de produits que vous souhaitez filtrer par catégorie sans recharger la page, vous pouvez utiliser un custom state.
Créez un custom state appelé "catégorie_sélectionnée".
Chaque fois que l’utilisateur clique sur un bouton de catégorie, mettez à jour le custom state avec la nouvelle catégorie sélectionnée.
Dans l'onglet "condtionnal" de votre repeating group, ajouter une ou plusieurs conditions pour filtrer les éléments en fonction de la valeur du custom state, en modifiant leur data source.
Cela permet de mettre à jour l’affichage des produits en temps réel, offrant une expérience utilisateur fluide et réactive.
Suivi de l'état d'une session utilisateur
Les custom states peuvent également être utilisés pour suivre l’état d’une session utilisateur. Par exemple, vous pouvez utiliser un custom state pour savoir si un utilisateur a accepté les conditions générales ou complété un profil.
Imaginons une page d'inscription, où l'utilisateur ne peux confirmer la création de son compte (en cliquant sur un bouton "inscription") qu'après avoir coché qu'il acceptait les conditions d'utilisation.
Créez un custom state sur un élément global, comme la page, de type "yes / no". Nommez-le "conditions_utilisation" et définissez sa valeur par défaut sur no.
Lorsque l’utilisateur coche la case des conditions d'utilisation, définissez un workflow qui modifie le custom state sur yes.
Définissez le bouton "inscription" sur non cliquable par défaut.
Ajouter une condition sur le bouton "inscription" qui le rende cliquable lorsque le custom state "conditions_utilisation" est égal à yes.
Cela permet de suivre l’état de l’utilisateur de manière temporaire sans avoir à stocker ces informations dans la base de données, sauf si c’est nécessaire.
Meilleures pratiques pour l’utilisation des custom states
Bien que les custom states soient extrêmement puissants, il est important de suivre quelques bonnes pratiques pour s’assurer qu’ils sont utilisés de manière efficace :
Nommer clairement vos custom states
Pour éviter toute confusion, donnez des noms clairs et descriptifs à vos custom states. Utilisez des noms comme "onglet_actif" ou "menu_déroulant_visible" plutôt que des noms vagues comme "state1" ou "value". Cela rendra votre application plus facile à comprendre et à maintenir.
Limiter le nombre de custom states
Même si les custom states sont pratiques, essayez de ne pas en abuser. Trop de custom states peuvent rendre votre application difficile à gérer. Si vous constatez que vous utilisez de nombreux custom states pour des données qui doivent être persistantes, envisagez de stocker ces informations dans la base de données.
Utiliser les custom states pour des données temporaires
Utilisez les custom states pour des données temporaires et spécifiques à l’interface, comme l’état d’un bouton ou l’affichage d’une section. Si vous devez suivre des informations sur le long terme ou entre plusieurs sessions utilisateur, il est préférable de stocker ces données dans la base de données.
Stocker les custom states sur des éléments logiques ou de haut niveau dans la hiérarchie de votre page
Bubble permet de stocker les custom states sur n'importe quel élément d'une page. Cependant attention, il faut que vous vous souveniez d'où vous les stockez !
Mon conseil : créez systématiquement vos custom states sur les éléments de haut niveau (votre page, un group qui contient l'ensemble des groups de la page…) ou les éléments les plus logiques par rapport à votre cas d'usage (ex: vous souhaitez créer un custom state qui défini le statut cliquable d'un bouton, créer le CS sur le bouton !).
Conclusion - une fonctionnalité indispensable à vos apps
Les custom states sont une fonctionnalité puissante et flexible de Bubble qui vous permet de gérer des informations temporaires et de créer des interfaces dynamiques sans avoir à recharger la page ou à stocker des données dans la base de données. En comprenant comment et quand les utiliser, vous pouvez rendre votre application plus fluide, rapide et interactive, tout en simplifiant la logique de votre application.
En tant que débutant, les custom states peuvent sembler intimidants au départ, mais avec un peu de pratique et en suivant des exemples concrets comme ceux présentés ici, vous pourrez les utiliser pour créer des applications web encore plus performantes et user-friendly.
Pour aller plus loin…
Si vous souhaitez voir concrètement comment s’utilisent les custom states au sein d’une application Bubble, voici une vidéo issue de ma chaîne Youtube qui vous résumera l’ensemble des concepts que nous venons de voir :
