Logique avancée

L'onglet Logique du Concepteur de formulaires (Form Designer) vous permet de créer des conditions et des scripts logiques avancés qui peuvent modifier l'état ou le comportement du composant de formulaire sélectionné.

À 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 sur laquelle les Actions sont exécutées. Par exemple, vous pouvez 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 Actions.

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 des 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 des données de formulaire. Recommandé dans les cas où JavaScript n'est pas autorisé. Ne peut pas 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 de composant disponibles, telles que l'info-bulle, la description, la 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 de composant trouvés dans le composant JSON. Pour voir les paramètres de schéma que vous pouvez modifier, survolez le composant correspondant et cliquez sur Modifier le JSON ( Edit 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. Accédez à l'onglet Logique (Logic) du composant que vous souhaitez modifier (c'est-à-dire le composant sur lequel les Actions doivent avoir lieu).
4. Cliquez sur + Ajouter une logique (Add Logic). Vous pouvez ajouter autant de logiques que vous le souhaitez.
5. Saisissez un nom pour votre logique.
6. Dans le volet Déclencheur (Trigger), sélectionnez le type de déclencheur que vous souhaitez utiliser dans votre logique. Les types disponibles sont Simple, Javascript, JSON Logicet Event. Définissez les conditions souhaitées pour déclencher l’action.
7. Dans le volet Actions , cliquez sur +Ajouter des Actions. Vous pouvez ajouter autant d' Actions que vous le souhaitez, toutes déclenchées par la logique qui les regroupe.
8. Saisissez un nom pour votre action.
9. Sélectionnez le type d'action que vous souhaitez utiliser. Les types disponibles sont Propriété, Valeur, Merge Component Schemaet Action personnalisée. Définissez l'effet souhaité de votre action.
10. Lorsque vous avez terminé, cliquez sur Enregistrer les actions ( Save Actions).
11. Pour enregistrer votre logique, cliquez sur Enregistrer la logique ( 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 & Type d' Actions : valeur Résumant dynamiquement deux champs de texte
• Type de déclencheur : Simple Type d' Actions et d'actions : Propriété Masquage dynamique d'un champ
• Type de déclencheur : Simple et Type d' Actions : Schéma de composants de fusion ( Merge Component Schema ) Modification dynamique de la couleur du titre
• 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' Actions : Propriété Affichage d'un composant basé sur l'entrée de l'utilisateur

Résumé dynamique de deux champs de texte

Type de déclencheur : JavaScript Type d'action : 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. Faites glisser et déposez trois composants Champ de texte (Text Field ) dans votre formulaire.
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.
   Vous pouvez éventuellement définir le composant de champ de texte Total sur Désactivé ( Disabled) afin que les utilisateurs professionnels ne puissent pas interagir avec lui.
4. Accédez à l'onglet Logique (Logic) du composant de champ Total .
5. Ajoutez une logique et nommez-la « somme dynamique ».

6. Sélectionnez le type de déclencheur Javascript et entrez le script suivant dans la section Zone de texte (Text Area) :

   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. Sélectionnez le type d'action Valeur (Value) et entrez le script suivant dans la section Valeur (Javascript) :

   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' Actions simples : 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. Faites glisser et déposez deux composants Champ de texte (Text Field ).
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. Accédez à l'onglet Logique du composant Child field .
5. Ajoutez une logique et nommez-la « Hide input (Masquer l’entrée) ».

6. Sélectionnez le type de déclencheur simple .

   6.1. À partir du menu déroulant Lorsque le composant de formulaire , sélectionnez Parent field ({parentField_field_key}).

   6.2. Dans le champ A la valeur ( Has the value ), entrez « masquer ».

   La configuration ci-dessus détecte si l'utilisateur a saisi la chaîne « hide » dans le champ parent et déclenche l'action pour masquer le champ enfant.

7. Ajoutez une action et nommez-la « Hide (Masquer) ».

8. Sélectionnez le type Actions de propriété ( Property Actions ).

   8.1. Dans le menu déroulant Propriété du composant ( Component Property ), sélectionnez Masqué ( Hidden) .

   8.2. Dans le menu déroulant Définir l' état (Set State ), sélectionnez Vrai(True).

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' Actions simples : Schéma de composant de fusion

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 :

Créez un fichier CSS contenant la nouvelle couleur du libellé du champ de texte et référencez-la dans l'activité Créer un formulaire (Create Form), dans la propriété d'activité LocalCSSFilePath .

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. Faites glisser et déposez un composant Champ de texte (Text Field ) et un composant Radio (Radio). Faites attention à leurs clés de champ, car vous les utilisez dans votre logique avancée.
3. Dans l'onglet Affichage (Display) du composant de champ de texte, définissez une Classe CSS personnalisée ( Custom CSS Class) 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. Pour le composant Radio , ajoutez deux valeurs pour les couleurs green et red.
5. Accédez à l'onglet Logique (Logic) du composant Champ de texte (Text Field ).
6. Ajoutez une logique et nommez-la « sélection de couleur ».

7. Sélectionnez le type de déclencheur simple .

   7.1. À partir du menu déroulant Lorsque le composant de formulaire , sélectionnez Radio ({radio_field_key}).

   7.2. Dans le champ A la valeur ( Has the value ), saisissez « vert ».

   La configuration ci-dessus détecte si l'utilisateur sélectionne « vert » dans les options 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. Sélectionnez le type Actions de composant de schéma ( Merge Schema Component Actions ) et saisissez l'extrait suivant :

   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. Faites glisser et déposez un composant Text Field et un composant Button . Faites attention aux clés de champ des composants, car vous les utilisez dans votre logique avancée.

3. Dans l'onglet Affichage du composant Bouton :

   3.1. Étiqueter le composant de bouton comme Change value to "Default"

   3.2. Définir les Actions du bouton en tant que clic ( Click)

   3.3. Cochez la case Utiliser pour la mise à jour locale.

   3.4. Saisissez l'extrait suivant dans la section Mettre à jour la logique des données (Update Data Logic) . Cela émettra l'événement appelé resetTextField chaque fois que l'utilisateur clique sur le bouton.

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

   3.5. Enregistrez le composant de bouton.

4. Accédez à l'onglet Logique du composant de champ de texte.
5. Ajoutez une logique et nommez-la « reset ».
6. Sélectionnez le type de déclencheur d' événement .
7. Dans le champ Nom de l' événement (Event Name ), saisissez le nom de l'événement émis lorsque vous cliquez sur le bouton. (c'est-à-dire 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. Sélectionnez le type Actions personnalisées ( Custom Actions ).

10. Saisissez l'extrait de code suivant dans la section Action personnalisée (Javascript) .

    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 : Logique JSON Type d' Actions : 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. Faites glisser et déposez un composant Champ de texte (Text Field ) et un composant Élément HTML (HTML Element). Faites attention aux clés de champ des composants, car vous les utilisez dans votre logique avancée.

3. Dans l'onglet Affichage (Display) du composant de champ de texte :

   3.1. Labellisez le composant de champ de texte comme "Type "Show me"".

   3.2. Ajoutez la description « Doit être une correspondance exacte (sensible à la casse) », pour indiquer aux utilisateurs qu’ils doivent saisir le texte requis.

   3.3. Enregistrez le composant de champ de texte.

4. Dans l'onglet Affichage du composant Élément HTML :

   4.1. Dans la section Contenu (Content), référencez l'image que vous souhaitez afficher. Par exemple : <img href="https://picsum.photos/200/300" />.

   4.2. Cochez la case Caché (Hidden) pour masquer l'affichage par défaut de l'image. 4.3. Enregistrez le composant d'élément HTML.

5. Accédez à l'onglet Logique (Logic) du composant Élément HTML.
6. Ajoutez une logique et nommez-la « entrée utilisateur ».
7. Sélectionnez le type de déclencheur Logique JSON (JSON Logic).
8. Saisissez l'extrait suivant dans la section Logique JSON (JSON Logic) et remplacez {text_field_component_field_key} par la valeur de la clé de champ que vous avez définie pour votre composant de champ de texte.

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

   La configuration ci-dessus détecte lorsque l'utilisateur saisit « Montrez-moi (Show me) » et ne définit qu'ensuite la valeur de la propriété Hidden de l'élément HTML ( Hidden ) sur False, affichant ainsi le contenu HTML correspondant.

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

10. Sélectionnez le type Actions de propriété ( Property Actions ).

    10.1. Dans le menu déroulant Propriété du composant ( Component Property ), sélectionnez Hidden(Caché).

    10.2. Dans le menu déroulant Définir l' état (Set State ), sélectionnez Faux ( 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 future référence, téléchargez l' exemple XAML