Logique avancée

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

À l'aide d'une logique avancée, vous pouvez modifier dynamiquement les commandes, l'apparence et la convivialité d'un composant de formulaire.

Une logique de formulaire se compose de deux parties : le déclencheur et l'action.

Déclencheur Le déclencheur logique est la condition à laquelle l'action a lieu. Par exemple, vous souhaiterez peut-être afficher un champ de formulaire spécifique uniquement lorsqu'une option de case à cocher est sélectionnée. Dans ce cas, l'option de case à cocher est le déclencheur, et l'affichage du champ de formulaire est l'action.

Il existe quatre types de déclencheurs logiques :

Type de déclencheur	Description	Exemple
Simple	Vous définissez un composant et une valeur de formulaire de déclenchement.
Javascript	Vous fournissez une logique JavaScript pour un composant de formulaire ou les données de formulaire. Utilisez la syntaxe JavaScript pour créer une logique complexe, telle qu'une boucle ou un comportement dynamique.
Logique JSON	Vous fournissez une logique JSON pour un composant de formulaire ou les données de formulaire. Recommandé dans les cas où JavaScript n’est pas autorisé. Impossible de prendre en charge les boucles ou les comportements dynamiques.
Événement (Event)	Vous définissez un événement de composant qui, une fois émis par le composant correspondant, déclenche l'action souhaitée.

Action

L'action logique est le comportement du composant de formulaire qui doit se produire en fonction des conditions logiques que vous définissez (c'est-à-dire le déclencheur). Par exemple, vous souhaiterez peut-être activer un bouton pour les utilisateurs d'un âge spécifique. Dans ce cas, la tranche d’âge est le déclencheur, et l’activation du bouton est l’action.

Il existe quatre types d’actions logiques :

Type d'action	Description	Exemple
Propriété	Le déclencheur modifie l’une des propriétés du composant disponibles, telles que Info-bulle, Description, Classe CSS, etc. Les propriétés disponibles dépendent du type de composant déclencheur.
Valeur (Value)	Le déclencheur modifie la valeur du composant correspondant. L'action doit être définie à l'aide de la syntaxe JavaScript.
Schéma des composants de la fusion	Le déclencheur modifie les paramètres de schéma du composant trouvé dans le composant JSON. Pour voir les paramètres de schéma que vous pouvez modifier, survolez le composant correspondant et cliquez sur Modifier JSON. Vous pouvez modifier plusieurs paramètres en une seule action.
Action personnalisée	Vous définissez une action personnalisée à l'aide de la syntaxe JavaScript, de la même manière que vous définiriez le type de déclencheur JavaScript.

Tutoriel

Pour configurer une logique avancée :

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
2. Faites glisser et déposez les composants dans votre formulaire. Faites attention à leurs clés de champ, car vous pourriez les utiliser dans votre logique avancée.
3. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. Saisissez un nom pour votre logique.
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. Saisissez un nom pour votre action.
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

La procédure ci-dessus s'applique de manière générique à tout type de déclencheur ou d'action. Pour obtenir une procédure détaillée, consultez les tutoriels spécifiques, qui fournissent des exemples de chaque type de déclencheur et d'action spécifique

• Type de déclencheur : Javascript et type d'action : Valeur Résumé dynamiquement deux champs de texte
• Type de déclencheur : Type Simple et Action : Propriété Masquer dynamiquement un champ
• Type de déclencheur : Type Simple et Action : Fusionner le schéma de composant Modifier la couleur du titre de manière dynamique
• Type de déclencheur : Type d'événement et d'action : Action personnalisée Définition d'un champ de formulaire par défaut à l'aide d'événements
• Type de déclencheur : JSON Type de logique et d'action : Propriété Affichage d'un composant en fonction de l'entrée de l'utilisateur

Résumé dynamique de deux champs de texte

Type de déclencheur : Type d'action JavaScript : Valeur

Cette logique avancée résume deux champs de texte, en fonction de la condition selon laquelle l'utilisateur interagit avec les champs de texte correspondants.

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).

2. Drag and drop three Text Field components into your form.

3. Nommez deux des composants de champ de texte A et B, et nommez le troisième Total. Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée.

   En option, vous pouvez définir le composant de champ de texte Total sur Désactivé, afin que les utilisateurs professionnels ne puissent pas interagir avec lui.

4. Go to the Logic tab of the Total field component.

5. Ajoutez une logique et nommez-la « somme dynamique ».

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   result = true;
   return result;
   

   L'extrait ci-dessus détecte s'il y a des changements dans les champs de texte, c'est-à-dire si l'utilisateur interagit avec les champs de texte, et déclenche les Actions pour résumer les champs.

7. Ajoutez une action et nommez-la « a+b ».

8. Select the Value action type, and enter the following script in the Value (Javascript) section:

   result = (+data.a) + (+data.b);
   return result;
   

   Remplacez a et b par les valeurs de clés de champ des composants de champ de texte.

9. Enregistrez l'action et la logique.

10. Enregistrez le composant.

Au moment de l'exécution, si l'utilisateur professionnel interagit avec les champs de texte A et B, le champ Total est automatiquement rempli, affichant la somme de A et B.

Masquage dynamique d'un champ

Type de déclencheur : Type d'action simple : Propriété

Cette logique avancée masque un champ de formulaire (c'est-à-dire le Child field) lorsque l'utilisateur saisit « masquer » dans un autre champ de formulaire (c'est-à-dire, Parent field).

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).
2. Drag and drop two Text Field components.
3. Nommez l’un des composants du champ de texte Parent fieldet l’autre Child field. Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée.
4. Go to the Logic tab of the Child field component.
5. Ajoutez une logique et nommez-la « Hide input (Masquer l’entrée) ».
6. Select the Simple trigger type.
   1. Dans le menu déroulant Quand le composant de formulaire , sélectionnez Parent field ({parentField_field_key}).
   2. Dans le champ Contient la valeur , entrez "masque". La configuration ci-dessus détecte si l'utilisateur a saisi la chaîne « masquer » dans le champ parent et déclenche l'action pour masquer le champ enfant.
7. Ajoutez une action et nommez-la « Hide (Masquer) ».
8. Select the Property action type.
   1. Dans le menu déroulant Propriété du composant , sélectionnez Caché.
   2. Dans le menu déroulant Définir l'état , sélectionnez Vrai.
9. Enregistrez l'action et la logique.
10. Enregistrez le composant.

Au moment de l'exécution, si l'utilisateur professionnel saisit « hide » (masquer) dans le champ parent, le champ enfant devient masqué.

Modification dynamique de la couleur du titre

Type de déclencheur : Type d'action simple : Fusionner le schéma de composant

Cette logique avancée modifie la couleur de l'étiquette d'un composant de champ de texte lorsque l'utilisateur sélectionne la couleur souhaitée dans une liste. La modification s'applique à l'aide d'un fichier CSS personnalisé.

Prérequis :

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

Par exemple, l'extrait de code CSS ci-dessous contient une classe qui définit la couleur du libellé sur vert ou rouge :

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

Après avoir référencé le fichier CSS dans les propriétés Créer un formulaire (Create Form), concevez votre formulaire en suivant les étapes ci-dessous :

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).

2. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.

3. Dans l'onglet Affichage du composant de champ de texte, définissez une Classe CSS personnalisée par défaut. Par exemple, pour définir le rouge comme couleur par défaut du champ de texte, utilisez la classe textFieldLabel-red . La classe doit être définie dans le fichier CSS à partir des prérequis documentés ci-dessus.

   

4. For the Radio component, add two values for the colors green and red.

5. Go to the Logic tab of the Text Field component.

6. Ajoutez une logique et nommez-la « sélection de couleur ».

7. Select the Simple trigger type.

   1. Dans le menu déroulant Quand le composant de formulaire , sélectionnez Radio ({radio_field_key}).
   2. Dans le champ Contient la valeur , saisissez « vert ». La configuration ci-dessus détecte si l'utilisateur sélectionne « vert » dans les options de radio et déclenche l'action pour modifier la couleur du libellé du champ de texte.

8. Ajoutez une action et nommez-la "change color using css".

9. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }
   

10. Enregistrez l'action et la logique.

11. Enregistrez le composant.

Au moment de l'exécution, si l'utilisateur professionnel sélectionne le bouton radio « vert », le libellé du champ de texte devient vert. Si l'utilisateur sélectionne le bouton radio « rouge », le libellé du champ de texte devient rouge.

Définir un champ de formulaire par défaut à l'aide d'événements

Type de déclencheur : Événement Type d'action : Action personnalisée

Cette logique avancée modifie le contenu d'un champ de texte lorsque l'utilisateur clique sur un bouton. Le bouton émet un événement en fonction duquel le contenu du champ de texte devient un texte par défaut.

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).

2. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

3. Dans l'onglet Affichage du composant Bouton :

   1. Labelliser le composant de bouton comme Change value to "Default"
   2. Définissez l' action du bouton sur Cliquer sur.
   3. Cochez la case Utiliser pour la mise à jour locale.
   4. Saisissez l’extrait suivant dans la section Mettre à jour la logique de données . Cela transmet l'événement appelé resetTextField chaque fois que l'utilisateur clique sur le bouton.

      instance.emit('resetTextField', {});
      

   5. Enregistrez le composant de bouton.

4. Go to the Logic tab of the text field component.

5. Ajoutez une logique et nommez-la « reset ».

6. Select the Event trigger type.

7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., resetTextField).

   La configuration ci-dessus détecte lorsque l'utilisateur clique sur le bouton Change value to "Default" et remplace le contenu existant du champ de texte par « Par défaut ».

8. Ajoutez une action et nommez-la « par défaut ».

9. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    return "Default"
    

11. Enregistrez l'action et la logique.

12. Enregistrez le composant.

Au moment de l'exécution, si l'utilisateur professionnel clique sur le bouton Change value to "Default" , l'événement resetTextField est émis. Le déclencheur écoute l'événement et remplace le contenu du champ de texte existant par « Par défaut ».

Affichage d'un composant en fonction d'une entrée utilisateur

Type de déclencheur : JSON Type d'action logique : Propriété

Cette logique avancée affiche le contenu d'un composant HTML (dans ce cas, une image) lorsque l'utilisateur saisit le texte requis.

1. Ouvrez le Concepteur de formulaires dans l'activité Créer un formulaire (Create Form).

2. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   1. Étiquetez le composant de champ de texte comme « Saisir "Montrer » ».
   2. Ajoutez la Description « Doit être une correspondance exacte (sensible à la casse) » pour indiquer aux utilisateurs qu'ils doivent saisir le texte comme requis.
   3. Enregistrez le composant de champ de texte.

4. In the Display tab of the HTML element component:

   1. Dans la section Contenu , référencez l'image que vous souhaitez afficher. Par exemple : <img href="https://picsum.photos/200/300" />.
   2. Cochez la case Masqué pour masquer l'affichage de l'image par défaut.
   3. Enregistrez le composant Élément HTML.

5. Go to the Logic tab of the HTML element component.

6. Ajoutez une logique et nommez-la « entrée utilisateur ».

7. Select the JSON Logic trigger type.

8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }
   

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

9. Ajoutez une action et nommez-la « display image ».

10. Select the Property action type.

    1. Dans le menu déroulant Propriété du composant , sélectionnez Caché.
    2. Dans le menu déroulant Set State , sélectionnez False.

11. Enregistrez l'action et la logique.

12. Enregistrez le composant.

Au moment de l'exécution, si l'utilisateur saisit le texte requis dans le champ de texte, le formulaire affiche le contenu HTML.

Exemple de workflow

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