Arrête d'utiliser 2 modals pour l'ajout et la modification de données

Quand on développe sur Bubble, on est souvent tenté de créer deux modals distincts : un pour ajouter de nouvelles données et un autre pour les modifier. Mais si tu veux améliorer l'expérience utilisateur et gagner du temps, il est préférable d'utiliser une seule popup pour ces deux actions. Dans cet article, je vais te montrer pourquoi cette approche est plus efficace, et je te guiderai pas à pas pour la mettre en place sur ton application Bubble.

Pourquoi il est préférable de n'avoir qu'un seul modal ?

1. Optimisation de l'Expérience Utilisateur (UX)

L'utilisation d'une seule popup simplifie la navigation pour tes utilisateurs. Ils n'ont pas à s'habituer à deux interfaces différentes pour accomplir des actions similaires, ce qui rend l'expérience plus fluide et intuitive.

2. Gain de temps de développement

Créer et maintenir deux modals signifie double travail : tu dois configurer deux fois les workflows, les conditions et les éléments visuels. Avec une seule popup, tu n'as qu'une interface à gérer, ce qui te permet de te concentrer sur d’autres tâches.

3. Code et design plus propres

En consolidant les deux modals en une seule, tu allèges ton éditeur visuel et tes workflows. Moins de répétition signifie moins de bugs et une maintenance facilitée sur le long terme.

Comment créer une popup unique pour ajouter et modifier des données en base sur Bubble : guide pas à pas

Pour te guider, je vais prendre l'exemple très répandu d'une popup d'ajout/de modification de contact dans un CRM.

Étape 1 : Ajouter une popup dans ton app

Commence par créer une nouvelle popup dans ton application Bubble. Cette popup servira à la fois pour ajouter et modifier des données.

💡 Tip : Assure-toi de remplir le Type of content de ta popup - dans mon cas il s'agit de ma data type "Contact".

Étape 2 : Créer un custom state pour la popup

Ajoute un custom state à la popup, qui va permettre de définir l'état de ta popup en fonction de comment tu vas l'ouvrir (via un bouton ajouter ou modifier).

Ce custom state, que tu peux appeler "mode", déterminera si la popup est en mode "ajout" ou "modification".

💡 Tip : tu peux aussi utiliser un custom state type yes/no puisqu'il n'y a que deux modes disponibles: Ajout/Modifier

Étape 3 : Configurer les éléments de la popup en fonction du Mode

Utilise des conditions dynamiques pour changer le texte du header en fonction du custom state. Par défaut, il affiche "Nouveau contact". Si le mode est "modifier", affiche "Modifier contact".

Pour les inputs (nom, email, téléphone, etc.), configure le initial content afin qu’il affiche les données existantes lorsque le mode est "modification". Sinon, les inputs resteront vides pour l’ajout de nouvelles entrées.

Pour le bouton, c'est le même principe que pour le header : par défaut, il affiche Ajouter mais si le mode est "modifier", il affiche "enregistrer"

Étape 4: Configurer les Workflows pour Ajouter et Modifier

Pour enregistrer tes données en base, tu vas ajouter un seul workflow, dans lequel tu vas ajouter des steps conditionnels:

• Step 1 : Enregistre les données en base - en créant un nouveau contact, lorsque la popup est en mode "ajout"

• Step 2: Enregistre les données en base - en modifiant le contact affiché dans la popup, lorsque la popup est en mode "modifier"

Ce workflow utilisera les infos de la même popup, mais effectuera des actions différentes en fonction du mode défini par le custom state.

Étape 5: Envoyer l'info du mode à la Popup

C'est au moment de l'ouverture de la popup que tu vas définir son mode.

Tu vas créer un premier workflow pour le bouton "ajouter contact":

• Step 1 : reset les inputs de la popup

• Step 2: ouvre la popup

• Step 3: définis le custom state mode sur "ajout"
  
  

Ensuite, tu créer un second workflow qui part de ton tableau d'affichage pour ouvrir le contact :

• Step 1 : reset les inputs de la popup

• Step 2: ouvre la popup

• Step 3 :display les data du contact dans la popup

• Step 4: définis le custom state mode sur "modifier"

…. et tadaaaaaa 🎉

Si tu as suivi toutes les étapes, tu devrais te retrouver avec une même popup qui te permet à la fois d'ajouter de nouvelles données en base et de modifier les existantes !

Si tu as des questions, laisse-moi un commentaire 👇