Affectation

Aperçu

Considérez l’interaction d’Assignation comme une commande qui dit : « Prenez cette variable et changez sa valeur de cette manière spécifique. » Alors que de nombreux composants d’entrée (comme Zone de texte ou Bouton bascule) peuvent mettre à jour une variable automatiquement via le liaison de données, l’interaction d’Assignation est utilisée lorsque vous devez modifier la valeur d’une variable en résultat direct d’une action.

But principal

Gestion d’état : Définir une variable pour contrôler l’état de votre composant (par ex., définir isPanelVisible à true lorsqu’un bouton est cliqué).
Manipulation des données : Modifier les données stockées dans une variable (par ex., incrémenter un nombre, ajouter du texte à une chaîne ou remplacer des parties d’une chaîne).
Réinitialisation des valeurs : Effacer facilement la saisie utilisateur ou réinitialiser un composant à son état initial.

Quand utiliser l’interaction d’Assignation

Basculer la visibilité : Sur un bouton « Afficher/Masquer les détails », utilisez l’Assignation pour basculer une variable booléenne entre true et false.
Construction dynamique de texte : Concaténer (ajouter) des chaînes dans une variable en réponse à différentes actions utilisateur.
Nettoyage des données : Utilisez replace opérateurs pour formater ou nettoyer les données stockées dans une variable avant de les utiliser ailleurs.

Configuration

Vous ajoutez l’interaction d’Assignation en tant que Action au sein de l’événement d’un autre composant (par ex., Au clic, Au changement).

Sélectionner le composant déclencheur : Choisissez le composant (par ex., un Bouton) qui va initier le changement de variable.
Accéder aux Interactions : Dans le panneau Propriétés, allez dans la section Interactions
Choisir l’événement : Sélectionnez l’événement qui doit déclencher l’assignation (par ex., Au clic).
Ajouter une action : Cliquez sur « Ajouter une action ».
Définir le type d’action : Sélectionnez Assignation (ou un nom similaire comme « Définir la valeur de la variable »).
Configurer les propriétés d’Assignation :
- Variable : (Ressource - Essentiel) Sélectionnez la ressource Variable cible dont vous voulez changer la valeur (par ex., {!myCounterVariable}, {!isDetailsVisible}). Cette variable doit déjà exister dans votre panneau Ressources.
- Opérateur : (Sélectionner) Choisissez comment vous voulez modifier la variable :
  - equal: Remplace la valeur actuelle de la variable par une nouvelle. C’est l’opérateur le plus courant.
  - add: Ajoute à la valeur existante. Le comportement dépend du type de données :
    Pour Nombres, il effectue une addition mathématique (par ex., 2 add 1 devient 3).
    Pour Texte, il concatène (ajoute) le texte (par ex., "Hello" add " World" devient "Hello World").
    Pour Collections, il ajoute un nouvel élément à la liste.
  - remplacer la première occurrence: Trouve la première instance d’une chaîne spécifiée et la remplace.
  - remplacer toutes les occurrences: Trouve toutes les instances d’une chaîne spécifiée et les remplace.
  - remplacer par regex: Pour la manipulation avancée de texte en utilisant des expressions régulières.
- Valeur : (Ressource ou Statique) Fournissez la valeur à utiliser par l’opérateur. Par exemple, si l’opérateur est equal, c’est la nouvelle valeur. Si l’opérateur est add, c’est la valeur à ajouter. Cela peut être une valeur statique (par ex., 1, true, "Active") ou une valeur dynamique provenant d’une autre ressource (par ex., {!anotherVariable}, @MyInput.value).

Exemples

Créer un conteneur de réponse dynamique Afficher/Masquer

Construisons le cas d’utilisation exact que vous avez décrit : un bouton « Répondre » qui affiche un conteneur avec un formulaire de réponse, et une icône « fermer » à l’intérieur de ce panneau pour le masquer à nouveau. Cela montre comment gérer l’état d’un composant.

Créer une variable booléenne pour l’état

Dans Ressources, créez une nouvelle Variable booléenne.
Nom API : isReplying
Valeur initiale : Définir à false.

Créer le panneau et lier sa visibilité

Faites glisser un Conteneur composant sur votre canevas. Ce sera votre panneau de réponse.
À l’intérieur du Conteneur, placez d’autres composants, comme une Zone de texte pour le message de réponse.

Créer le bouton « Répondre »

Ajoutez un Avonni Bouton composant à l’extérieur du conteneur.
Étiquette : "Répondre"
Interaction Au clic :
1. Ajoutez une Assignation action.
2. Configurez-la :
  - Variable : {!isReplying}
  - Opérateur : equal
  - Valeur : false

Créer l’icône « Corbeille »

À l’intérieur de la réponse Conteneur, ajoutez une Icône composant.
Nom de l’icône : utility:close (ou utility:delete si vous préférez une icône de corbeille). Rendez-la cliquable.
Interaction Au clic :
1. Ajoutez une Assignation action.
2. Configurez-la :
  - Variable : {!isReplying}
  - Opérateur : equal
  - Valeur : true

Sélectionnez le composant conteneur

Dans les paramètres « Définir la visibilité du composant », ajoutez une condition qui affiche le conteneur uniquement lorsque le bouton Répondre a été cliqué et que la variable isReplying n’est pas définie sur true.

Résultat

Lorsque la page se charge, isReplying est false, donc le conteneur est masqué. Cliquer sur le bouton « Répondre » définit la variable sur true, faisant apparaître le conteneur et son contenu. Cliquer sur l’icône « fermer » à l’intérieur remet la variable à false, le masquant à nouveau. Ce changement d’état entier est géré de manière déclarative avec deux simples interactions d’Assignation

Incrémenter un compteur de « J’aime »

Cet exemple utilise un bouton « J’aime » pour incrémenter un compteur affiché dans un composant Texte, démontrant la manipulation numérique.

Créer une variable nombre

Dans Ressources, ajoutez une Variable Nombre nommée likeCount avec valeur initiale 0

Ajouter un texte d’affichage

Faites glisser un composant Texte ; liez sa Valeur à {!likeCount} pour afficher le nombre actuel

Ajouter un bouton « J’aime »

Ajoutez un Bouton étiqueté « J’aime ».

Au clic : Ajouter une action d’Assignation.
Variable : {!likeCount}
Opérateur : add
Valeur : 1

(Optionnel) Ajouter un bouton de réinitialisation

Ajoutez un autre Bouton étiqueté « Réinitialiser les J’aime ».

Au clic : Ajouter une action d’Assignation.
Variable : {!likeCount}
Opérateur : equal
Valeur : 0

Résultat : Chaque clic « J’aime » incrémente le compteur (par ex., 0 → 1 → 2). Le Texte est mis à jour instantanément. La réinitialisation le remet à 0.

Considérations clés

Les types de données sont importants : L’opérateur add se comporte différemment sur les Nombres par rapport au Texte. Assurez-vous que le type de données de votre variable correspond à l’opération que vous comptez effectuer.
La variable doit exister : Vous devez créer la ressource Variable avant de pouvoir l’utiliser dans une action d’Assignation.
Chainer les actions : L’Assignation est souvent une étape dans une séquence d’interactions. Par exemple, vous pourriez d’abord Affecter une valeur à une variable, puis Exécuter le flux en utilisant cette nouvelle valeur comme entrée.

En résumé

L’interaction d’Assignation est l’outil fondamental pour contrôler et manipuler les données stockées dans vos variables. C’est la clé pour gérer les états des composants, créer des compteurs, réinitialiser des formulaires et construire une logique dynamique en réponse aux actions utilisateur, le tout de manière déclarative

Mis à jour il y a 4 mois

Ce contenu vous a-t-il été utile ?

Bonsoir