Intégrer un formulaire adaptatif à une base de données à l’aide d’un workflow AEM submit-forms-to-database-using-forms-portal

Le service de conversion automatisée de formulaires vous permet de convertir un formulaire PDF non interactif, un formulaire Acro ou un formulaire PDF basé sur XFA en un formulaire adaptatif. Lors du lancement du processus de conversion, vous avez la possibilité de générer un formulaire adaptatif avec ou sans liaison de données.

Si vous choisissez de générer un formulaire adaptatif sans liaison de données, vous pouvez incorporer le formulaire adaptatif converti à un modèle de données de formulaire, un schéma XML ou un schéma JSON après la conversion. Pour le modèle de données de formulaire, vous devez lier manuellement les champs de formulaires adaptatifs au modèle de données de formulaire. Toutefois, si vous générez un formulaire adaptatif avec des liaisons de données, le service de conversion associe automatiquement le ou les formulaires adaptatifs à un schéma JSON et crée une liaison de données entre les champs disponibles dans le formulaire adaptatif et le schéma JSON. Vous pouvez ensuite intégrer le formulaire adaptatif à une base de données de votre choix, remplir les données du formulaire et les envoyer à la base de données. De même, après une intégration réussie à la base de données, vous pouvez configurer les champs du formulaire adaptatif converti pour récupérer les valeurs de la base de données et préremplir les champs du formulaire adaptatif.

Le schéma suivant illustre différentes étapes de l’intégration d’un formulaire adaptatif converti à une base de données :

Intégration à une base de données

Cet article décrit les instructions détaillées pour réussir à exécuter toutes ces étapes d’intégration.

Prérequis pre-requisites

  • Configuration d’une instance d’auteur AEM 6.4 ou 6.5
  • Installation du dernier Service Pack pour votre instance AEM
  • Dernière version du package de module complémentaire AEM Forms
  • Configuration du service de conversion automatisée de formulaires
  • Configuration d’une base de données. La base de données utilisée dans l’exemple d’implémentation est MySQL 5.6.24. Cependant, vous pouvez intégrer le formulaire adaptatif converti à n’importe quelle base de données de votre choix.

Exemple de formulaire adaptatif sample-adaptive-form

Pour mettre en pratique le cas d’utilisation afin d’intégrer des formulaires adaptatifs convertis à une base de données à l’aide d’un processus AEM, téléchargez l’exemple de fichier PDF suivant.

Pour télécharger l’exemple de formulaire de contact, cliquez sur le lien suivant :

Obtenir le fichier

Le fichier PDF sert d’entrée au service de conversion automatisée de formulaires. Le service convertit ce fichier en un formulaire adaptatif. L’image suivante montre un exemple de formulaire de contact au format PDF.

exemple de formulaire de demande de prêt

Installer le fichier mysql-connector-java-5.1.39-bin.jar install-mysql-connector-java-file

Effectuez les étapes suivantes, sur toutes les instances d’auteur et de publication, pour installer le fichier mysql-connector-java-5.1.39-bin.jar :

  1. Accédez à http://server:port/system/console/depfinder et recherchez le package com.mysql.jdbc.
  2. Dans la colonne Exported by (Exporté par), vérifiez si le package est exporté par un groupe. Continuez si le package n’est pas exporté par un groupe.
  3. Accédez à http://server:port/system/console/bundles et cliquez sur Install/Update (Installer/Mettre à jour).
  4. Cliquez sur Choose File (Choisir un fichier) et accédez au chemin permettant de sélectionner le fichier mysql-connector-java-5.1.39-bin.jar. Cochez également les cases Start Bundle (Démarrer le groupe) et Refresh Packages (Actualiser les packages).
  5. Cliquez sur Install (Installer) ou Update (Mettre à jour). Une fois cette opération effectuée, redémarrez le serveur.
  6. (Windows uniquement) Désactivez le pare-feu système pour votre système d’exploitation.

Préparer les données pour le modèle de formulaire prepare-data-for-form-model

L’intégration de données AEM Forms permet de configurer des sources de données disparates et de s’y connecter. Après avoir généré un formulaire adaptatif à l’aide du processus de conversion, vous pouvez définir le modèle de formulaire en fonction d’un modèle de données de formulaire, XSD, ou d’un schéma JSON. Vous pouvez utiliser une base de données, Microsoft Dynamics, ou tout autre service tiers pour créer un modèle de données de formulaire.

Ce tutoriel utilise la base de données MySQL comme source pour créer un modèle de données de formulaire. Créez un schéma dans la base de données et ajoutez-y un tableau contactus en fonction des champs disponibles dans le formulaire adaptatif.

Exemples de données mysql

Vous pouvez utiliser l’instruction DDL suivante pour créer le tableau contactus dans la base de données.

CREATE TABLE `contactus` (
   `name` varchar(45) NOT NULL,
   `email` varchar(45) NOT NULL,
   `phonenumber` varchar(10) DEFAULT NULL,
   `issuedesc` varchar(1000) DEFAULT NULL,
   PRIMARY KEY (`email`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8

Configurer la connexion entre l’instance AEM et la base de données configure-connection-between-aem-instance-and-database

Procédez aux étapes de configuration suivantes pour créer une connexion entre l’instance AEM et la base de données MYSQL :

  1. Accédez à la page de configuration de la console Web AEM à l’adresse http://server:port/system/console/configMgr.

  2. Recherchez Apache Sling Connection Pooled DataSource et cliquez dessus pour l’ouvrir en mode d’édition dans la configuration de la console Web. Spécifiez les valeurs des propriétés comme décrit dans le tableau suivant :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 11-row-2 12-row-2 13-row-2 14-row-2 15-row-2 html-authored
    Propriétés Valeur
    Nom de la source de données Un nom de source de données pour filtrer les pilotes du pool de la source de données.
    Classe de pilote JDBC com.mysql.jdbc.Driver
    URI de connexion JDBC jdbc//[host]:[port]/[schema_name]
    Nom d’utilisateur Nom d’utilisateur pour l’authentification et l’exécution d’actions sur les tables de base de données
    Mot de passe Mot de passe associé au nom d’utilisateur
    Isolation des transactions READ_COMMITTED
    Nombre max. de connexions actives 1 000
    Nombre max. de connexions inactives 100
    Nombre min. de connexions inactives 10
    Taille initiale 10
    Attente max. 100 000
    Test lors de l’emprunt Cochée
    Test en mode inactif Cochée
    Requête de validation Exemples de valeurs : SELECT 1(mysql), select 1 from dual (oracle), SELECT 1 (MS Sql Server) (validationQuery).
    Délai d’expiration des requêtes de validation 10 000

Créer un modèle de données de formulaire create-form-data-model

Après avoir configuré MYSQL comme source de données, exécutez les étapes suivantes pour créer un modèle de données de formulaire :

  1. Dans l’instance d’auteur AEM, accédez à Forms (Formulaires) > Data Integrations (Intégrations de données).

  2. Appuyez sur Create (Créer) > Form Data Model (Modèle de données de formulaire).

  3. Dans l’assistant Create Form Data Model (Créer un modèle de données de formulaire), nommez le modèle de données de formulaire workflow_submit. Appuyez sur Next (Suivant).

  4. Sélectionnez la source de données MYSQL configurée dans la section précédente et appuyez sur Create (Créer).

  5. Appuyez sur Edit (Modifier) et développez la source de données répertoriée dans le volet de gauche pour sélectionner le tableau contactus ainsi que les services get et insert, puis appuyez sur Add Selected (Ajouter la sélection).

    Exemples de données mysql

  6. Sélectionnez l’objet de modèle de données dans le volet de droite et appuyez sur Edit Properties (Modifier les propriétés). Sélectionnez get et insert dans les listes déroulantes Read Service (Service de lecture) et Write Service (Service d’écriture). Spécifiez les arguments du service de lecture et appuyez sur Done (Terminé).

  7. Dans l’onglet Services, sélectionnez le service get et appuyez sur Edit Properties (Modifier les propriétés). Sélectionnez Output Model Object (Objet de modèle de sortie), désactivez le bouton bascule Return array (Revenir au tableau) et appuyez sur Done (Terminé).

  8. Sélectionnez le service Insert (Insérer) et appuyez sur Edit Properties (Modifier les propriétés). Sélectionnez Input Model Object (Objet de modèle d’entrée) et appuyez sur Done (Terminé).

  9. Appuyez sur Save (Enregistrer) pour enregistrer le modèle de données de formulaire.

Pour télécharger l’exemple de modèle de données de formulaire, cliquez sur le lien suivant :

Obtenir le fichier

Générer des formulaires adaptatifs avec la liaison JSON generate-adaptive-forms-with-json-binding

Utilisez le service de conversion automatisée de formulaires pour convertir le formulaire de contact en formulaire adaptatif avec liaison de données. Assurez-vous de ne pas cocher la case Generate adaptive form(s) without data bindings (Générer un ou plusieurs formulaires adaptatifs sans liaison de données) lors de la génération du formulaire adaptatif.

Formulaire adaptatif avec liaison JSON

Sélectionnez le formulaire de contact converti disponible dans le dossier output (sortie), sous Forms & Documents (Formulaires et documents), puis appuyez sur Edit (Modifier). Appuyez sur Preview (Aperçu), saisissez des valeurs dans les champs du formulaire adaptatif et appuyez sur Submit (Envoyer).

Connectez-vous au référentiel crx-repository et accédez à /content/forms/fp/admin/submit/data pour afficher les valeurs envoyées au format JSON. Voici les exemples de données au format JSON lorsque vous envoyez le formulaire adaptatif de contact converti :

{
  "afData": {
    "afUnboundData": {
      "data": {}
    },
    "afBoundData": {
      "data": {
        "name1": "Gloria",
        "email": "abc@xyz.com",
        "phone_number": "2346578965",
        "issue_description": "Test message"
      }
    },
    "afSubmissionInfo": {
      "computedMetaInfo": {},
      "stateOverrides": {},
      "signers": {},
      "afPath": "/content/dam/formsanddocuments/docs_conversion/output/sample_form_json",
      "afSubmissionTime": "20191204014007"
    }
  }
}

Vous devez créer un modèle de processus capable de traiter ces données et les envoyer à la base de données MYSQL à l’aide du modèle de données de formulaire créé dans les sections précédentes.

Créer un modèle de worflow pour traiter les données JSON create-workflow-model

Pour créer un modèle de processus permettant d’envoyer les données du formulaire adaptatif à la base de données, procédez comme suit :

  1. Ouvrez la console Modèles de processus. L’URL par défaut est https://server:port/libs/cq/workflow/admin/console/content/models.html/etc/workflow/models.

  2. Sélectionnez Create (Créer), puis Creat Model (Créer un modèle). La boîte de dialogue Add Workflow Model (Ajouter un modèle de processus) s’ouvre.

  3. Saisissez Title (Titre) et Name (Nom) (facultatif). Par exemple, workflow_json_submit. Appuyez sur Done (Terminé) pour créer le modèle.

  4. Sélectionnez le modèle de processus et appuyez sur Edit (Modifier) pour ouvrir le modèle en mode d’édition. Appuyez sur + et ajoutez l’étape Invoke Form Data Model Service (Invoquer le service de modèle de données de formulaire) au modèle de processus.

  5. Appuyez sur l’étape Invoke Form Data Model Service (Invoquer le service de modèle de données de formulaire), puis sur Configurer .

  6. Dans l’onglet Form Data Model (Modèle de données de formulaire), sélectionnez le modèle de données de formulaire créé dans le champ Form Data Model path (Chemin d’accès de modèle de données de formulaire) et sélectionnez insert (insérer) dans la liste déroulante Service.

  7. Dans l’onglet Input for Service (Entrée pour le service), sélectionnez Provide input data using literal, variable, or a workflow metadata, and a JSON file (Fournir des données d’entrée à l’aide de métadonnées littérales, variables ou de processus et d’un fichier JSON) dans la liste déroulante, cochez la case Map input fields from input JSON (Mapper des champs d’entrée à partir du fichier JSON d’entrée), sélectionnez Relative to payload (Relatif à la charge) et indiquez la valeur data.xml pour le champ Select input JSON document using (Sélectionner le document JSON d’entrée à l’aide de).

  8. Dans la section Service Arguments (Arguments de service), indiquez les valeurs suivantes pour les arguments de modèle de données de formulaire :

    Invoquer service de modèle de données de formulaire

    Notez que les champs du modèle de données de formulaire (par exemple, contactus.name) sont mappés sur afData.afBoundData.data.name1, qui fait référence aux liaisons de schéma JSON pour le formulaire adaptatif envoyé.

Configurer l’envoi du formulaire adaptatif configure-adaptive-form-submission

Pour envoyer le formulaire adaptatif au modèle de processus créé dans la section précédente, procédez comme suit :

  1. Sélectionnez le formulaire de contact converti disponible dans le dossier output (sortie), sous Forms & Documents (Formulaires et documents), puis appuyez sur Edit (Modifier).

  2. Ouvrez les propriétés du formulaire adaptatif en appuyant sur Form Container (Conteneur de formulaires), puis sur Configurer .

  3. Dans la section Submission (Envoi), sélectionnez Invoke an AEM workflow (Invoquer un processus AEM) dans la liste déroulante Submit Action (Action d’envoi), sélectionnez le modèle de processus créé dans la section précédente et spécifiez data.xml dans le champ Data File Path (Chemin d’accès au fichier de données).

  4. Appuyez sur Save (Enregistrer) pour enregistrer les propriétés.

  5. Appuyez sur Preview (Aperçu), saisissez des valeurs dans les champs du formulaire adaptatif et appuyez sur Submit (Envoyer). Les valeurs envoyées s’affichent désormais dans le tableau de la base de données MYSQL au lieu du référentiel crx-repository.

Configurer le formulaire adaptatif pour préremplir les valeurs de la base de données

Pour configurer le formulaire adaptatif afin de préremplir les valeurs de la base de données MYSQL en fonction de la clé principale définie dans le tableau (adresse électronique dans le cas présent), procédez comme suit :

  1. Appuyez sur le champ Email (Adresse électronique) dans le formulaire adaptatif, puis sur Modifier la règle .

  2. Appuyez sur Create (Créer), puis sélectionnez is changed (est modifiée) dans la liste déroulante Select State (Sélectionner un état) dans la section When (Lorsque).

  3. Dans la section Then (Alors), sélectionnez Invoke Service (Invoquer le service) et get (obtenir) comme service pour le modèle de données de formulaire créé dans une section précédente de cet article.

  4. Sélectionnez E-mail (Adresse électronique) dans la section Input (Entrée) et les trois champs restants du modèle de données de formulaire, Name (Nom), Phone Number (Numéro de téléphone) et Issue Description (Description du problème) dans la section Output (Sortie). Pour enregistrer les paramètres, appuyez sur Done (Terminé).

    Configurer les paramètres de préremplissage des adresses électroniques

    Par conséquent, en fonction des entrées d’adresse électronique existantes dans la base de données MYSQL, vous pouvez préremplir les valeurs des trois champs restants dans le mode Preview (Aperçu) du formulaire adaptatif. Par exemple, si vous indiquez aya.tan@xyz.com dans le champ et l’onglet E-mail (Adresse électronique) (selon les données existantes de la section Préparer le modèle de données de formulaire de cet article), les trois champs restants Name (Nom), Phone Number (Numéro de téléphone) et Issue Description (Description du problème) s’affichent automatiquement dans le formulaire adaptatif.

Pour télécharger l’exemple de formulaire adaptatif converti, cliquez sur le lien suivant :

Obtenir le fichier

recommendation-more-help
c40c2ccf-3d1b-4b47-b158-c4646051b46c