Didacticiel : application de règles aux champs de formulaires adaptatifs

06-apply-rules-to-adaptive-form_main

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

À propos du didacticiel

Vous pouvez utiliser des règles pour ajouter de l’interactivité, une logique d’entreprise et des validations intelligentes à un formulaire adaptatif. Les formulaires adaptatifs ont un éditeur de règles intégré. L’éditeur de règles offre une fonctionnalité de glisser-déposer, semblable aux visites guidées. L’option de 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 intéressés par le test de leurs compétences de codage ou à par l’optimisation des règles.

Vous pouvez en savoir plus sur l’éditeur de règles dans l’Éditeur de règles de formulaires adaptatifs.

À 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 à partir de la base de données

Vous avez créé un modèle de données de formulaire en suivant l’article Création d’un modèle de données de formulaire. Maintenant, vous pouvez utiliser l’éditeur de règles pour appeler les services de modèle de données de formulaire pour récupérer et ajouter des informations à la base de données.

Chaque client se voit attribuer un numéro d’ID de client unique, 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 à partir 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 l’icône + Créer pour ajouter une règle. L’éditeur visuel s’ouvre.

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

  4. Appuyez sur la liste déroulante Sélectionner l’état et sélectionnez est modifié.

    whencustomeridischanged

  5. Dans l’instruction PUIS, sélectionnez Appeler un service à partir du menu déroulant Sélectionner une action.

  6. Sélectionnez le service Extraire l’adresse d’expédition dans le menu déroulant Sélectionner.

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

    dropobjectstoinputfield-retrievedata

  8. Faites glisser et déposez le champ ID client, nom, adresse d’expédition, état et code postal de l’onglet Objets de formulaire vers le champ Déposez l’objet ou sélectionnez 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. Entrez un ID dans le champ ID client. Le formulaire peut maintenant récupérer les détails du client à partir de la base de données.

    retrieve-information

Étape 2 : insertion de l’adresse client mise à jour dans la base de données

Une fois les détails du client extraits de 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 dans 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 - Cliquez sur et appuyez sur l’icône Modifier. Les options permettant de modifier la règle Envoi s’affichent.

    submit-rule

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

    submit-is-clicked

  3. Dans l’option PUIS, appuyez sur l’option + Ajoutez l’instruction. Sélectionnez Appel du service à partir du menu déroulant Sélectionner l’action.

  4. Sélectionnez le service Mettre à jour l’adresse de livraison dans le menu déroulant Sélectionner.

    update-shipping-address

    dropobjectstoinputfield-updatedata

  5. Glissez-déposez le champ Adresse d’expédition, État et Code postal de l’onglet Objets de formulaire vers la propriété .table correspondante (par exemple, customerdetails .shippingAddress) du Déposez l’objet ou sélectionnez ici dans la zone INPUT. Tous les champs portant le préfixe tablename (par exemple, customerdetails dans ce cas pratique) 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.

    REMARQUE

    Ne faites pas glisser les champs Nom et ID client vers la propriété tablename.property correspondante (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 nom de table prédéfini (par exemple, customerdetails dans ce cas pratique) servent de paramètre de recherche pour le service de mise à jour. Le champ id de ce cas pratique identifie de manière unique un enregistrement dans la table 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) utilisation de l’éditeur de code pour exécuter des validations et afficher les messages d’erreur

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 client non existant est entré dans le formulaire, un message d’erreur doit s’afficher.

Les formulaires adaptatifs fournissent plusieurs composants avec des validations intégrées, par exemple, des champs d’adresse électronique et des champs numériques que vous pouvez utiliser pour les 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 de client saisi dans le formulaire n’existe pas dans la base de données. La règle met également l’accent sur le champ ID de 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 de client et appuyez sur l’icône Edit Rules. La fenêtre Éditeur de règles s’ouvre.

  2. Appuyez sur l’icône + Créer pour ajouter une règle. L’éditeur visuel s’ouvre.

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

  3. Appuyez sur la liste déroulante Sélectionner l’état et sélectionnez est modifié.

    whencustomeridischanged

    Dans l’instruction PUIS, sélectionnez Appeler un service à partir du menu déroulant Sélectionner une action.

  4. Basculez de l’éditeur visuel à l’éditeur de code. Le contrôle du commutateur est sur le côté droit de la fenêtre. L’éditeur de code s’ouvre, affichant un code similaire à celui-ci :

    éditeur de code

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

    var inputs = {
        "id" : this
    };
    
  6. Remplacez la section guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) par le code suivant :

    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. Entrez un ID de client incorrect. Un message d’erreur s’affiche.

    display-validation-error

Sur cette page