Composants conditionnels

Pour rendre vos formulaires dynamiques, vous pouvez utiliser l'onglet Conditionnel (Conditional ) d'un composant de formulaire. Là, vous pouvez appliquer des conditions qui s'affichent lors de l' Runtime. Vous pouvez appliquer deux types de conditions :

• Conditions simples
• Conditions avancées

Conditions simples

Ce tutoriel montre comment créer des conditions simples sur un composant de formulaire.

1. Ouvrez votre fichier de formulaire dans Studio et ajoutez des composants à votre formulaire.
   Pour cet exemple, ajoutez les composants suivants :

   • Case à cocherDeux .
   • Un nombreunique.
   • Un champ de texteunique.
2. Accédez à l'onglet Conditionnel (Conditional ) du composant Champ de texte (Text Field ) et accédez à la section Simple (Simple ).
   1. Ce composant doit s'afficher (This component should Display ) : choisissez Vrai (True) dans la liste déroulante. Cela crée la condition sous laquelle le composant Champ de texte (Text Field) s'affiche. Si vous souhaitez masquer le composant, choisissez Faux ( False)
   2. Lorsque le composant de formulaire - choisissez le composant Numéro (Number) dans la liste déroulante.
   3. A la valeur : saisissez la valeur du composant Nombre (Number) qui conditionne l'affichage du champ de texte .
   
   

   

   
   
3. Enregistrez le composant.

Pour voir comment se comporte la condition simple, regardez la vidéo ci-dessous :

Conditions avancées

Ce tutoriel montre comment créer des conditions avancées sur un composant de formulaire.

Attention : les conditions avancées remplacent les conditions simples.

1. Ouvrez votre fichier de formulaire dans Studio et ajoutez des composants à votre formulaire. Vous pouvez utiliser le même fichier de formulaire que celui utilisé pour tester les conditions simples.
   Pour cet exemple, ajoutez les composants suivants :

   • Case à cocherDeux .
   • Un numéro.
   • Un champ de texteunique.
2. Accédez à l'onglet Condition (Conditional ) du composant Numéro (Number).
3. Cliquez sur Conditions avancées ( Advanced conditions) et accédez à la section JavaScript .
4. Si vous souhaitez afficher la condition au moment de l' Runtime, démarrez votre condition avec la variable booléenne show . Utilisez la variable data et le nom de la propriété pour accéder aux données dans d'autres composants de formulaire.

   Pour cet exemple, pour afficher le composant Numéro (Number), vous pouvez saisir le script suivant :

   show = (data.checkbox1 === true && data.checkbox === true)

   
   

   

   
   

Si vous souhaitez masquer un composant sous une condition, placez un point d'exclamation ! après le signe égal = et avant la condition.

Pour voir le comportement de la condition avancée, regardez la vidéo ci-dessous :