Composants conditionnels

The Conditional tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

L'onglet Conditionnel (Conditional) comporte deux sections :

• Simple
• Conditions avancées

Conditions simples

La section Simple de l'onglet Conditionnel (Conditional) vous permet de masquer ou d'afficher un composant, en fonction de la valeur d'un autre composant.

La section Simple se compose de trois champs :

1. This component should Display - from this dropdown list, choose:

   • True if you want to condition when the component displays.
   • False if you want to condition when the component hides.

2. When the form component - from this dropdown list, choose a component in the form to act as a condition.

3. Has the value - type in the value that conditions the component when to display or hide.

   

Conditions avancées

La section Conditions avancées (Advanced Conditions) vous permet d'utiliser du code JavaScript pour créer des combinaisons de conditions.

La logique avancée (Advanced Logic) remplace les résultats de la logique conditionnelle simple.

Dans la section Code JavaScript, entrez un code JavaScript personnalisé.

The show variable must be given a true or false value. The data variable is used to access other components in the form, through the API key.

Tutoriel

Conditions simples

Pour configurer une logique de condition simple :

1. Open the Form Designer in the Create Form activity.
2. Faites glisser et déposez les composants dans votre formulaire. Pour cet exemple, glissez-déposez les éléments suivants :
   1. Deux composants Checkbox .
   2. Un composant Nombre .
   3. Un composant de champ de texte . Faites attention aux clés de champ de chaque composant. Vous en aurez besoin pour créer votre logique conditionnelle.
3. Navigate to the Conditional tab of the Text Field component and go to the Simple section.
   1. Ce composant doit Afficher : choisissez Vrai dans la liste déroulante. Cela crée la condition dans laquelle le composant Champ de texte s’affiche. Si vous souhaitez masquer le composant, choisissez Faux.
   2. Lors du composant de formulaire : choisissez le composant Nombre dans la liste déroulante.
   3. Contient la valeur : saisissez la valeur du composant Nombre qui conditionne le champ de texte à afficher.
4. Enregistrez le composant.

Conditions avancées

Pour configurer une logique de condition avancée :

1. Open the Form Designer in the Create Form activity.

2. Faites glisser et déposez les composants dans votre formulaire. Pour cet exemple, glissez-déposez les éléments suivants :

   1. Deux composants Checkbox .
   2. Un composant Nombre .
   3. Un composant de champ de texte . Faites attention aux clés de champ de chaque composant. Vous en aurez besoin pour créer votre logique conditionnelle.

3. Navigate to the Conditional tab of the Number component.

4. Click Advanced Conditions and go to the JavaScript section.

5. Si vous voulez créer une condition, utilisez la variable show et affectez-lui une condition à l'aide du signe égal = . Utilisez la variable data.field_key_component pour accéder aux données dans d'autres composants de formulaire. Pour cet exemple, pour afficher le composant Nombre , vous pouvez saisir dans ce script :

   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.

6. For this example, to hide the Number component, you can type in this script:

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

7. Enregistrez le composant.

Exemple de workflow

Pour vérifier le workflow complet ou pour avoir une référence future, téléchargez l’ exemple XAML