DocumentationAEM 6.4Guide de Forms

Didacticiel : application de règles aux champs de formulaires adaptatifs tutorial-apply-rules-to-adaptive-form-fields

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • User
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

06-apply-rules-to-adaptive-form_main

Ce tutoriel est une étape dans la Créer votre premier formulaire adaptatif série. Adobe recommande de suivre la série dans un ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du tutoriel.

À propos du tutoriel about-the-tutorial

Vous pouvez utiliser des règles pour ajouter de l’interactivité, une logique métier et des validations intelligentes à un formulaire adaptatif. Les formulaires adaptatifs disposent d’un éditeur de règles intégré. L’éditeur de règles propose une fonctionnalité de glisser-déposer, similaire aux visites guidées. La méthode glisser-déposer est la méthode la plus rapide et la plus simple pour créer des règles. L’éditeur de règles fournit également une fenêtre de code pour les utilisateurs qui souhaitent tester leurs compétences de codage ou passer les règles au niveau supérieur.

Pour en savoir plus sur l’éditeur de règles, voir Éditeur de règles Adaptive Forms.

À la fin du didacticiel, vous apprendrez à créer des règles pour :

  • Appeler un service de modèle de données de formulaire pour récupérer des données de la base de données
  • Appeler un service de modèle de données de formulaire pour ajouter des données à la base de données
  • exécuter une vérification des validations et afficher les messages d’erreur.

Les images GIF interactives à la fin de chaque section du didacticiel vous aident à apprendre et à valider les fonctionnalités du formulaire que vous créez, à la volée.

Étape 1 : Récupération d’un enregistrement client dans la base de données retrieve-customer-record

Vous avez créé un modèle de données de formulaire en suivant la procédure suivante : créer un modèle de données de formulaire article. Vous pouvez désormais utiliser l’éditeur de règles pour appeler les services de modèle de données Forms afin de récupérer et d’ajouter des informations à la base de données.

Un numéro d’ID de client unique est attribué à chaque client, ce qui permet d’identifier les données client pertinentes dans une base de données. La procédure ci-dessous utilise l’ID de client pour récupérer les informations de la base de données :

  1. Ouvrez le formulaire adaptatif pour le modifier.

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. Appuyez sur le champ ID de client et appuyez sur l’icône Modifier les règles. La fenêtre Éditeur de règles s’ouvre.

  3. Appuyez sur le bouton + Créer pour ajouter une règle. Il ouvre l’éditeur visuel.

    Dans l’éditeur visuel, l’instruction QUAND est sélectionnée par défaut. En outre, l’objet de formulaire (dans ce cas, ID de client) d’où vous avez lancé l’éditeur de règles est spécifié dans l’instruction QUAND.

  4. Cliquez sur le menu déroulant  Sélectionner un état  et sélectionnez a changé.

    whencustomeridischanged

  5. Dans le ALORS instruction, sélectionnez Appeler le service de la Sélectionner une action menu déroulant.

  6. Sélectionnez la Récupérer l’adresse d’expédition du service Sélectionner menu déroulant.

  7. Faites glisser et déposez le champ ID du client de l’onglet Objets de formulaire vers le champ Déposer l’objet ou sélectionner ici dans la zone ENTREE.

    dropobjectstoinputfield-retrievedata

  8. Faites glisser et déposez le champ ID du client, Nom, Adresse d’expédition, État et Code postal de l’onglet Objets de formulaire vers le champ Déposer l’objet ou sélectionner ici dans la zone SORTIE.

    dropobjectstooutputfield-retrievedata

    Appuyez sur Terminé pour enregistrer la règle. Dans la fenêtre Éditeur de règles, appuyez sur Fermer.

  9. Prévisualisez le formulaire adaptatif. Saisissez un identifiant dans la variable ID de client champ . Le formulaire peut désormais récupérer les détails du client dans la base de données.

    retrieve-information

Étape 2 : Ajout de l’adresse client mise à jour à la base de données updated-customer-address

Une fois les détails du client récupérés dans la base de données, vous pouvez mettre à jour l’adresse de livraison, l’état et le code postal. La procédure ci-dessous appelle un service de modèle de données de formulaire pour mettre à jour les informations client vers la base de données :

  1. Sélectionnez le champ Envoyer et appuyez sur l’icône Modifier les règles. La fenêtre Éditeur de règles s’ouvre.

  2. Sélectionnez la règle Envoyer - Cliquer et appuyez sur l’icône Modifier. Les options permettant de modifier la règle Envoi s’affichent.

    règle-envoi

    Dans l’option WHEN, les options  Envoi et est activé sont déjà sélectionnées.

    envoi-est-activé

  3. Dans le ALORS , appuyez sur le bouton + Ajouter une instruction . Sélectionner Appeler le service de la Sélectionner une action menu déroulant.

  4. Sélectionnez la Mettre à jour l’adresse d’expédition du service Sélectionner menu déroulant.

    mettre-à-jour-l’adresse-de-livraison

  5. dropobjectstoinputfield-updatedata

    Faites glisser et déposez le champ Adresse d’expédition, état et code postal de l’onglet Objets de formulaire vers l’élément tablename.property correspondant (par exemple, customerdetails.shippingAddress) du champ Déposer l’objet ou sélectionnez ici dans la zone ENTRÉE. Tous les champs portant le préfixe tablename (par exemple, customerdetails dans ce cas d’utilisation) servent de données d’entrée pour le service de mise à jour. Tout le contenu fourni dans ces champs est mis à jour dans la source de données.

    note note
    NOTE
    Ne faites pas glisser les champs Nom  et ID du client vers l’élément tablename.property correspondant (par exemple, customerdetails.name). Cela permet d’éviter de mettre à jour le nom et l’ID du client par erreur.

  6. Glissez-déposez le champ ID du client de l’onglet Objets de formulaire vers le champ ID dans la zone ENTREE. Les champs sans préfixe tablename (par exemple, customerdetails dans ce cas d’utilisation) servent de paramètre de recherche pour le service de mise à jour. Le champ id dans ce cas d’utilisation identifie de manière unique un enregistrement dans la tableau customerdetails.

  7. Appuyez sur Terminé pour enregistrer la règle. Dans la fenêtre Éditeur de règles, appuyez sur Fermer.

  8. Prévisualisez le formulaire adaptatif. Récupérez les détails d’un client, mettez à jour l’adresse de livraison et envoyez le formulaire. Lorsque vous récupérez à nouveau les détails du même client, l’adresse de livraison mise à jour s’affiche.

Étape 3 : (section bonus) Utilisez l’éditeur de code pour exécuter des validations et afficher des messages d’erreur. step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

Vous devez exécuter la validation sur le formulaire pour vous assurer que les données saisies dans le formulaire sont correctes et qu’un message d’erreur s’affiche en cas de données incorrectes. Par exemple, si un ID de client non existant est saisi dans le formulaire, un message d’erreur s’affiche.

Les formulaires adaptatifs fournissent plusieurs composants avec des validations intégrées, par exemple, des champs de courrier électronique et numériques que vous pouvez utiliser pour des cas d’utilisation courants. Utilisez l’éditeur de règles pour les cas d’utilisation avancés, par exemple, pour afficher un message d’erreur lorsque la base de données renvoie zéro (0) enregistrement (aucun enregistrement).

La procédure suivante montre comment créer une règle pour afficher un message d’erreur si l’ID du client entré dans le formulaire n’existe pas dans la base de données. La règle met également l’accent sur le champ ID du client et le réinitialise. La règle utilise l’API dataIntegrationUtils du service de modèle de données de formulaire pour vérifier si l’ID du client existe dans la base de données.

  1. Appuyez sur le champ ID du client et sur l’icône Edit Rules. La fenêtre Éditeur de règles s’ouvre.

  2. Appuyez sur le bouton + Créer pour ajouter une règle. Il ouvre l’éditeur visuel.

    Dans l’éditeur visuel, l’instruction QUAND est sélectionnée par défaut. En outre, l’objet de formulaire (dans ce cas, ID de client) d’où vous avez lancé l’éditeur de règles est spécifié dans l’instruction QUAND.

  3. Cliquez sur le menu déroulant  Sélectionner un état  et sélectionnez a changé.

    whencustomeridischanged

    Dans le ALORS instruction, sélectionnez Appeler le service de la Sélectionner une action menu déroulant.

  4. Basculer depuis Éditeur visuel to Éditeur de code. La commande de commutation se trouve sur le côté droit de la fenêtre. L’éditeur de code s’ouvre, affichant du code similaire à ce qui suit :

    éditeur-de-code

  5. Remplacez la section de variable d’entrée par le code suivant :

    code language-none 
    var inputs = {
    "id" : this
};

  6. Remplacez la section guidelib.dataIntegrationUtils.executeOperation (operationInfo, input, output) par le code suivant :

    code language-none 
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
  if (result) {
      result = JSON.parse(result);
    customer_Name.value = result.name;
    customer_Shipping_Address = result.shippingAddress;
  } else {
    if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
          customer_Name.value = " ";
         guideBridge.setFocus(customer_ID);
    }
  }
});

  7. Prévisualisez le formulaire adaptatif. Saisissez un ID de client incorrect. Un message d’erreur s’affiche.

    display-validation-error

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da