Interface utilisateur de l’éditeur de règles pour Forms adaptatif basée sur les composants principaux

L’interface utilisateur de l’éditeur de règles pour les Forms adaptatives basées sur les composants principaux améliore le processus de création de formulaires dans Adobe Experience Manager (AEM). Il permet à la fois aux utilisateurs professionnels et aux développeurs d’implémenter un comportement dynamique et une logique complexe dans des formulaires en écrivant des règles qui déclenchent des actions en fonction de conditions prédéfinies, d’entrées utilisateur et d’interactions. Cette fonctionnalité prend en charge les fonctionnalités JavaScript modernes, notamment les fonctionnalités ES10, et offre un éditeur visuel intuitif qui simplifie le processus d’écriture de règles.
L’éditeur de règles contribue à rationaliser l’expérience de remplissage de formulaire, en assurant à la fois précision et efficacité. Il permet la validation ou la réinitialisation des panneaux et des formulaires, ainsi que l’exécution de fonctions personnalisées pour calculer les valeurs des objets de formulaire. Grâce à sa prise en charge des conditions imbriquées et à la possibilité d’appeler les services de modèle de données de formulaire, l’interface utilisateur de l’éditeur de règles est un composant essentiel pour la création de formulaires adaptatifs réactifs, conviviaux.

Présentation de l’interface utilisateur de l’éditeur de règles understanding-the-rule-editor-user-interface

L’éditeur de règles offre une interface utilisateur exhaustive et néanmoins simple, qui permet de créer et de gérer des règles. Vous pouvez lancer l’interface utilisateur de l’éditeur de règles à partir d’un formulaire adaptatif en mode Création.

Pour lancer l’interface utilisateur de l’éditeur de règles :

  1. Ouvrez un formulaire adaptatif en mode Création.

  2. Sélectionnez l’objet de formulaire pour lequel vous voulez créer une règle, puis edit-rules de la barre d’outils Composant. L’interface utilisateur de l’éditeur de règles s’affiche.

    create-rules

    Toutes les règles existantes pour les objets de formulaire sélectionnés sont répertoriées dans cet écran. Pour plus d’informations sur la gestion des règles existantes, voir Gestion des règles.

  3. Sélectionnez Créer pour créer une règle. L’éditeur visuel de l’interface utilisateur de l’éditeur de règles s’affiche par défaut la première fois que vous lancez l’éditeur de règles.

    Interface utilisateur de l’éditeur de règles

Examinons en détail chaque composant de l’interface utilisateur de l’éditeur de règles.

A. Affichage composant-règle a-component-rule-display

Affiche le titre de l’objet de formulaire adaptatif à partir duquel vous avez lancé l’éditeur de règles et le type de règle actuellement sélectionné. Dans l’exemple ci-dessus, l’éditeur de règles est lancé à partir d’un objet de formulaire adaptatif intitulé Question 1 et le type de règle sélectionné est Lorsque.

B. Objets de formulaire et fonctions b-form-objects-and-functions-br

Le volet situé à gauche de l’interface utilisateur de l’éditeur de règles comporte deux onglets: Objets de formulaire et Fonctions.

L’onglet Objets de formulaire affiche une arborescence de tous les objets contenus dans le formulaire adaptatif. Il affiche le titre et le type des objets. Lors de la création d’une règle, vous pouvez faire glisser-déposer les objets de formulaire dans l’éditeur de règles. Lorsque vous créez ou modifiez une règle en faisant glisser et en déposant un objet ou une fonction dans un espace réservé, cet espace prend automatiquement le type de valeur approprié.

Les objets de formulaire contenant une ou plusieurs règles valides appliquées sont désignés par un point vert. Si l’une des règles appliquées à un objet de formulaire n’est pas valide, l’objet de formulaire est désigné par un point jaune.

L’onglet Fonctions comporte un jeu de fonctions intégrées, comme Somme de, Minimum de, Maximum de, Moyenne de, Nombre de et Valider le formulaire. Vous pouvez utiliser ces fonctions pour calculer des valeurs dans les panneaux et les lignes de tableau répétables et pour les instructions d’action et de condition lors de la création de règles. Vous pouvez toutefois créer des fonctions personnalisées.

Certaines fonctions de la liste sont affichées dans la figure :

L’onglet Fonctions

NOTE
Vous pouvez effectuer une recherche de texte sur les noms et titres des objets et des fonctions dans les onglets Objets et fonctions Forms .

Dans l’arborescence de gauche des objets de formulaire, vous pouvez sélectionner les objets de formulaire pour afficher les règles appliquées à chacun des objets. Vous pouvez non seulement parcourir les règles des différents objets de formulaire mais également copier-coller des règles entre les objets du formulaire. Pour plus d’informations, reportez-vous à la section Règles de copier-coller.

C. Basculement entre les objets de formulaire et les fonctions c-form-objects-and-functions-toggle-br

Le bouton Basculer, lorsqu’il est sélectionné, permet de basculer entre le volet des objets de formulaire et celui des fonctions.

D. Éditeur de règles visuel visual-rule-editor

Lorsque l’interface utilisateur de l’éditeur de règles est en mode éditeur visuel, l’éditeur de règles visuel est la zone dans laquelle vous créez des règles. Il vous permet de sélectionner un type de règle et de définir en conséquence des conditions et des actions. Lors de la définition des conditions et des actions dans une règle, vous pouvez glisser-déposer des objets de formulaire et des fonctions depuis le volet Objets de formulaire et Fonctions.

Pour plus d’informations sur l’utilisation d’un éditeur de règles visuel, voir Écrire des règles.

E. Boutons Terminé et Annuler done-and-cancel-buttons

Le bouton Terminé permet d’enregistrer une règle. Vous pouvez enregistrer une règle incomplète. Toutefois, les règles incomplètes ne sont pas valides et ne s’exécutent pas. Les règles enregistrées sur un objet de formulaire sont répertoriées lorsque vous lancez l’éditeur de règles la prochaine fois à partir du même objet de formulaire. Vous pouvez gérer des règles existantes dans cette vue. Pour plus d’informations, consultez la section Gérer les règles.

Le bouton Annuler annule toutes les modifications que vous avez apportées à une règle et ferme l’éditeur de règles.

Règles d’écriture write-rules

Vous pouvez écrire des règles à l’aide de l’éditeur de règles visuel

Commençons par découvrir comment écrire des règles à l’aide d’un éditeur visuel.

+++

Utilisation de l’éditeur visuel {#using-visual-editor}

Découvrez comment créer une règle dans un éditeur visuel à l’aide de l’exemple de formulaire suivant.

Create-rule-example

La section Conditions de prêt dans l’exemple de formulaire de demande de prêt requiert des demandeurs et demandeuses de spécifier leur état civil, leur salaire et, si ils ou elles sont marié(e)s, le salaire de leur conjoint(e). D’après les entrées de l’utilisateur ou utilisatrice, la règle permet de calculer le montant d’éligibilité du prêt et l’affiche dans le champ Éligibilité de prêt. Appliquez les règles suivantes pour mettre en œuvre le scénario :

  • Le champ Salaire de l’époux ou de l’épouse s’affiche uniquement lorsque la valeur État civil est Marié ou Mariée.
  • Le montant d’éligibilité de prêt représente 50 % du salaire total.

Pour créer des règles :

  1. Tout d’abord, écrivez la règle pour contrôler la visibilité du champ Salaire du conjoint en fonction de l’option que l’utilisateur sélectionne pour le bouton radio État civil .

    Ouvrez le formulaire de demande de prêt en mode Création. Sélectionnez le composant État civil et choisissez edit-rules . Ensuite, sélectionnez Créer pour lancer l’éditeur de règles.

    write-rules-visual-editor-1

    Lorsque vous lancez l’éditeur de règles, la règle Lorsque est sélectionnée par défaut. En outre, l’objet de formulaire (dans ce cas, État civil) d’où vous avez lancé l’éditeur de règles est spécifié dans l’instruction Lorsque.

    Bien que vous ne puissiez pas changer ou modifier l’objet sélectionné, vous pouvez utiliser la liste déroulante de règles, comme indiqué ci-dessous, pour sélectionner un autre type de règle. Si vous souhaitez créer une règle sur un autre objet, sélectionnez Annuler pour quitter l’éditeur de règles et relancez-le depuis l’objet de formulaire de votre choix.

  2. Sélectionnez le menu déroulant Sélectionner l’état et choisissez est égal à. Le champ Saisissez une chaîne s’affiche.

    write-rules-visual-editor-2

  3. Dans le champ Entrer une chaîne de la règle, sélectionnez Marié dans le menu déroulant.

    write-rules-visual-editor-4

    Vous avez défini la condition comme When Marital Status is equal to Married. Définissez ensuite l’action à effectuer si cette condition est True.

  4. Dans l’instruction Alors, sélectionnez Afficher dans le menu déroulant Sélectionner une action.

    write-rules-visual-editor-5

  5. Faites glisser et déposez le champ Salaire du conjoint de l’onglet Objets de formulaire vers le champ Déposez l’objet ou sélectionnez ici. Vous pouvez également sélectionner le champ Déposer l’objet ou sélectionner ici, puis le champ Salaire du conjoint ou de la conjointe dans le menu contextuel, qui répertorie tous les objets de formulaire dans le formulaire.

    write-rules-visual-editor-6

    Définissez ensuite l’action à effectuer si cette condition est False.

  6. Cliquez sur Ajouter une autre section pour ajouter une autre condition pour le champ Salaire du conjoint, au cas où vous sélectionneriez État civil comme seul.

    when-else

  7. Dans l’instruction Else, sélectionnez Masquer dans la liste déroulante Sélectionner une action.
    when-else

  8. Faites glisser et déposez le champ Salaire du conjoint de l’onglet Objets de formulaire vers le champ Déposez l’objet ou sélectionnez ici. Vous pouvez également sélectionner le champ Déposer l’objet ou sélectionner ici, puis le champ Salaire du conjoint ou de la conjointe dans le menu contextuel, qui répertorie tous les objets de formulaire dans le formulaire.
    when-else

    La règle s’affiche comme suit dans l’éditeur de règles.

    write-rules-visual-editor-7

  9. Cliquez sur Terminé pour enregistrer la règle.

note note
NOTE
Vous pouvez également écrire une règle Afficher sur le champ Salaire du conjoint, au lieu d’une règle Lorsque sur le champ État civil, pour mettre en oeuvre le même comportement.

write-rules-visual-editor-9

  1. Ensuite, créez une règle pour calculer le niveau d’éligibilité de prêt, à hauteur de 50 % du salaire total, puis affichez-la dans le champ Éligibilité de prêt. Pour obtenir ce résultat, créez des règles Définir la valeur de sur le champ Éligibilité de prêt .

    En mode Création, sélectionnez le champ Éligibilité de prêt, puis edit-rules . Ensuite, sélectionnez Créer pour lancer l’éditeur de règles.

  2. Sélectionnez la règle Définir la valeur de dans la liste déroulante des règles.

    write-rules-visual-editor-10

  3. Choisissez Sélectionner l’option et sélectionnez Expression mathématique. Un champ permettant de saisir l’expression mathématique s’ouvre.

    write-rules-visual-editor-11

  4. Dans le champ d'expression :

    • Sélectionnez ou faites glisser et déposez le champ Salaire, de l’onglet Objet de formulaire vers le premier champ Déposez l’objet ou sélectionnez ici.

    • Sélectionnez Plus dans le champ Sélectionner un opérateur.

    • Sélectionnez ou faites glisser et déposez depuis le champ Salaire du conjoint de l’onglet Objets de formulaire vers l’autre champ Déposez l’objet ou sélectionnez ici.

    write-rules-visual-editor-12

  5. Ensuite, sélectionnez la zone en surbrillance autour du champ Expression et choisissez Étendre l’expression.

    write-rules-visual-editor-13

    Dans le champ d’expression étendue, sélectionnez divisé par dans le champ Sélectionner un opérateur et Nombre dans le champ Sélectionner une option. Ensuite, spécifiez 2 dans le champ Nombre.

    write-rules-visual-editor-14

    note note
    NOTE
    Vous pouvez créer des expressions complexes à l’aide de composants, fonctions, expressions mathématiques et valeurs de propriété dans le champ Sélectionner une option.

    Créez ensuite une condition qui, lorsqu’elle renvoie True, permet que l’expression s’exécute.

  6. Sélectionnez Ajouter une condition pour ajouter une instruction Lorsque.

    write-rules-visual-editor-15

    Dans l’instruction Lorsque :

    • Sélectionnez ou glissez-déposez depuis l’onglet Objets de formulaire le champ État civil dans le premier champ Déposez l’objet ou sélectionnez ici.

    • Sélectionnez est égal à dans le champ Sélectionner un opérateur.

    • Sélectionnez Chaîne dans l’autre champ Déposez l’objet ou sélectionnez ici et spécifiez Marié(e) dans le champ Saisissez la chaîne.

    Enfin, la règle s’affiche comme suit dans l’éditeur de règles. write-rules-visual-editor-16

  7. Sélectionnez Terminé. La règle est enregistrée.

  8. Répétez les étapes 7 à 14 pour définir une autre règle pour calculer le montant d’éligibilité si la valeur d’état civil est Célibataire. La règle s’affiche comme suit dans l’éditeur de règles.

    write-rules-visual-editor-17

Vous pouvez également utiliser la règle Définir la valeur de pour calculer l’éligibilité de prêt dans la règle Lorsque que vous avez créée pour afficher ou masquer le champ Salaire du conjoint. La règle combinée résultante, lorsque l’état civil est Célibataire, s’affiche comme suit dans l’éditeur de règles.

write-rules-visual-editor-18

Vous pouvez écrire une règle combinée pour contrôler la visibilité du champ Salaire du conjoint et calculer l’éligibilité de prêt lorsque l’état civil est Marié à l’aide de la condition Sinon.

write-rules-visual-editor-19

Fonctions personnalisées dans l’éditeur de règles custom-functions

Outre les fonctions prêtes à l’emploi telles que Somme de répertoriées sous Fonctions Output, vous pouvez également utiliser des fonctions personnalisées dans votre éditeur de règles. L’éditeur de règles prend en charge la syntaxe ECMAScript 2019 de JavaScript pour les scripts et les fonctions personnalisées. Pour plus d’informations sur la création de fonctions personnalisées, consultez l’article Fonctions personnalisées dans les formulaires adaptatifs.

Gestion des règles manage-rules

Les règles existantes sur un objet de formulaire sont répertoriées lorsque vous sélectionnez l’objet et edit-rules1 . Vous pouvez afficher le titre et un aperçu du résumé de la règle. En outre, l’interface utilisateur vous permet de développer et d’afficher le résumé complet d’une règle, de changer l’ordre des règles, de les modifier et de les supprimer.

Liste-rules

Vous pouvez effectuer les actions suivantes sur les règles :

  • Développer/Réduire : la colonne Contenu dans la liste des règles affiche le contenu des règles. Si le contenu entier des règles n’est pas visible dans l’affichage par défaut, sélectionnez expand-rule-content pour le développer.

  • Réorganiser : toute nouvelle règle que vous créez est empilée au bas de la liste des règles. Les règles sont exécutées de haut en bas. La règle en haut s’exécute en premier, suivie des autres règles du même type. Par exemple, si vous disposez de règles Lorsque, Afficher, Activer et Lorsque à la première, deuxième, troisième et quatrième position depuis le haut, respectivement, la règle Lorsque dans la partie supérieure est exécutée en premier, suivie de la règle Lorsque à la quatrième position. Ensuite, les règles Afficher et Activer seront exécutées.
    Vous pouvez modifier l’ordre d’une règle en appuyant sur sort-rules en regard ou la faire glisser et la déposer dans l’ordre souhaité dans la liste.

  • Modifier : pour modifier une règle, cochez la case située en regard du titre de la règle. Les options de modification et de suppression de la règle s’affichent. Sélectionnez Modifier pour ouvrir la règle sélectionnée dans l’éditeur de règles.

  • Supprimer : pour supprimer une règle, sélectionnez-la puis choisissez Supprimer.

  • Activer/Désactiver : lorsque vous devez suspendre temporairement l’utilisation d’une règle, vous pouvez sélectionner une ou plusieurs règles et sélectionner Désactiver dans la barre d’outils Actions pour les désactiver. Si une règle est désactivée, elle ne s’exécute pas lors de l’exécution. Pour activer une règle désactivée, vous pouvez la sélectionner puis choisir Activer dans la barre d’outils Actions. La colonne de statut de la règle indique si la règle est activée ou désactivée.

Désactiver la règle

Règles de copier-coller copy-paste-rules

Vous pouvez copier-coller une règle d’un champ à d’autres champs similaires pour gagner du temps.

Pour copier-coller des règles, procédez comme suit :

  1. Sélectionnez l’objet de formulaire à partir duquel vous souhaitez copier une règle, puis, dans la barre d’outils du composant, sélectionnez modifier la règle . L’interface utilisateur de l’éditeur de règles s’affiche avec l’objet de formulaire sélectionné, et les règles existantes s’affichent.

    copy rule

    Pour plus d’informations sur la gestion des règles existantes, voir Gestion des règles.

  2. Cochez la case en regard du titre de la règle pour afficher les options de gestion de la règle. Sélectionnez Copie.

    copyrule2

  3. Sélectionnez un autre objet de formulaire dans lequel vous souhaitez coller la règle et choisissez Coller. De plus, vous pouvez modifier la règle pour y apporter des modifications.

    note note
    NOTE
    Vous pouvez coller une règle dans un autre objet de formulaire uniquement si cet objet de formulaire prend en charge les événement de la règle copiée. Par exemple, un bouton prend en charge l’événement Cliquer. Vous pouvez coller une règle avec un événement Cliquer sur un bouton mais pas dans une case à cocher.
  4. Sélectionnez Terminé pour enregistrer la règle.

Étape suivante

Pour comprendre les différents types d’opérateurs et événements dans l’éditeur de règles d’un formulaire adaptatif, reportez-vous à l’article Types d’opérateurs et événements disponibles dans l’éditeur de règles d’un formulaire adaptatif .

Voir également

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab