Aller au contenu

Conditions

Les conditions contrôlent si un composant est visible ou masqué en fonction des données. Définissez l'état condition sur une expression, choisissez un opérateur, et éventuellement une seconde condition — le composant s'affiche ou se masque selon que l'expression est évaluée comme vraie ou fausse.

Utilisez cela pour masquer les sections vides, afficher des messages "Aucun article" ou afficher du contenu uniquement pour certains utilisateurs.

Les états de condition

Il existe deux états spéciaux pour la visibilité :

condition — la première règle de visibilité. Obligatoire.

condition2 — une seconde condition (optionnelle). Utile si vous souhaitez combiner plusieurs règles.

Les deux acceptent une expression, un opérateur et (pour certains opérateurs) une seconde valeur de comparaison.

Opérateurs unaires : tester une seule valeur

Les opérateurs unaires testent une seule expression. Vous n'avez pas besoin de comparer avec autre chose.

TRUTHY — l'expression est véridique (ni null, ni false, ni 0, ni chaîne vide). Utilisez cela pour afficher un composant uniquement si des données existent.

Exemple : afficher une image mise en avant uniquement si elle existe. - Condition : featured_image (le champ image) - Opérateur : TRUTHY - Résultat : le composant s'affiche si featured_image n'est pas null

FALSY — l'expression est fausse (null, false, 0 ou chaîne vide). L'opposé de TRUTHY.

Exemple : afficher un message "Pas d'image" si featured_image est manquant. - Condition : featured_image - Opérateur : FALSY - Résultat : le message s'affiche uniquement si featured_image est vide

EMPTY_ARR — l'expression est un tableau vide. Utilisez cela sur les expressions de liste.

Exemple : afficher "Aucun article" si la liste d'articles est vide. - Condition : posts - Opérateur : EMPTY_ARR - Résultat : le composant s'affiche si posts est une liste vide

NOT_EMPTY_ARR — l'expression est un tableau non vide. L'opposé de EMPTY_ARR.

Exemple : afficher une section blog uniquement s'il y a des articles. - Condition : posts - Opérateur : NOT_EMPTY_ARR - Résultat : le composant s'affiche si posts n'est pas vide

Opérateurs binaires : comparer deux valeurs

Les opérateurs binaires comparent l'expression à une seconde valeur.

== (égal) — l'expression est égale à la seconde valeur.

Exemple : afficher un badge "Mis en avant" uniquement pour les articles mis en avant. - Condition : is_featured (un champ vrai/faux) - Opérateur : == - Valeur : true (une valeur fixe) - Résultat : le composant s'affiche si is_featured est vrai

!= (différent) — l'expression n'est pas égale à la seconde valeur.

Exemple : afficher le contenu pour les articles non-brouillons. - Condition : status - Opérateur : != - Valeur : "draft" - Résultat : le composant s'affiche si status n'est pas "draft"

> (supérieur à) — l'expression est supérieure à la seconde valeur. Fonctionne sur les nombres et les dates.

Exemple : afficher un badge "Best-seller" pour les produits avec plus de 100 ventes. - Condition : sales_count - Opérateur : > - Valeur : 100 - Résultat : le composant s'affiche si sales_count > 100

< (inférieur à) — l'expression est inférieure à la seconde valeur.

Exemple : afficher un avertissement "Stock faible" si l'inventaire est inférieur à 10. - Condition : inventory - Opérateur : < - Valeur : 10 - Résultat : le composant s'affiche si inventory < 10

>= (supérieur ou égal) — l'expression est supérieure ou égale à la seconde valeur.

Exemple : afficher un composant pour les commandes de plus de 50 euros (inclus). - Condition : order_total - Opérateur : >= - Valeur : 50

<= (inférieur ou égal) — l'expression est inférieure ou égale à la seconde valeur.

Combiner les conditions

Utilisez condition2 pour combiner deux règles.

Scénario : Afficher une bannière "Soldes d'été" uniquement pour les produits de la catégorie "vêtements" ET dont le prix est inférieur à 50 euros.

  1. Définissez condition sur category
  2. Opérateur : ==
  3. Valeur : "clothes"
  4. Définissez condition2 sur price
  5. Opérateur : <
  6. Valeur : 50
  7. Résultat : le composant s'affiche uniquement si les deux conditions sont vraies

Les deux conditions doivent être vraies pour que le composant s'affiche.

Exemple pratique : message "Aucun article"

Afficher un message lorsque la liste d'articles de blog est vide.

  1. Ajoutez un composant Paragraphe avec le texte "Aucun article de blog pour le moment"
  2. Ouvrez le panneau Données
  3. Définissez l'état condition :
  4. Expression : posts
  5. Opérateur : EMPTY_ARR
  6. Enregistrez

Le paragraphe n'apparaît que lorsque la liste d'articles est vide. Lorsque des articles existent, il se masque.

Exemple pratique : section de contenu mis en avant

Afficher un badge "Mis en avant" uniquement sur les articles mis en avant.

  1. Ajoutez un Span ou Div avec le texte ou l'icône "Mis en avant"
  2. Définissez l'état condition :
  3. Expression : is_featured
  4. Opérateur : ==
  5. Valeur : true (fixe)
  6. Enregistrez

Le badge n'apparaît que sur les articles où is_featured est vrai.

Conditions dans les boucles

Les conditions sont particulièrement utiles à l'intérieur des boucles pour masquer/afficher des éléments par itération.

Exemple : à l'intérieur d'une boucle d'articles de blog, masquer les brouillons.

  1. Votre composant de boucle a __data = posts
  2. Ajoutez un composant à l'intérieur de la boucle (la carte d'article)
  3. Définissez l'état condition sur la carte :
  4. Expression : status
  5. Opérateur : !=
  6. Valeur : "draft"
  7. Résultat : chaque carte s'affiche uniquement si l'article n'est pas un brouillon

Erreurs courantes

  • Oublier de définir un opérateur. Vous avez besoin à la fois de la condition (expression) et de l'opérateur. Sans l'opérateur, la condition ne sait pas quel test effectuer.
  • Utiliser le mauvais opérateur. TRUTHY/FALSY testent si des données existent ; les opérateurs binaires comparent des valeurs. Vérifiez lequel correspond à votre logique.
  • Ne pas tester la condition. Définissez la condition, puis vérifiez l'aperçu. Si cela ne fonctionne pas, l'expression ou l'opérateur pourrait être incorrect.
  • Utiliser des valeurs fixes quand vous vouliez des expressions. Si vous souhaitez comparer status == draft, assurez-vous que "draft" est saisi comme valeur fixe dans le champ "Valeur", pas comme expression.

En savoir plus

  • Lier les données — créer des états et des expressions
  • Boucles et listes — afficher/masquer des éléments dans une boucle
  • Expressions — comprendre comment les expressions s'évaluent
  • Filtres — transformer les données avant de les tester dans une condition

Quiz

Q1 : Vous souhaitez afficher un composant uniquement si un article a une image mise en avant. Quelle condition définissez-vous ?

  • A) featured_image opérateur TRUTHY
  • B) featured_image opérateur FALSY
  • C) featured_image opérateur ==
Réponse

A) featured_image opérateur TRUTHY — TRUTHY teste si une valeur existe (n'est pas null). Si le champ image n'est pas vide, le composant s'affiche.

Q2 : Vous souhaitez afficher le texte "Aucun article" uniquement quand le blog est vide. Quelle condition utilisez-vous ?

  • A) posts opérateur TRUTHY
  • B) posts opérateur EMPTY_ARR
  • C) posts opérateur ==
Réponse

B) posts opérateur EMPTY_ARR — Cela teste si la liste d'articles est vide. Le message "Aucun article" s'affiche lorsque la liste est vide.

Q3 : Vous souhaitez afficher un badge de réduction pour les articles à moins de 20 euros. Quel opérateur utilisez-vous ?

  • A) price <
  • B) price ==
  • C) price TRUTHY
Réponse

A) price < — L'opérateur inférieur à compare price à 20. Le badge s'affiche si price < 20.

Q4 : Vous souhaitez afficher un composant uniquement pour les articles publiés (status = "published"). Que définissez-vous ?

  • A) condition = status, opérateur TRUTHY
  • B) condition = status, opérateur ==, valeur "published"
  • C) condition = published
Réponse

B) condition = status, opérateur ==, valeur "published" — Vous comparez le champ status à la chaîne "published". Utilisez l'opérateur == et entrez "published" comme valeur de comparaison.

Q5 : Vous souhaitez afficher un composant pour les commandes de grande valeur (plus de 100 euros) dans la catégorie "électronique". Combien de conditions avez-vous besoin ?

  • A) Une condition avec deux opérateurs
  • B) Deux conditions (condition et condition2)
  • C) Une condition combinant les deux règles
Réponse

B) Deux conditions (condition et condition2) — Une règle teste le montant de la commande, l'autre teste la catégorie. Les deux doivent être vraies, donc vous utilisez condition et condition2.

Éditer cette page sur GitLab