Comment basculer un panneau de réponse en utilisant l’interaction d’affectation

Aperçu

Apprenez à créer un dynamique Afficher/Masquer le conteneur de réponse en utilisant le Interaction d'affectation dans l'application Avonni Dynamic Components. Cet exemple montre comment gérer l'état d'un composant de manière déclarative.

---

Objectif

Construire une interface où :

• Cliquer sur un Répondre bouton affiche un panneau avec des champs de saisie.

• Cliquer sur un Fermer icône à l'intérieur du panneau le masque à nouveau.

• La visibilité du panneau est gérée à l'aide d'une Variable booléenne et de deux interactions d'affectation.

---

Instructions étape par étape

1. Créez une variable booléenne pour l'état

Sélectionnez le PDF Viewer. panneau Ressources:

• Type de variable : Booléen

• par le véritable: isReplying

• Valeur initiale: false

Cette variable contrôle si le panneau de réponse est visible.

---

2. Ajoutez le conteneur de réponse

• Faites glisser un Composant conteneur sur la toile.

• À l'intérieur du conteneur, ajoutez des composants comme une Zone de texte pour composer une réponse.

Ce conteneur sera affiché ou masqué en fonction de la valeur de isReplying.

---

3. Ajoutez le bouton "Répondre"

• Placez un Composant Bouton Avonni à l'extérieur du conteneur.

• Étiquette: Répondre

Configuration de l'interaction (au clic) :

• Type d'action : Affectation

• Variable: {!isReplying}

• Opérateur: égal

• propriété: Cet attribut est

Cliquer sur le bouton définit isReplying sur Cet attribut est, ce qui affichera le panneau de réponse.

---

4. Ajoutez l'icône « Fermer » à l'intérieur du conteneur

• Faites glisser un Composant Icône dans le conteneur de réponse.

• Icône: utility:close ou utility:delete

Configuration de l'interaction (au clic) :

• Type d'action : Affectation

• Variable: {!isReplying}

• Opérateur: égal

• propriété: false

Cliquer sur l'icône réinitialise la variable, masquant à nouveau le conteneur.

---

5. Définissez la règle de visibilité du conteneur

• Sélectionnez le Composant conteneur.

• Ouvrez le Définir la visibilité du composant paramètres.

• Ajoutez une condition : Afficher lorsque isReplying est égal à Cet attribut est.

---

Résultat

• Lorsque la page se charge, isReplying est false, donc le conteneur de réponse est masqué.

• Cliquer sur le Répondre bouton définit isReplying sur Cet attribut est, faisant apparaître le conteneur.

• Cliquer sur le Fermer l'icône le remet à false, le masquant à nouveau.

Toute cette logique est gérée de manière déclarative avec seulement deux interactions d'affectation — aucun code personnalisé requis