Les Custom States, ce sont des variables temporaires qui nous permettent de créer des éléments visuels dans nos applications sans avoir à faire de changements en base de données.
Dans ce deuxième épisode de Tips &Tutos, on va voir une autre utilisation de Custom State : Comment changer d'interface visuelle. Pour la démo, nous aurons 3 interfaces différentes : Documents, Produits et Tâches.
→ Retrouvez le 1er épisode : Comment animer un bouton avec un Custom State
1️⃣ Etape 1 : Construire les interfaces & Design général
→ Créez un Groupe général (en Row) qui va contenir vos 2 autres groupes principaux :
2️⃣ Etape 2 : Créer un Option Set
→ Créez un Option Set, renommez le "Type d'interface". Donnez lui 3 options :
3️⃣ Etape 3 : Le Repeating Group (RG)
→ Type of content : "Type d'interface" (l'Option Set)
→ Data source : All Type d'interface
→ Texte à l'intérieur du RG : Current Cell's Type d'interface's Display
4️⃣ Etape 4 : Le Custom State (CS)
→ Créez un Custom State au niveau du Groupe de droite. Renommez le "Interface", Type : "Type d'interface" (l'Option Set)
→ Valeur par défault : "Documents"
5️⃣ Etape 5 : Donnez une valeur conditionnelle à vos groupes d'interface
Pour l'exemple, nous allons simplement expliquer les valeurs à rentrer pour l'interface "Documents". Si vous avez un doute, référez vous à la vidéo (2:51 min).
→ Layouts : Cochez Visible on page load + Collapse when Hidden
→ Conditionnel : When Group Right_CS's Interface is not Documents > This element is visible (A DECOCHER)
En termes non techniques, on demande simplement à Bubble que lorsque le Custom State du Groupe de droite n'est pas réglé sur "Documents", on ne veut pas que l'interface Documents soit visible.
On pourrait aussi le faire dans l'autre sens, mais il faudrait alors décocher "Visible on page load" dans les layouts.
6️⃣ Etape 6 : Créer le Workflow
Dernière étape pour faire fonctionner le tout, il faut maintenant créer notre workflow pour donner la valeur que l'on veut à notre Custom State et ainsi pouvoir naviguer entre nos interfaces.
→ Ajouter un Workflow sur le texte du RG
→ Set State of an element : Choisir le groupe de droite (CS)
→ Custom State : "Interface"
→ Valeur : Current cell's Type d'interface
Retrouvez nos derniers Tips & Tutos sur Bubble et ne manquez pas les suivants !
