# Condition

> Découvrez comment utiliser le composant Condition pour ajouter de la logique dans votre application PandaSuite, permettant des actions spécifiques basées sur des conditions utilisateur.

https://docs.pandasuite.com/fr/essentials/components/condition/

**Le composant Condition ajoute de la logique à votre application en exécutant des actions uniquement lorsque des critères spécifiques sont remplis. Utilisez-le pour personnaliser les parcours utilisateurs, valider des saisies, contrôler la navigation ou créer des expériences dynamiques basées sur les données utilisateur.**

Un seul composant Condition peut gérer plusieurs conditions indépendantes. Chaque condition évalue une ou plusieurs expressions et déclenche des actions lorsque les critères sont satisfaits.

**Cas d'usage courants :**

- Afficher du contenu premium uniquement aux utilisateurs abonnés
- Afficher différents écrans selon les scores d'un quiz
- Valider les saisies de formulaire avant de permettre la soumission
- Adapter le contenu selon l'orientation de l'appareil ou l'heure de la journée

## Créer une condition

**Étape 1 : Ajouter le composant**

Cliquez sur **Composants** et insérez un composant **Condition**.

- Pour une logique spécifique à un écran, ajoutez-le dans cet écran
- Pour une logique applicable à toute l'application, ajoutez-le au niveau du Projet

Le composant Condition est non graphique et apparaît dans la liste des Objets.

**Étape 2 : Créer une nouvelle condition**

Dans les propriétés du composant, cliquez sur **+ Ajouter** pour créer une nouvelle condition. Donnez-lui un nom clair et descriptif.

> **Info**
>
> Ce nom apparaît partout dans l'interface lors du référencement de votre
> condition dans les déclencheurs et les actions. Choisissez un nom qui décrit
> clairement ce que la condition vérifie.

[Image : Fenêtre de la condition Answer is tulip : son nom, l'évaluation automatique sur Non, et une expression où la valeur saisie est égale à tulip]

**Étape 3 : Ajouter des expressions**

Chaque condition évalue une ou plusieurs expressions. Cliquez sur **+ Ajouter une expression** pour définir les critères qui doivent être remplis.

### Combiner plusieurs expressions

Lorsque votre condition comporte plusieurs expressions, vous pouvez choisir comment elles doivent être évaluées ensemble en utilisant la logique **ET** / **OU** :

- **ET** : Toutes les expressions doivent être vraies pour que la condition soit remplie
- **OU** : Au moins une expression doit être vraie pour que la condition soit remplie

Ce sélecteur apparaît automatiquement lorsque vous ajoutez plus d'une expression à votre condition.

**Exemple avec la logique ET :**

- Expression 1 : Score > 100
- Expression 2 : Temps < 60
- Logique : **ET**
- Résultat : La condition est vraie seulement quand le score est supérieur à 100 ET que le temps est inférieur à 60

**Exemple avec la logique OU :**

- Expression 1 : Niveau utilisateur = "premium"
- Expression 2 : Niveau utilisateur = "admin"
- Logique : **OU**
- Résultat : La condition est vraie quand l'utilisateur est soit premium OU admin

### Mélanger ET et OU

Une condition n'utilise qu'un seul opérateur : le sélecteur **ET** / **OU** s'applique à toutes les expressions à la fois. Vous ne pouvez pas mélanger **ET** et **OU** dans une même condition, et les expressions ne peuvent pas être regroupées avec des parenthèses.

Pour construire une logique groupée comme *requis ET (option A OU option B)*, isolez chaque groupe dans sa propre condition, puis référencez une condition depuis une autre (voir [Utiliser des conditions comme sources de données](https://docs.pandasuite.com/fr/essentials/components/condition/#utiliser-des-conditions-comme-sources-de-données)).

**Exemple : une règle obligatoire combinée à des filtres optionnels**

Un filtre de collection a souvent besoin d'une règle obligatoire associée à des filtres optionnels, ce qu'une seule condition ne peut pas exprimer. Isolez la partie optionnelle dans sa propre condition :

- **Condition 1**, "Correspond au filtre optionnel", combine deux expressions avec la logique **OU** : la variable de sélection est **Inconnu ou vide**, OU l'élément courant correspond à la valeur sélectionnée.

Écrivez ensuite le **Filtre** de votre **Collection / Liste** comme une seule condition, combinée avec la logique **ET** : l'élément courant appartient à la catégorie obligatoire, ET **Condition 1** est **Vrai**.

Tant qu'aucune valeur n'est sélectionnée, **Condition 1** reste vraie, donc la liste affiche tous les éléments de la catégorie obligatoire. Sélectionner une valeur restreint la liste sans jamais sortir de cette catégorie.

### Composer une expression

Chaque expression individuelle est composée en trois parties :

1. **Source de données** : Sélectionnez ce qui doit être évalué (variable, valeur de composant, etc.)
2. **Fonction** : Choisissez comment tester les données (égal à, supérieur à, contient, etc.)
3. **Valeur** : Spécifiez à quoi comparer (si applicable)

### Utiliser des conditions comme sources de données

Au lieu de sélectionner une variable ou une valeur de composant, vous pouvez **référencer une autre condition** comme source de données. Cela permet des patterns de composition puissants.

**Comment ça fonctionne :**

Lorsque vous sélectionnez une condition comme source de données, vous pouvez utiliser les fonctions **Vrai** ou **Faux** pour tester si cette condition est actuellement remplie.

**Cas d'usage courants :**

1. **Logique inverse** - Créez facilement l'opposé d'une condition existante sans réécrire toutes les expressions :

   - La condition "Utilisateur premium" existe
   - Créez "Utilisateur NON premium" en sélectionnant cette condition avec la fonction **Faux**

2. **Logique imbriquée complexe** - Combinez plusieurs conditions avec différentes priorités (comme des parenthèses en mathématiques) :

   - Condition A : "Score élevé" (score > 100 ET temps < 60)
   - Condition B : "Utilisateur premium" (type de compte = "premium")
   - Condition C : "Afficher bonus" = A est **Vrai** OU B est **Vrai**

3. **Blocs de conditions réutilisables** - Définissez une logique complexe une fois et référencez-la plusieurs fois :
   - Condition "Utilisateur peut éditer" (est propriétaire OU est admin OU est modérateur)
   - Utilisez cette condition à plusieurs endroits sans dupliquer les expressions

**Exemple :**

Créez une logique de branchement pour un jeu :

- **Condition 1** : "Peut jouer niveau avancé" = (niveau > 5 ET tutoriel terminé)
- **Condition 2** : "Afficher contenu avancé" = "Peut jouer niveau avancé" est **Vrai** ET orientation appareil = "paysage"

Cette approche garde les conditions lisibles et maintenables à mesure que la complexité augmente.

## Fonctions disponibles

PandaSuite propose 18 fonctions de condition organisées par type de données et cas d'usage. Les fonctions disponibles s'adaptent automatiquement en fonction du type de source de données sélectionné.

### Fonctions de comparaison

Ces fonctions fonctionnent avec des nombres, des dates et du texte pour comparer des valeurs.

| Fonction                | Description                                         | Exemple d'utilisation             |
| ----------------------- | --------------------------------------------------- | --------------------------------- |
| **Supérieur à**         | Teste si la source est supérieure à la valeur       | Vérifier si score > 100           |
| **Inférieur à**         | Teste si la source est inférieure à la valeur       | Vérifier si vies restantes < 3    |
| **Supérieur ou égal à** | Teste si la source est ≥ à la valeur                | Vérifier si âge ≥ 18              |
| **Inférieur ou égal à** | Teste si la source est ≤ à la valeur                | Vérifier si progression ≤ 50%     |
| **Égal à**              | Teste si la source est exactement égale à la valeur | Vérifier si réponse = "correct"   |
| **Différent de**        | Teste si la source diffère de la valeur             | Vérifier si statut ≠ "en attente" |

> **Astuce**
>
> Pour les comparaisons de dates, ces fonctions comparent les timestamps
> numériquement. Une date plus proche du présent est "supérieure à" une date
> dans le passé.

### Fonctions booléennes

Ces fonctions testent des valeurs vrai/faux et fonctionnent avec des sources de données booléennes.

| Fonction            | Description                                    | Exemple d'utilisation                           |
| ------------------- | ---------------------------------------------- | ----------------------------------------------- |
| **Vrai**            | Teste si la valeur est vraie                   | Vérifier si l'utilisateur est connecté          |
| **Faux**            | Teste si la valeur est fausse                  | Vérifier si le tutoriel n'est pas terminé       |
| **Inconnu ou vide** | Teste si la valeur est null, undefined ou vide | Vérifier si un champ optionnel n'est pas rempli |

> **Info**
>
> **Vrai** et **Faux** sont particulièrement utiles lors du référencement d'une
> autre condition comme source de données. Utilisez **Faux** pour créer
> facilement l'inverse d'une condition existante.

### Fonctions textuelles

Ces fonctions fonctionnent spécifiquement avec des données textuelles.

| Fonction       | Description                                                    | Exemple d'utilisation                          |
| -------------- | -------------------------------------------------------------- | ---------------------------------------------- |
| **Débute par** | Teste si le texte commence par des caractères spécifiques      | Vérifier si l'email commence par "admin"       |
| **Finit par**  | Teste si le texte se termine par des caractères spécifiques    | Vérifier si le nom de fichier finit par ".pdf" |
| **Match**      | Teste si le texte correspond à un motif d'expression régulière | Valider le format d'un numéro de téléphone     |

> **Exemple**
>
> La fonction **Match** utilise des expressions régulières. Par exemple, le
> motif `^[0-9]{5}$` correspond exactement à 5 chiffres, utile pour valider des
> codes postaux.

### Fonctions d'existence

Ces fonctions vérifient si des données existent ou ont une valeur.

| Fonction            | Description                                                        | Différence                                                                                     |
| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
| **Inconnu**         | Teste si la valeur est `null` ou `undefined`                       | À utiliser pour vérifier si une variable a été initialisée                                     |
| **Inconnu ou vide** | Teste si la valeur est `null`, `undefined`, OU chaîne/tableau vide | À utiliser pour vérifier si une saisie utilisateur ou des données optionnelles sont manquantes |
| **Connu**           | Teste si la valeur existe et n'est pas vide                        | Opposé de "Inconnu ou vide" - confirme que les données sont présentes                          |

> **Info**
>
> **Inconnu** vérifie uniquement `null`/`undefined`, tandis que **Inconnu ou
> vide** considère également les chaînes vides (`""`), les tableaux vides (`[]`)
> et les objets vides comme "inconnus". Utilisez **Inconnu ou vide** pour la
> validation de formulaires.

### Fonctions de collection

Ces fonctions fonctionnent avec des tableaux, des collections et des données multi-références.

| Fonction            | Description                                                                                         | Exemple d'utilisation                                       |
| ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| **Contient**        | Teste si le tableau/collection inclut un élément spécifique ou si le texte contient une sous-chaîne | Vérifier si la liste de favoris contient l'élément actuel   |
| **Ne contient pas** | Opposé de Contient                                                                                  | Vérifier si l'utilisateur n'a pas encore terminé ce niveau  |
| **Every**           | Teste si chaque élément du tableau source est contenu dans le tableau valeur                        | Vérifier si l'utilisateur a collecté tous les objets requis |
| **Some**            | Teste si au moins un élément du tableau source est contenu dans le tableau valeur                   | Vérifier si l'utilisateur a des fonctionnalités premium     |

> **Exemple**
>
> **Every vs Some expliqué :** Imaginez un utilisateur qui a collecté les badges
> `["bronze", "argent"]` et vous voulez vérifier contre les badges requis
> `["bronze", "argent", "or"]`. La fonction **Some** retourne `true` car
> l'utilisateur a au moins un badge correspondant (bronze OU argent). La
> fonction **Every** retourne également `true` car chaque badge collecté par
> l'utilisateur existe dans la liste requise. En revanche, si vous testez contre
> seulement `["bronze"]`, **Some** retourne toujours `true` (l'utilisateur a
> bronze) mais **Every** retourne `false` (l'utilisateur a plus que ce qui est
> testé).

## Propriétés exposées

Le composant Condition expose le résultat de chaque condition sous forme de propriété booléenne que vous pouvez utiliser avec la liaison de données. Cela vous permet de contrôler directement d'autres composants sans configurer de déclencheurs et d'actions.

### Utiliser les résultats de condition avec la liaison de données

Chaque condition que vous créez devient disponible comme source de données avec un résultat booléen (`true` ou `false`). Vous pouvez lier ce résultat à n'importe quelle propriété qui accepte une valeur booléenne.

**Cas d'usage courant :**

- **Contrôler la visibilité** : Liez la visibilité d'un conteneur au résultat d'une condition pour afficher/masquer du contenu selon la logique

**Pour lier un résultat de condition :**

1. Sélectionnez le composant que vous souhaitez contrôler
2. Cliquez sur l'icône **Liaison de données** à côté de la propriété (ex. Visibilité)
3. Sélectionnez votre composant **Condition** comme source de données
4. Choisissez la condition spécifique dont vous voulez utiliser le résultat

La propriété liée se met à jour automatiquement chaque fois que la condition est réévaluée.

> **Astuce**
>
> Utiliser la liaison de données avec les résultats de condition est souvent
> plus simple que de configurer des actions basées sur des déclencheurs, surtout
> pour le contrôle de visibilité. La liaison reste automatiquement synchronisée
> lorsque les sources de données des conditions changent.

## Comment les conditions sont évaluées

Une fois vos conditions créées, elles doivent être évaluées pour tester si elles sont vraies ou fausses.

### Évaluation automatique

Activez **Évaluation automatique** dans les propriétés de la condition pour qu'elle s'exécute automatiquement chaque fois que ses sources de données changent.

Par exemple, une condition vérifiant "score > 100" sera réévaluée immédiatement lorsque la variable score est mise à jour. C'est idéal pour la validation en temps réel et les mises à jour dynamiques de l'interface.

L'évaluation automatique ne concerne pas une seule condition : le composant surveille les sources de données de toutes ses conditions. Quand l'une d'elles change, il réévalue ses conditions, et chaque condition vraie à cet instant redéclenche son action, y compris celles dont la donnée n'a pas changé. Même une condition sans action participe, car le composant surveille aussi ses sources de données.

> **Note**
>
> Une condition qui reste vraie redéclenche son action à chaque réévaluation :
> une action peut donc se relancer quand une autre condition, sans rapport, voit
> sa source changer. Pour éviter cela, placez les conditions indépendantes dans
> des composants Condition distincts, afin que chacun ne réagisse qu'à ses
> propres données. Si vous avez seulement besoin du résultat d'une condition (et
> non d'un événement), liez ce résultat plutôt que de passer par un déclencheur.

### Évaluation manuelle

Pour évaluer les conditions à la demande, utilisez ces actions depuis n'importe quel déclencheur de votre application :

| Action                                                                         | Cas d'usage                                                                                                           |
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| **Agir sur un composant** > **Conditions** > **Évaluer une condition**         | Déclencher l'évaluation d'une condition spécifique lors d'un événement (clic sur un bouton, chargement d'écran, etc.) |
| **Agir sur un composant** > **Conditions** > **Évaluer toutes les conditions** | Évaluer toutes les conditions du composant en une seule fois                                                          |

Vous pouvez optionnellement ajouter un délai avant l'évaluation.

[Image : Fenêtre d'action : un tape sur le bouton Check my answer lance Évaluer une condition sur Answer is tulip, avec un délai optionnel]

## Réagir aux résultats des conditions

Lorsque les conditions sont évaluées, elles déclenchent des événements que vous pouvez utiliser pour exécuter des actions.

### Déclencheurs par condition

Chaque condition que vous créez possède son propre déclencheur **Évaluation** qui se déclenche chaque fois que cette condition spécifique est évaluée à `true`. Utilisez-le pour réagir à des conditions individuelles.

**Pour configurer :**

1. Sélectionnez votre composant **Condition**
2. Ajoutez une nouvelle action
3. Choisissez le déclencheur **Évaluation : \[nom de votre condition]**
4. Ajoutez votre action : naviguer vers un écran, afficher une pop-up, mettre à jour des données, etc.

[Image : Actions du composant Condition : l'évaluation de Answer is tulip ouvre Popup right, celle de Answer is not tulip ouvre Popup wrong]

### Déclencheurs globaux du composant

Ces déclencheurs réagissent à l'état global de toutes les conditions du composant :

| Déclencheur                                         | Quand il se déclenche                          |
| --------------------------------------------------- | ---------------------------------------------- |
| **Évaluation si toutes les conditions sont vraies** | Toutes les conditions du composant sont `true` |
| **Évaluation si au moins une condition est vraie**  | Une ou plusieurs conditions sont `true`        |
| **Évaluation si aucune des conditions est vraie**   | Toutes les conditions sont `false`             |

Utilisez-les lorsque vous devez réagir au résultat combiné de plusieurs conditions.

**Exemple de workflow :**

Une application de quiz avec logique de branchement :

- **Condition 1** : "Réussi" - Score ≥ 80

  - Sur **Évaluation : Réussi** → Naviguer vers l'écran "Félicitations"

- **Condition 2** : "Échoué" - Score < 80
  - Sur **Évaluation : Échoué** → Naviguer vers l'écran "Réessayez"

Ce pattern garde votre logique claire et maintenable.

## Articles liés

- [Gérer les changements d'orientation](https://docs.pandasuite.com/fr/essentials/layout/detect-screen-orientation-changes/) - Utilisez les conditions pour réagir à l'orientation de l'appareil
- [Créer des conditions basées sur la date/l'heure](https://docs.pandasuite.com/fr/essentials/data/timestamp-current-date-and-time/) - Construisez une logique temporelle dans votre application
- [Filtrer une collection](https://docs.pandasuite.com/fr/essentials/data/filter-a-collection/) - Combinez conditions et filtrage de collections
- [Ajouter aux favoris](https://docs.pandasuite.com/fr/essentials/data/bookmark-favorite/) - Utilisez la fonction Contient avec les favoris