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.
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.
É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
Composer une expression
Chaque expression individuelle est composée en trois parties :
- Source de données : Sélectionnez ce qui doit être évalué (variable, valeur de composant, etc.)
- Fonction : Choisissez comment tester les données (égal à, supérieur à, contient, etc.)
- 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 :
-
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
-
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
-
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” |
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 |
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 |
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 |
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 |
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é).
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.
É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.
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 lorsque cette condition spécifique devient true. Utilisez-le pour réagir à des conditions individuelles.
Pour configurer :
- Sélectionnez votre composant Condition
- Ajoutez une nouvelle action
- Choisissez le déclencheur Évaluation : [nom de votre condition]
- Ajoutez votre action : naviguer vers un écran, afficher une pop-up, mettre à jour des données, etc.
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 - Utilisez les conditions pour réagir à l’orientation de l’appareil
- Créer des conditions basées sur la date/l’heure - Construisez une logique temporelle dans votre application
- Filtrer une collection - Combinez conditions et filtrage de collections
- Ajouter aux favoris - Utilisez la fonction Contient avec les favoris