Comment créer une icône qui affiche/cache une section quand on clique

Introduction

Dans ce guide, nous allons apprendre à utiliser les fonctionnalités « save page data » et « show/hide component based on a condition » pour créer un mécanisme interactif permettant d'afficher ou de cacher un élément de l'interface utilisateur. Qu’il s’agisse d’une icône, d’une boîte ou même d’un texte, cette méthode est adaptable à de nombreux cas. Pour illustrer, nous allons concevoir un exemple où une section d’information peut être réduite ou ouverte grâce à un clic sur une icône, tout en faisant varier l’apparence de l’icône selon son état.

Prérequis:

Il faut, au préalable, avoir une page contenant un panneau d’information, composer d’une section pour le titre et une section avec nos champs.

Étapes à suivre

1. Ajouter une icône "+" avec un comportement interactif

   1. Glisser une composante « icon » à la droite du texte dans la section titre. Changer l’icône pour « + » et l’aligner à droite. (Dans l’exemple, la couleur a été changer pour « gray200 ».

       

   2. Ajoute un "behavior save page data" sur l’icône pour sauvegarder les données de la page pendant la session. Configure ce comportement pour s’exécuter lors d’un clic, en utilisant la clé afficherInformationsDuCompte. Sous "value source", sélectionne "other" et définis la valeur à true en mode JavaScript.

      

   ***Remarque #1 : On peut consulter la liste de nos « Page State » depuis le menu « … », « state », qui ouvre un panneau à la droite de votre structure :

2. Créer une icône "-" et définir son rôle

   Duplique l’icône « + », puis change l’icône pour « - » et sa valeur pour « false » dans « save page data ». *** Enlève « align right », sur cette icône pour avoir un visuel d’une icône qui remplace l’autre.

3. Configurer l'affichage conditionnel de la section

   Ajoute un « behavior » de type « show/hide component based on a condition » sur la « box » qui contient les champs. Modifie le mode pour « PageState » et choisit le « pageState » créé à l’étape 1.

   N. B. : si vous ne voyez pas votre clef de « page state » dans les options, simplement basculer en mode Live puis, cliquer sur une des icônes ayant le « save page state ». Dès lors, les 2 icônes fonctionnent, mais sont toutes deux visibles simultanément.

   

4. Cacher l’icône inactive avec des conditions JavaScript

Pour cacher l’icône de la fonction non disponible, on ajoute un « behavior » de type « show/hide component based on a condition » en mode JavaScript :

Sur l’icône « + » :

!pageState. afficherInformationsDuCompte

Sur l’icône « - » :

!!pageState. afficherInformationsDuCompte

***Remarque #2 : Si tu souhaites utiliser la même icône pour afficher ou cacher une section, il suffit d’ajouter un « behavior » de type « save page data », « onClick » avec la clef de votre choix (ex :afficherInformationsDuCompte), value source « other » et en mode JavaScript : !pageState. afficherInformationsDuCompte

Conclusion

En combinant des comportements "save page data" et "show/hide component based on a condition," vous pouvez créer une interface interactive où une icône permet d’afficher ou de cacher une section d'information. Cette méthode améliore la clarté et l'expérience utilisateur grâce à des éléments dynamiques et intuitifs.