Les Custom States (ou États personnalisés) sont l'un des concepts les plus puissants mais souvent mal compris de Bubble.io. Contrairement aux données stockées en base de données, les Custom States sont des variables temporaires qui existent uniquement dans le navigateur de l'utilisateur pendant sa session active. Ils constituent un pilier fondamental pour créer des applications interactives et réactives sans avoir à constamment manipuler la base de données.
Dans cet article, nous allons explorer les Custom States en profondeur, les situer avec des cas d'usage précis et comprendre en quoi ils peuvent améliorer l'expérience utilisateur et optimiser les performances de vos applications Bubble.io.
Les Custom States présentent plusieurs avantages par rapport au stockage classique en base de données :
🔑 Concept clé : Pensez aux Custom States comme à un tableau blanc temporaire où vous notez des informations pendant que vous travaillez, mais que vous effacez une fois la tâche terminée. Ils disparaissent au rafraîchissement de la page !
Avant d'aller plus loin, clarifions la distinction fondamentale entre les changements en Custom States et en base de données dans Bubble :
Bubble permet de créer plusieurs types de Custom States :
Pour créer un Custom State dans Bubble.io, c'est très simple. Pour cet exemple, nous allons l'appliquer à un bouton.
💡 Astuce : Adoptez une convention de nommage cohérente pour vos Custom States. Par exemple, préfixez-les avec "cs" ou "state" pour les distinguer facilement des champs de base de données dans vos workflows.
Pour modifier un Custom State, utilisez l'action "Set state" dans votre workflow :
Les formulaires multi-étapes constituent l'un des cas d'utilisation les plus courants pour les Custom States.
Exemple concret :
⚠️ Note importante : L'idée ici est de stocker les données saisies dans des Custom States tout au long du processus, puis de les enregistrer en base de données uniquement à la dernière étape. Cela évite des appels serveur inutiles, de la consommation de WU et améliore l'expérience utilisateur.
Les Custom States sont parfaits pour gérer un panier d'achat avant la finalisation d'une commande.
Exemple concret :
💡 Astuce pratique : Pour gérer les quantités, vous pouvez soit ajouter plusieurs fois le même produit à la liste, soit créer un Custom State de type objet qui stocke le produit et sa quantité.
Adaptez l'apparence et le comportement de votre interface en fonction des actions de l'utilisateur.
Exemple concret : (Basculer rapidement entre 2 interfaces)
🔥 Découvrez notre Tips & Tuto sur le sujet : Comment changer d'interface avec un Custom State
L'utilisation stratégique des Custom States peut considérablement améliorer les performances de votre application Bubble.io :
💡 Insight performance : Sur un formulaire multi-étapes complexe, l'utilisation de Custom States pour stocker les données intermédiaires peut réduire la consommation de WU jusqu'à 80% par rapport à une sauvegarde à chaque étape !
🔴 Problème : Perte de données au rafraîchissement de la page.
✅ Solution : Utilisez le localStorage (via le plugin du même nom) ou la base de données pour les données qui doivent persister.
🔴 Problème : Code difficile à maintenir et à déboguer.
✅ Solution : Utilisez des objets pour regrouper les states liés (ex: un objet "filtres" plutôt que plusieurs states séparés).
🔴 Problème : States inaccessibles ou comportement inattendu.
✅ Solution : Créez les states au niveau approprié et utilisez la référence correcte (cette page vs groupe parent).
🔴 Problème : Erreurs JavaScript lorsque vous essayez d'accéder à un state non initialisé.
✅ Solution : Toujours définir une valeur par défaut appropriée.
Les Custom States sont l'un des outils les plus puissants de Bubble.io pour créer des applications dynamiques et performantes. En maîtrisant leur utilisation, vous pouvez considérablement améliorer l'expérience utilisateur et optimiser les performances de vos applications.
N'hésitez pas à expérimenter avec différentes approches et à combiner les Custom States avec d'autres fonctionnalités de Bubble pour créer des interactions riches et complexes !
Nous ferons prochainement un deuxième article plus poussé sur l'utilisation des Custom States avancés...
Restez en alerte !
