Vous consultez actuellement l'aide de la version:

Conditions préalables

Installez les sites de référence comme décrit dans Installation et configuration des sites de référence d’AEM Forms.

Cas de figure du site de référence We.Finance

We.Finance est une organisation de premier plan dans le domaine des services financiers qui offre des solutions financières complètes et personnalisées pour répondre aux exigences de différents profils clients. Elle propose des cartes de crédit, des prêts immobiliers et des services d’assurance habitation.

Son objectif est de communiquer avec ses clients existants et d’autres clients potentiels sur leur périphérique préféré, de leur présenter les avantages des services et de les aider à y adhérer. En outre, elle cherche à lancer davantage de produits financiers tels que les cartes ajoutées que les clients peuvent trouver intéressants.

Poursuivez la lecture de cet article pour obtenir des informations détaillées sur les cas d’utilisation de We.Finance et comprendre comment AEM Forms aide les organisations financières à atteindre leurs objectifs.

Présentation de la demande de carte de crédit

Ce cas de figure de demande de carte de crédit We.Finance met en scène les personnages suivants :

  • Sarah Rose, une cliente de We.Finance
  • Gloria Rios, responsable du département consacré aux cartes de crédit et aux prêts chez We.Finance

L’infographie suivante illustre le déroulement détaillé de la demande de carte de crédit.

workflow_aem-cc

Examinons le cas du site de référence pour comprendre comment AEM Forms aide We.Finance à atteindre ses objectifs.

Sarah reçoit une newsletter de We.Finance et demande une carte de crédit

Sarah Rose est déjà cliente de We.Finance. Elle reçoit une newsletter de We.Finance à propos d’une offre sur une nouvelle carte de crédit. Elle trouve l’offre intéressante et décide de demander une carte de crédit. Elle clique sur le bouton Demander maintenant dans la newsletter qui la redirige vers la demande de carte de crédit sur le portail We.Finance. 

marketing-email

Fonctionnement

La newsletter envoyée à Sarah est une implémentation personnalisée qui déclenche l’envoi d’un courrier électronique à l’ID d’adresse électronique spécifié. Le bouton Demander maintenant dans le courrier électronique est lié à la demande de carte de crédit qui est un formulaire adaptatif sur une instance de publication. 

Démonstration

Ouvrez l’URL suivante pour déclencher l’envoi d’un courrier électronique de newsletter. Assurez-vous de remplacer [emailID] par un compte de messagerie valide pour recevoir la newsletter. Ouvrez la newsletter et cliquez sur Demander maintenant pour accéder à la demande de carte de crédit.

http://[authorServer]:[authorPort]/content/campaigns/we-finance/start.html?app=cc&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah trouve l’offre intéressante et choisit d’effectuer une demande

Sarah décide de demander la carte de crédit et appuie sur le bouton Demander maintenant sur le courrier électronique. Il redirige Sarah vers la demande de carte de crédit sur le portail We.Finance. Le formulaire de demande est organisé en différentes sections au moyen d’une mise en page de carte.

Sarah sélectionne une carte de crédit parmi les options disponibles et clique sur Continuer.

cc-application-form-desktop

Sur la page Informations personnelles, Sarah fournit son numéro de sécurité sociale. Une invite s’affiche pour se connecter avec ses informations d’identification.

login-ssn

Sarah est déjà cliente de We.Finance. Elle se connecte avec ses identifiants de compte We.Finance et ses données personnelles sont automatiquement renseignées dans le formulaire. Sarah continue de remplir le formulaire de demande. Un rappel apparaît pour une réunion à laquelle elle doit participer. Elle clique sur Enregistrer ma progression sur le formulaire de demande. Toutes les informations que Sarah a remplies jusqu’à présent sont enregistrées et une boîte de dialogue apparaît pour confirmer si elle souhaite recevoir un courrier électronique avec un lien vers son brouillon afin de le terminer plus tard.

Sarah clique sur Envoyer un courrier. Elle reçoit un courrier électronique avec un lien pour reprendre sa demande de carte de crédit.

resume

Si Sarah accède à la demande de carte de crédit à partir de son appareil mobile, la demande réactive s’ouvre dans une vue optimisée pour les appareils mobiles. Dans cette vue, le formulaire de demande affiche une section à la fois. Cela permet à Sarah d’afficher et de fournir des informations progressivement au fur et à mesure de son avancée dans la demande.

Remplir la demande de carte de crédit sur un périphérique mobile

Fonctionnement

Le bouton Demander maintenant redirige Sarah vers la demande de carte de crédit. La demande est un formulaire adaptatif que vous pouvez consulter dans les instances de création à l’adresse http://[host]:[Port]/editor.html/content/forms/af/we-finance/cc-app.html.

Voici quelques fonctionnalités clés que vous pouvez consulter dans le formulaire adaptatif :

  • Il est basé sur un schéma XSD.
  • Il a été créé avec le thème A We.Finance pour le style et le modèle We.Finance pour la mise en page. En outre, il utilise une mise en page sans titre de panneau dans la mise en forme de l’en-tête de formulaire pour la navigation mobile. Il présente une mise en page mobile progressive lorsqu’il est ouvert depuis un appareil mobile. Vous pouvez consulter le modèle à l’adresse http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance et le thème à l’adresse http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-a/jcr:content.
  • Il inclut des règles de formulaire adaptatif pour appeler les services de modèle de données de formulaire afin de préremplir les détails de l’utilisateur connecté. Il appelle également les services pour préremplir les informations selon le numéro de sécurité sociale ou l’adresse électronique fournie dans le formulaire. Vous pouvez consulter les modèles de données de formulaire et leurs services à l’adresse http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • Il utilise divers composants de formulaire adaptatif pour collecter les entrées et s’adapter aux réponses des utilisateurs. Il emploie également des composants tels que Courrier électronique qui prennent en charge les types d’entrée HTML5.
  • Il utilise le composant Étape de signature pour afficher le formulaire rempli et permet la signature électronique dans le formulaire.
  • Le bouton Enregistrer ma progression génère un identifiant unique de l’utilisateur et enregistre la demande partiellement remplie en tant que brouillon dans un nœud du référentiel AEM. En outre, il affiche une autorisation de recherche de boîte de dialogue pour envoyer un courrier électronique contenant un lien vers le nœud contenant le brouillon de la demande. Le bouton Envoyer un courrier dans la boîte de dialogue de confirmation déclenche un courrier électronique contenant un lien vers le nœud qui contient le brouillon.
  • Il utilise l’action d’envoi Appeler le processus AEM pour déclencher le processus d’approbation de carte de crédit. Vous pouvez consulter le processus utilisé dans ce formulaire à l’adresse http://[host]:[Port]/cf#/etc/workflow/models/we-finance-credit-card-workflow.html.

Il est recommandé de consulter le formulaire pour comprendre le schéma, les composants, les règles, les modèles de données de formulaire, le processus des formulaires et l’action d’envoi utilisée pour générer le formulaire.

Consultez également la documentation suivante pour plus d’informations sur les fonctionnalités utilisées dans le formulaire adaptatif de demande de carte de crédit :

Démonstration

Lorsque vous êtes connecté en tant que Sarah Rose, cliquez sur le bouton Demander maintenant sur la demande de carte de crédit. Renseignez quelques champs, explorez divers composants du formulaire adaptatif, puis cliquez sur Enregistrer ma progression pour recevoir un courrier électronique avec un bouton Reprendre qui pointe vers le brouillon de la demande. Assurez-vous de spécifier votre ID d’adresse électronique dans le formulaire de demande pour recevoir le courrier électronique.

Consultez le thème We.Finance disponible à l’adresse :

http://<host>:<AuthorPort>/editor.html/content/dam/formsanddocuments-themes/we-Finance/we-Finance-Theme-A/jcr:content

Vous pouvez consulter le modèle We.Finance à l’adresse :

http://<host>:<AuthorPort>/editor.html/conf/we-finance/settings/wcm/templates/we-finance-template/structure.html

Sarah reprend et envoie la demande

Sarah revient plus tard et trouve un courrier électronique de la part de We.Finance. Elle clique sur le bouton Reprendre dans le courrier électronique qui la redirige vers le brouillon de sa demande de carte de crédit. Les informations qu’elle a renseignées plus tôt sont préremplies. Elle remplit la suite du formulaire de demande, signe la demande et l’envoie.

resume

Elle peut également accéder au brouillon de sa demande sous Mes formulaires sur la page d’accueil de We.Finance.

portal-drafts

Fonctionnement

Le bouton Reprendre dans le courrier électronique redirige Sarah vers le nœud contenant le brouillon de sa demande.

Démonstration

Vous devez avoir reçu un courrier électronique avec un lien vers le brouillon de la demande sur votre ID d’adresse électronique que vous avez spécifié lors du remplissage du formulaire de demande. Allez-y, renseignez les sections restantes dans la demande et envoyez-la.

We.Finance reçoit et approuve la demande

We.Finance reçoit la demande de carte de crédit envoyée par Sarah. Une tâche est assignée à Gloria Rios. Elle examine la tâche dans sa boîte de réception AEM et l’approuve.

inbox

Fonctionnement

Lorsque Sarah remplit et envoie la demande de carte de crédit, un processus de formulaire se déclenche et une tâche est créée dans la boîte de réception AEM de Gloria.

AEM Forms sur OSGi fournit des processus centrés sur des formulaires qui vous permettent de générer des processus basés sur des formulaires adaptatifs. Ces processus peuvent être utilisés pour la révision et l’approbation, les flux de processus d’entreprise, le démarrage de Documents Services, l’intégration du processus de signature Adobe Sign, etc. Pour plus d’informations, voir Processus basé sur l’utilisation de Forms sur OSGi.

L’image suivante illustre le processus AEM qui traite la demande de carte de crédit et génère une sortie PDF à partir de la demande.

forms-workflow

Démonstration

Vous pouvez accéder à la boîte de réception AEM à l’adresse http://<hostname>:<AuthorPort>/aem/inbox. Connectez-vous à la boîte de réception AEM à l’aide des nom d’utilisateur/mot de passe grios/password pour Gloria Rios et approuvez la demande de carte de crédit. Pour plus d’informations sur l’utilisation de la boîte de réception AEM pour les tâches de processus basés sur les formulaires, voir Gestion des applications et des tâches Forms dans la boîte de réception AEM.

inbox

Lorsque vous approuvez la demande, Sarah reçoit un courrier électronique avec le kit de bienvenue. 

Sarah reçoit le kit de bienvenue et demande une carte ajoutée

Lorsque la demande de carte de crédit de Sarah est approuvée, elle reçoit un courrier électronique contenant un lien vers le kit de bienvenue. Elle ouvre le kit de bienvenue, qui inclut les détails du compte de sa carte de crédit. Le kit de bienvenue comprend également une fenêtre de carrousel qui affiche des offres promotionnelles personnalisées pour Sarah. Lorsqu’elle parcourt la page, elle découvre que le kit de bienvenue contient un formulaire incorporé de demande de carte ajoutée.  Sarah remplit rapidement les détails requis du kit de bienvenue et demande la carte ajoutée. Une boîte de dialogue de confirmation pour la demande de carte ajoutée s’affiche.

welcome-kit

Le kit de bienvenue est personnalisé pour Sarah et affiche des informations la concernant. Il fournit une option pour télécharger une version PDF du kit de bienvenue. Le bouton fléché au bas de l’écran permet à Sarah de faire défiler la page vers le bas et de parcourir d’autres sections du kit de bienvenue.

benefits

Le kit de bienvenue comprend un autre formulaire de demande que Sarah peut remplir et envoyer pour demander une carte ajoutée depuis le kit de bienvenue, sans avoir à accéder au portail de We.Finance.

addon-card

Fonctionnement

Le kit de bienvenue est un document adaptatif inclus dans le package cq-we-finance-content-pkg.zip. Les offres promotionnelles dans le kit de bienvenue sont fournies par le serveur d’Adobe Target. Les offres sont personnalisées et ciblées pour des segments de clientèle spécifiques. Le kit de bienvenue récupère les offres à partir d’un serveur Adobe Target préconfiguré pour un segment d’audience constitué de clientes - femmes - de carte Platine.

Les cartes interactives dans la version pour ordinateur, qui présentent les avantages de la carte de crédit dans le kit de bienvenue, sont une disposition personnalisée créée à l’aide de la carte de mise en page par défaut d’un fragment de document.

La demande de carte ajoutée est un formulaire adaptatif inclus dans le document adaptatif du kit de bienvenue.

Démonstration

Cliquez sur le bouton Reprendre dans le courrier électronique que vous avez reçu à l’étape précédente. Il ouvre le brouillon de la demande. Renseignez toutes les informations et envoyez la demande. Vous recevrez ensuite un kit de bienvenue. Examinez le kit de bienvenue.

Vous pouvez également voir le kit de bienvenue à l’adresse suivante :

http:// <host>:<port>/content/forms/af/we-finance/credit-card-welcome-kit.html?wcmmode=disabled

Vous pouvez y accéder dans les instances d’auteur et de publication. 

Sarah reçoit un relevé de carte de crédit

Comme Sarah commence à utiliser la carte de crédit, elle reçoit ensuite un autre courrier électronique de We.Finance comprenant son relevé de carte de crédit. Les illustrations suivantes montrent le courrier électronique contenant un lien vers un relevé de carte de crédit sur un appareil mobile.

statement-email

Sarah clique sur Afficher le relevé dans le courrier électronique pour afficher le relevé de carte de crédit. Le relevé interactif est constitué de plusieurs éléments :

  • Récapitulatif du relevé
  • Rapport détaillé des dépenses
  • Analyse graphique des dépenses
  • Option pour effectuer un paiement pour le montant dû indiqué par le relevé
  • Téléchargement du reçu de paiement
Différentes parties du relevé de carte de crédit

Sarah n’a pas besoin d’accéder au portail ni d’effectuer une recherche dans son courrier électronique pour afficher son dernier relevé de carte de crédit. Elle a juste à cliquer sur le bouton Afficher mon dernier relevé depuis un relevé quelconque pour ouvrir son dernier relevé.

Le relevé détaillé est présenté dans un tableau dynamique et offre la possibilité de payer une partie ou le montant dû complet indiqué dans le relevé.

Relevé détaillé

Sarah effectue le paiement dû depuis la page du relevé et dispose d’une option pour télécharger immédiatement le reçu de paiement. Toutefois, le bouton de téléchargement de reçu ne vous permet pas de charger le reçu du paiement. Le bouton de téléchargement de reçu est fourni à des fins de démonstration. Vous pouvez ajouter du code pour activer la fonctionnalité de téléchargement d’un reçu à l’aide de ce bouton. 

Fonctionnement

Le relevé de carte de crédit est un document adaptatif. Le tableau détaillé des dépenses dans le relevé est un tableau dynamique. Le graphique de l’analyse des dépenses est un composant personnalisé de graphique qui lit le tableau des dépenses et génère un graphique circulaire.

Démonstration

Vous pouvez tester le relevé de carte de crédit interactif à l’adresse URL suivante :

http://<hostname>:<port>/content/forms/af/we-finance/account-statement.html?wcmmode=disabled

Vous pouvez y accéder dans les instances d’auteur et de publication. 

We.Finance analyse les performances du formulaire de demande de carte de crédit

We.Finance, de temps à autre, examine les performances de son formulaire de demande de carte de crédit pour vérifier tous les problèmes que les clients peuvent rencontrer. Cette analyse lui permet de prendre les meilleures décisions concernant les modifications requises par la demande de carte de crédit afin d’améliorer l’expérience utilisateur, de réduire les taux d’abandon de formulaire et par conséquent, d’augmenter la conversion. Le site tire profit de l’intégration d’Adobe Analytics à AEM Forms pour son analyse. L’illustration suivante représente le tableau de bord des analyses.

Pour plus d’informations sur la façon d’interpréter le tableau de bord des analyses, reportez-vous à la section Affichage et compréhension des rapports d’analyse AEM Forms.

cc-analytics

Fonctionnement

Les mesures de performances du formulaire de demande de carte de crédit font l’objet d’un suivi à l’aide d’Adobe Analytics. Pour plus d’informations sur la configuration d’Adobe Analytics et l’affichage des rapports, voir Configuration des analyses de formulaires et documents.

Démonstration

Pour que vous puissiez afficher et explorer le rapport d’analyse, nous fournissons des données sources pour la demande de carte de crédit sur le site de référence. Avant d’utiliser des données source, voir Configuration d’Analytics. Effectuez les étapes suivantes dans l’instance d’auteur pour afficher le rapport avec les données source :

  1. Accédez à l’interface utilisateur Formulaires et documents à l’adresse http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier We.Finance.
  3. Cliquez sur l’outil Sélectionner dans la barre d’outils, puis sélectionnez le formulaire adaptatif Demande de carte de crédit.
  4. Cliquez sur Plus dans la barre d’outils, puis cliquez sur Rapport d’analyse pour générer le rapport d’analyse avec des données sources.

Pour accéder aux données source pour le rapport d’analyse :

  1. Dans le navigateur d’adresse de CRXDE lite, saisissez : /apps/we-finance/demo-artifacts/analyticsTestData/Credit card Analytics Test Data
  2. Les données de test sont sélectionnées dans la structure de répertoires de gauche. 
  3. Cliquez deux fois sur le fichier sélectionné pour ouvrir son contenu dans le panneau de droite. 
  4. Copiez tout le contenu du fichier de données de test. 
  5. Dans CRXDE, accédez à : /content/dam/formsanddocuments/we-finance/cc-app/jcr:content/analyticsdatanode/lastsevendays
  6. Dans le champ analyticsdata sous Propriétés, collez le contenu copié du fichier de données de test. 

Test A/B de la demande de carte de crédit

En plus d’analyser les performances de la demande de carte de crédit et de l’améliorer constamment, We.Finance tire parti de l’intégration d’AEM Forms à Target pour créer des tests A/B. Cela lui permet de proposer des expériences différentes du formulaire de demande de carte de crédit et d’identifier l’expérience qui entraîne un meilleur taux de conversion en termes de remplissage et d’envoi du formulaire.

Pour configurer Target dans le serveur AEM Forms, voir Configuration et intégration de Target dans AEM Forms.

Effectuez les étapes suivantes pour expérimenter la création d’un test A/B pour le formulaire de demande de carte de crédit de We.Finance :

  1. Accédez à Formulaires et documents à l’adresse http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier We.Finance.
  3. Cliquez sur l’outil Sélectionner dans la barre d’outils.
  4. Sélectionnez le formulaire adaptatif Demande de carte de crédit.
  5. Cliquez sur le bouton Plus dans la barre d’outils et sélectionnez Configurer les tests A/B. La page de configuration des tests A/B s’ouvre.
  6. Spécifiez un Nom d’activité.
  7. Dans la liste déroulante Public, sélectionnez un public auquel vous souhaitez proposer différentes expériences du formulaire. Par exemple, les visiteurs utilisant Chrome.
  8. Dans les champs Distribution d’expérience pour les expériences A et B, spécifiez la répartition, sous forme de pourcentage, pour déterminer la répartition des expériences dans le public total. Par exemple, si vous spécifiez 40 et 60 pour les expériences A et B, respectivement, l’expérience A sera transmise à 40 % du public et les 60 % restant verront s’afficher l’expérience B.
  9. Cliquez sur Configurer. Une boîte de dialogue s’affiche pour confirmer la création du test A/B.
  10. Cliquez sur Terminer.
  11. Sélectionnez le formulaire Demande de carte de crédit et cliquez sur Ouvrir. Vous obtenez une option pour ouvrir l’une des expériences. Cliquez sur Expérience B. Le formulaire s’ouvre en mode de modification.
  12. Modifier le formulaire comme vous le souhaitez afin de créer une expérience différente de l’expérience A par défaut.
  13. Accédez à l’interface utilisateur Formulaires et documents, sélectionnez le formulaire puis cliquez sur Plus, enfin sélectionnez Démarrer le test A/B.
  14. Ouvrez maintenant le formulaire dans le navigateur Chrome plusieurs fois de suite en utilisant l’URL suivante :
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/cc-app/jcr:content?wcmmode=disabled
    Remarque :
    supprimez le cookie nommé mbox de la liste de persistance des cookies dans le navigateur avant d’ouvrir le formulaire la fois suivante.
    Vous voyez l’expérience A et B du formulaire de manière aléatoire.
  15. Sélectionnez le formulaire, cliquez sur Plus, et cliquez sur Rapport de test A/B. Vous ne trouverez pas beaucoup de données dans le rapport car vous venez de démarrage du test. Ajoutons maintenant quelques données sources pour voir à quoi ressemble le rapport de test A/B.
  16. Ouvrez CRXDE Lite et prenez une copie du fichier suivant : /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. Remplacez le contenu du fichier mentionné ci-dessus par le contenu du fichier suivant : /apps/we-finance/demo-artifacts/targetreport.js
    Remarque :
    ces modifications sont uniquement à titre de démonstration. Assurez-vous de restaurer le contenu du fichier après avoir terminé cette procédure.
  18. Actualisez le rapport que vous avez généré et vous verrez quelque chose qui ressemble à ça : Examinez le tableau de bord de génération de rapports.
ab-test-report

Pour mettre fin au test A/B, cliquez sur le bouton Terminer le test A/B du tableau de bord de génération de rapports. A ce stade, une boîte de dialogue vous invite à déclarer une expérience. Sélectionnez l’expérience la plus probante et confirmez la fin du test A/B.

Si vous choisissez l’expérience A comme la plus probante, le test A/B se termine et, à partir de ce moment, seule l’expérience A sera proposée à tous les publics, y compris ceux utilisant Chrome.

Présentation de la demande de prêt immobilier

Le cas de figure du prêt immobilier We.Finance met en scène les personnages suivants :

  • Sarah Rose, une cliente de We.Finance
  • Gloria Rios, responsable du département consacré aux cartes de crédit et aux prêts chez We.Finance
  • John Doe, représentant du service client chez We.Finance

L’infographie suivante illustre le déroulement détaillé d’une demande de prêt immobilier.

Infographie de demande de prêt immobilier

À présent, étudions en détail les étapes du cas de figure du site de référence pour voir comment AEM Forms aide We.Finance à atteindre ses objectifs.

Sarah se rend sur le site Web de We.Finance et demande un prêt immobilier

Sarah Rose envisage d’acheter une maison et cherche donc un prêt immobilier. Elle est cliente chez We.Finance et se rend donc sur le portail We.Finance pour découvrir les offres de prêt. Elle accède à la section des prêts et trouve un calculateur dédié sur le portail. Elle remplit les détails et clique sur Calculer mon prêt, qui renvoie une offre de prêt.

loans1
loans2
Calculateur de prêt

loans3
Résultat du calculateur de prêt


Fonctionnement

Le calculateur de prêt sur la page Prêts est un formulaire adaptatif intégré dans une page de sites AEM. Vous pouvez consulter la page Prêts en mode Édition à l’adresse http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html.

Le calculateur de prêt intégré, qui est un formulaire adaptatif, utilise des règles pour calculer le montant des mensualités en fonction des détails du prêt fournis dans les champs du calculateur. Vous pouvez consulter le formulaire adaptatif à l’adresse http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/hm-calc.html.

Démonstration

Accédez au portail We.Finance à l’adresse http://<publishHost>:<publishPort>/content/we-finance/global/en.html et cliquez sur Prêts. Fournissez des détails dans le calculateur de prêt et regardez les résultats.

Sarah trouve l’offre intéressante et choisit d’effectuer une demande

Sarah choisit de demander un prêt immobilier et clique sur Demander maintenant sur les résultats du calculateur de prêt. Il ouvre la demande de prêt immobilier.

Si Sarah accède à la demande de prêt immobilier à partir de son appareil mobile, le formulaire de demande s’ouvre dans une vue optimisée pour l’affichage sur appareils mobiles. Dans cette vue, le formulaire de demande affiche une section à la fois. Cela permet à Sarah d’afficher et de fournir des informations progressivement au fur et à mesure de son avancée dans le formulaire de la demande.

Les illustrations suivantes présentent le processus qui se produit lorsque Sarah parcourt la demande de prêt immobilier sur son appareil mobile.

Remplir la demande de prêt immobilier sur un périphérique mobile

Si Sarah clique sur Demander maintenant à partir de son ordinateur, le formulaire de demande de prêt immobilier s’ouvre comme suit. Les informations que Sarah a fournies dans le calculateur de prêt sont préremplies dans le formulaire de demande. Sarah remplit les détails restants et clique sur Continuer.

mortgage-application

En fonction des informations que Sarah a remplies dans le calculateur de prêt, quelques offres lui sont présentées. Elle choisit le plan qui convient à ses besoins et continue de remplir la demande. Elle signe, puis envoie la demande.

La demande envoyée est transmise à We.Finance pour approbation.

Enregistrer un brouillon de demande

Fonctionnement

Le bouton Demander maintenant redirige Sarah vers la demande de prêt immobilier. La demande est un formulaire adaptatif que vous pouvez consulter dans les instances de création à l’adresse http://[host]:[Port]/editor.html/content/forms/af/we-finance/hm-app.html.

Voici quelques fonctionnalités clés que vous pouvez consulter dans le formulaire adaptatif :

  • Il est basé sur un schéma XSD, homeMortgageApplication.xsd.
  • Il a été créé avec le thème B We.Finance pour le style et le modèle We.Finance pour la mise en page. En outre, il utilise une mise en page sans titre de panneau dans la mise en forme de l’en-tête de formulaire pour la navigation mobile. Il présente une mise en page mobile progressive lorsqu’il est ouvert depuis un appareil mobile. Vous pouvez consulter le modèle et le thème utilisés dans le formulaire adaptatif aux emplacements suivants sur votre instance d’auteur AEM :
    • http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
    • http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content
  • Le premier onglet Mise en route de l’application est un calculateur de prêt dynamique qui affiche les options en fonction de la sélection de l’utilisateur. Par exemple, les champs et les valeurs sont différents pour les options Achat et Refinancement. Cette fonctionnalité est réalisée en utilisant des règles afficher-masquer. En outre, lorsque vous cliquez sur Continuer et que l’onglet Plans est initialisé, il appelle un service Web configuré dans un modèle de données de formulaire pour récupérer et afficher les plans de prêt. Vous pouvez consulter les modèles de données de formulaire et les services configurés à l’adresse http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • Il utilise divers composants de formulaire adaptatif pour collecter les entrées et s’adapter aux réponses des utilisateurs. Il emploie également des composants tels que Courrier électronique qui prennent en charge les types d’entrée HTML5.
  • Il utilise le composant Étape de signature pour afficher le formulaire rempli et permet la signature électronique dans le formulaire.
  • Il emploie l’action d’envoi Appeler le processus AEM pour déclencher le processus AEM de prêt immobilier We.Finance. Vous pouvez consulter le processus utilisé dans ce formulaire à l’adresse http://[host]:[Port]/cf#/etc/workflow/models/we-finance-home-mortgage-workflow.html.

Il est recommandé de consulter le formulaire pour comprendre le schéma, les composants, les règles, les modèles de données de formulaire, le processus des formulaires et l’action d’envoi utilisée pour générer le formulaire.

Consultez également la documentation suivante pour plus d’informations sur les fonctionnalités utilisées dans le formulaire adaptatif de demande de prêt immobilier :

Démonstration

Accédez à http://[server]:[port]/content/we-finance/global/en/all-forms.html et cliquez sur le bouton Demander maintenant sur la demande de prêt immobilier. Remplissez les détails dans l’onglet Mise en route, essayez différentes options et envoyez la demande.

Assurez-vous de spécifier un ID de courrier électronique valide dans la demande pour recevoir un accusé de réception dans votre boîte de réception.

We.Finance reçoit la demande

We.Finance reçoit la demande de prêt immobilier envoyée par Sarah. La tâche d’approbation ou de rejet de la demande est confiée à Gloria Rios. Elle examine la demande et constate qu’il manque une copie de la carte d’identité de Sarah.

grios-inbox

Gloria ouvre la tâche, clique sur le bouton Besoin de plus d’informations et saisit un commentaire sur la copie manquante.

need-more-info

La tâche est désormais confiée à John Doe, un représentant du service client chez We.Finance. Il ouvre la tâche et lit le commentaire de Gloria. Il contacte Sarah et lui demande d’envoyer une copie de sa carte d’identité. Après avoir reçu une copie de la carte d’identité de Sarah, il la joint à la tâche et envoie la demande pour réévaluation.

reevaluation

La tâche est réassignée à Gloria. Elle examine la copie de la carte d’identité jointe et approuve la demande. 

Fonctionnement

Lorsque Sarah remplit et envoie la demande de prêt, un processus de formulaire se déclenche et une tâche est créée dans la boîte de réception AEM de Gloria. Lorsque Gloria examine la demande et demande des informations supplémentaires, la tâche est assignée à John Doe. Lorsque John Doe joint la copie de la carte d’identité et envoie à nouveau la demande, elle est assignée à Gloria. Ce cas de figure est défini dans le processus AEM associé à la demande de prêt immobilier.

AEM Forms sur OSGi fournit des processus centrés sur des formulaires qui vous permettent de générer des processus basés sur des formulaires adaptatifs. Ces processus peuvent être utilisés pour la révision et l’approbation, les flux de processus d’entreprise, le démarrage de Documents Services, l’intégration du processus de signature Adobe Sign, etc. Pour plus d’informations, voir Processus basé sur l’utilisation de Forms sur OSGi.

L’image suivante illustre le processus AEM associé à la demande de prêt immobilier.

mortgage-workflow

Démonstration

Vous pouvez accéder à la boîte de réception AEM à l’adresse http://<hostname>:<AuthorPort>/aem/inbox. Connectez-vous à la boîte de réception AEM à l’aide des nom d’utilisateur/mot de passe grios/password pour Gloria Rios et jdoe/jdoe pour John Doe, et explorez le processus de demande de prêt immobilier.

Pour plus d’informations sur l’utilisation de la boîte de réception AEM pour les tâches de processus basés sur les formulaires, voir Gestion des applications et des tâches Forms dans la boîte de réception AEM.

Sarah reçoit le kit de bienvenue

Lorsque la demande de prêt immobilier de Sarah est approuvée, elle reçoit un courrier électronique contenant un lien vers le kit de bienvenue. Elle ouvre le kit de bienvenue, qui comprend un carrousel affichant des offres promotionnelles personnalisées pour Sarah.  

mortgage-welcome-kit

Le kit de bienvenue est personnalisé pour Sarah et affiche des informations la concernant. Il fournit une option pour télécharger une version PDF du kit de bienvenue. Le bouton fléché au bas de l’écran permet à Sarah de faire défiler la page vers le bas et de parcourir d’autres sections du kit de bienvenue.

Fonctionnement

Le kit de bienvenue est un document adaptatif inclus dans le package cq-we-finance-content-pkg.zip. Les offres promotionnelles dans le kit de bienvenue sont fournies par le serveur d’Adobe Target. Les offres sont personnalisées et ciblées pour des segments de clientèle spécifiques. Le kit de bienvenue récupère les offres à partir d’un serveur Adobe Target préconfiguré pour un segment d’audience constitué de clientes - femmes.

Les cartes interactives dans la version pour ordinateur du kit de bienvenue utilisent une disposition personnalisée créée à l’aide de la mise en page de la carte par défaut d’un fragment de document.

Démonstration

Si vous avez fourni votre ID d’adresse électronique lorsque vous avez rempli la demande de prêt immobilier, vous devriez avoir reçu un courrier électronique contenant un lien vers le kit de bienvenue. Vérifiez votre boîte de réception et examinez le kit de bienvenue.

Vous pouvez l’afficher dans l’instance de publication AEM à l’adresse suivante :

http://[host]:[port]/content/forms/af/we-finance/mortgage-loan-welcome-kit.html

Sarah reçoit un relevé de compte

Lorsque Sarah se sert du prêt et commence à effectuer des versements, elle reçoit un autre courrier électronique de We.Finance comprenant son relevé de compte mensuel. 

mortgage-statement-email

Sarah clique sur Afficher le relevé dans le courrier électronique pour afficher le relevé de compte du prêt immobilier. Le relevé interactif est constitué de plusieurs éléments :

  • Récapitulatif du relevé
  • Détails du relevé

L’illustration suivante montre une partie différente du relevé de compte sur ordinateur.  

Relevé de compte de prêt immobilier

Le relevé détaillé est présenté dans un tableau dynamique et offre la possibilité de payer une partie ou le montant dû complet indiqué dans le relevé.

Fonctionnement

Le relevé de prêt immobilier est un document adaptatif. Il est généré avec le processus de traitement par lots JSON. Le tableau détaillé des dépenses dans le relevé est un tableau dynamique. 

Démonstration

Vous pouvez consulter le relevé de compte de prêt immobilier interactif à l’adresse URL suivante :

http://<hostname>:<port>/content/forms/af/we-finance/mortgage-account-statement.html?wcmmode=disabled

Vous pouvez y accéder dans les instances d’auteur et de publication. 

We.Finance analyse les performances de la demande de prêt immobilier

We.Finance, de temps à autre, examine les performances de son formulaire de demande de prêt immobilier pour vérifier tous les problèmes que les clients peuvent rencontrer. Cette analyse lui permet de prendre les meilleures décisions concernant les modifications requises par la demande de prêt immobilier afin d’améliorer l’expérience utilisateur, de réduire les taux d’abandon de formulaire et par conséquent, d’augmenter la conversion. Le site tire profit de l’intégration d’Adobe Analytics à AEM Forms pour son analyse. L’illustration suivante représente le tableau de bord des analyses.

Pour plus d’informations sur la façon d’interpréter le tableau de bord des analyses, reportez-vous à la section Affichage et compréhension des rapports d’analyse AEM Forms.

mortgage-analytics

Fonctionnement

Les mesures de performances du formulaire de demande de prêt immobilier font l’objet d’un suivi à l’aide d’Adobe Analytics. Pour plus d’informations sur la configuration d’Adobe Analytics et l’affichage des rapports, voir Configuration des analyses de formulaires et documents.

Démonstration

Pour que vous puissiez afficher et explorer le rapport d’analyse, nous fournissons des données sources pour la demande de prêt immobilier sur le site de référence. Avant d’utiliser des données source, voir Configuration d’Analytics.  Effectuez les étapes suivantes dans l’instance de rédaction pour afficher le rapport avec les données source :

  1. Accédez à l’interface utilisateur Formulaires et documents à l’adresse http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier we-finance.
  3. Sélectionnez le formulaire adaptatif Formulaire de demande de prêt immobilier.
  4. Cliquez sur Plus dans la barre d’outils, puis cliquez sur Rapport d’analyse pour générer le rapport d’analyse avec des données sources.

Pour accéder aux données source pour le rapport d’analyse :

  1. Dans le navigateur d’adresse de CRXDE lite, saisissez : /apps/we-finance/demo-artifacts/analyticsTestData/Home Mortgage Analytics Test Data
  2. Les données de test sont sélectionnées dans la structure de répertoires de gauche. 
  3. Cliquez deux fois sur le fichier sélectionné pour ouvrir son contenu dans le panneau de droite. 
  4. Copiez tout le contenu du fichier de données de test. 
  5. Dans CRXDE, accédez à : /content/dam/formsanddocuments/we-finance/hm-app/jcr:content/analyticsdatanode/lastsevendays
  6. Dans le champ analyticsdata sous Propriétés, collez le contenu copié du fichier de données de test. 

Test A/B de la demande de prêt immobilier

En plus d’analyser les performances de la demande de prêt immobilier et de l’améliorer constamment, We.Finance tire parti de l’intégration d’AEM Forms à Target pour créer des tests A/B. Cela lui permet de proposer des expériences différentes du formulaire de demande de prêt immobilier et d’identifier l’expérience qui entraîne un meilleur taux de conversion en termes de remplissage et d’envoi du formulaire.

Pour configurer Target dans le serveur AEM Forms, voir Configuration et intégration de Target dans AEM Forms.

Effectuez les étapes suivantes dans l’instance d’auteur pour expérimenter la création d’un test A/B pour le formulaire de demande de prêt immobilier de We.Finance :

  1. Accédez à Formulaires et documents à l’adresse http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Cliquez pour ouvrir le dossier we-finance.
  3. Cliquez sur l’outil Sélectionner dans la barre d’outils.
  4. Sélectionnez le formulaire adaptatif Formulaire de demande de prêt immobilier.
  5. Cliquez sur le bouton Plus dans la barre d’outils et sélectionnez Configurer les tests A/B. La page de configuration des tests A/B s’ouvre.
  6. Spécifiez un Nom d’activité.
  7. Dans la liste déroulante Public, sélectionnez un public auquel vous souhaitez proposer différentes expériences du formulaire. Par exemple, les visiteurs utilisant Chrome.
  8. Dans les champs Distribution d’expérience pour les expériences A et B, spécifiez la répartition, sous forme de pourcentage, pour déterminer la répartition des expériences dans le public total. Par exemple, si vous spécifiez 40 et 60 pour les expériences A et B, respectivement, l’expérience A sera transmise à 40 % du public et les 60 % restant verront s’afficher l’expérience B.
  9. Cliquez sur Configurer. Une boîte de dialogue s’affiche pour confirmer la création du test A/B.
  10. Cliquez sur Terminer.
  11. Sélectionnez le formulaire Demande de prêt immobilier et cliquez sur Ouvrir. Vous obtenez une option pour ouvrir l’une des expériences. Cliquez sur Expérience B. Le formulaire s’ouvre en mode de modification.
  12. Modifier le formulaire comme vous le souhaitez afin de créer une expérience différente de l’expérience A par défaut.
  13. Accédez à l’interface utilisateur Formulaires et documents, sélectionnez le formulaire puis cliquez sur Plus, enfin sélectionnez Démarrer le test A/B.
  14. Ouvrez maintenant le formulaire dans le navigateur Chrome plusieurs fois de suite en utilisant l’URL suivante :
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/Home-Mortgage-Application-Form/jcr:content?wcmmode=disabled
    Remarque :
    supprimez le cookie nommé mbox de la liste de persistance des cookies dans le navigateur avant d’ouvrir le formulaire la fois suivante.
    Vous voyez l’expérience A et B du formulaire de manière aléatoire.
  15. Sélectionnez le formulaire, cliquez sur Plus, et cliquez sur Rapport de test A/B. Vous ne trouverez pas beaucoup de données dans le rapport car vous venez de démarrage du test. Ajoutons maintenant quelques données sources pour voir à quoi ressemble le rapport de test A/B.
  16. Ouvrez CRXDE Lite et prenez une copie du fichier suivant : /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. Remplacez le contenu du fichier mentionné ci-dessus par le contenu du fichier suivant : /apps/we-finance/demo-artifacts/targetreport.js
    Remarque :
    ces modifications sont uniquement à titre de démonstration. Assurez-vous de restaurer le contenu du fichier après avoir terminé cette procédure.
  18. Actualisez le rapport que vous avez généré et vous verrez quelque chose qui ressemble à ça : Examinez le tableau de bord de génération de rapports.
ab-test-report

Pour mettre fin au test A/B, cliquez sur le bouton Terminer le test A/B du tableau de bord de génération de rapports. A ce stade, une boîte de dialogue vous invite à déclarer une expérience. Sélectionnez l’expérience la plus probante et confirmez la fin du test A/B.

Si vous choisissez l’expérience A comme la plus probante, le test A/B se termine et, à partir de ce moment, seule l’expérience A sera proposée à tous les publics, y compris ceux utilisant Chrome.

Présentation de la demande de prêt immobilier avec Microsoft Dynamics

Le cas de figure du prêt immobilier We.Finance avec Microsoft Dynamics met en scène les personnages suivants :

  • Sarah Rose, une cliente de We.Finance
  • L’administrateur de l’instance We.Finance Microsoft Dynamics

La présentation de la demande de prêt immobilier avec Microsoft Dynamics montre comment un client We.Finance peut utiliser le site pour demander un prêt immobilier lorsque le site de référence utilise Microsoft Dynamics pour l’intégration de données. La présentation se termine par des données remplies par l’utilisateur et collectées par Microsoft Dynamics. Avant de continuer avec ce cas de figure, vous devez effectuer la configuration de Microsoft Dynamics 365 pour le processus de prêt immobilier du site de référence We.Finance.

Sarah se rend sur le site Web de We.Finance et demande un prêt immobilier

Sarah Rose envisage d’acheter une maison et cherche donc un prêt immobilier. Elle est cliente chez We.Finance et se rend donc sur le portail We.Finance pour découvrir les offres de prêt. Elle accède à la section des prêts et trouve un calculateur dédié sur le portail. Elle remplit les détails et clique sur Calculer mon prêt, qui renvoie une offre de prêt.

loans1
loans2
Calculateur de prêt

loans3
Résultat du calculateur de prêt


Fonctionnement

Le calculateur de prêt sur la page Prêts est un formulaire adaptatif intégré dans une page de sites AEM. Vous pouvez consulter la page Prêts en mode Édition à l’adresse http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html.

Le calculateur de prêt intégré, qui est un formulaire adaptatif, utilise des règles pour calculer le montant des mensualités en fonction des détails du prêt fournis dans les champs du calculateur. Vous pouvez consulter le formulaire adaptatif à l’adresse http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/ms-dynamics/home-mortgage-calculator.html.

Démonstration

Accédez au portail We.Finance à l’adresse http://<publishHost>:<publishPort>/content/we-finance/global/en.html et cliquez sur Prêts. Fournissez des détails dans le calculateur de prêt et regardez les résultats.

Sarah trouve l’offre intéressante et choisit d’effectuer une demande

Sarah choisit de demander un prêt immobilier et clique sur Demander maintenant sur les résultats du calculateur de prêt. Il ouvre la demande de prêt immobilier.

Si Sarah accède à la demande de prêt immobilier à partir de son appareil mobile, le formulaire de demande s’ouvre dans une vue optimisée pour l’affichage sur appareils mobiles. Dans cette vue, le formulaire de demande affiche une section à la fois. Cela permet à Sarah d’afficher et de fournir des informations progressivement au fur et à mesure de son avancée dans le formulaire de la demande.

Les illustrations suivantes présentent le processus qui se produit lorsque Sarah parcourt la demande de prêt immobilier sur son appareil mobile.

Remplir la demande de prêt immobilier sur un périphérique mobile

Si Sarah clique sur Demander maintenant à partir de son ordinateur, le formulaire de demande de prêt immobilier s’ouvre comme suit. Les informations que Sarah a fournies dans le calculateur de prêt sont préremplies dans le formulaire de demande. Sarah remplit les détails restants et clique sur Continuer.

mortgage-application

En fonction des informations que Sarah a remplies dans le calculateur de prêt, quelques offres lui sont présentées. Elle choisit le plan qui convient à ses besoins et continue de remplir la demande. Elle signe, puis envoie la demande.

La demande envoyée est transmise à We.Finance pour approbation.

Enregistrer un brouillon de demande

Fonctionnement

Le bouton Demander maintenant redirige Sarah vers la demande de prêt immobilier. La demande est un formulaire adaptatif que vous pouvez consulter dans les instances de création à l’adresse http://[host]:[Port]/editor.html/content/forms/af/we-finance/ms-dynamics/application-for-home-mortgage.html.

Voici quelques fonctionnalités clés que vous pouvez consulter dans le formulaire adaptatif :

  • Il est basé sur un schéma XSD, homeMortgageApplication.xsd.
  • Il a été créé avec le thème B We.Finance pour le style et le modèle We.Finance pour la mise en page. En outre, il utilise une mise en page sans titre de panneau dans la mise en forme de l’en-tête de formulaire pour la navigation mobile. Il présente une mise en page mobile progressive lorsqu’il est ouvert depuis un appareil mobile. Vous pouvez consulter le modèle et le thème utilisés dans le formulaire adaptatif aux emplacements suivants sur votre instance d’auteur AEM :
    • http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance
    • http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-b/jcr:content
  • Le premier onglet Mise en route de l’application est un calculateur de prêt dynamique qui affiche les options en fonction de la sélection de l’utilisateur. Par exemple, les champs et les valeurs sont différents pour les options Achat et Refinancement. Cette fonctionnalité est réalisée en utilisant des règles afficher-masquer. En outre, lorsque vous cliquez sur Continuer et que l’onglet Plans est initialisé, il appelle un service Web configuré dans un modèle de données de formulaire pour récupérer et afficher les plans de prêt. Vous pouvez consulter les modèles de données de formulaire et les services configurés à l’adresse http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • Il utilise divers composants de formulaire adaptatif pour collecter les entrées et s’adapter aux réponses des utilisateurs. Il emploie également des composants tels que Courrier électronique qui prennent en charge les types d’entrée HTML5.
  • Il utilise le composant Étape de signature pour afficher le formulaire rempli et permet la signature électronique dans le formulaire.

Il est recommandé de consulter le formulaire pour comprendre le schéma, les composants, les règles, les modèles de données de formulaire, le processus des formulaires et l’action d’envoi utilisée pour générer le formulaire.

L’administrateur affiche les données envoyées dans l’instance Microsoft Dynamics

We.Finance reçoit la demande de prêt immobilier envoyée par Sarah sur l’instance Microsoft Dynamics. L’administrateur appuie sur l’entrée dans la colonne principale pour accéder à l’enregistrement principal créé pour Sarah Rose.

msdynamicsrecord

Présentation de la demande d’assurance habitation

Le cas de figure de l’assurance habitation We.Finance met en scène les personnages suivants :

  • Sarah Rose, une cliente de We.Finance
  • Gloria Rios, responsable du département consacré aux cartes de crédit et aux prêts chez We.Finance
  • Frank De Costa, courtier d’assurance chez We.Finance

L’infographie suivante illustre le déroulement détaillé d’un cas de demande d’assurance habitation.

workflow_insurance

À présent, étudions en détail les étapes du cas de figure du site de référence pour voir comment AEM Forms aide We.Finance à atteindre ses objectifs.

Sarah reçoit une newsletter de We.Finance et demande une assurance habitation

Sarah Rose a un prêt immobilier chez We.Finance et elle est à la recherche d’une bonne affaire pour une assurance habitation. Elle visite le portail We.Finance et consulte les plans d’assurance habitation. We.Finance l’a identifiée comme cliente actuelle et envoie une newsletter ciblée à son adresse électronique. La newsletter contient des offres d’assurance habitation.

insurance-newsletter

Fonctionnement

La newsletter envoyée à Sarah est une implémentation personnalisée qui déclenche l’envoi d’un courrier électronique à l’ID d’adresse électronique spécifié. Le bouton Demander maintenant dans la newsletter est lié à la demande d’assurance habitation qui est un formulaire adaptatif sur une instance de publication. 

Démonstration

Ouvrez l’URL suivante pour déclencher l’envoi d’un courrier électronique de newsletter. Assurez-vous de remplacer [emailID] par un compte de messagerie valide pour recevoir la newsletter. Ouvrez la newsletter et cliquez sur Demander maintenant pour accéder à la demande d’assurance habitation.

http://[authorServer]:[authorPort]/content/campaigns/we-finance/start.html?app=ins&email=[emailID]&givenName=Sarah&familyName=Rose

Sarah trouve l’offre d’assurance habitation intéressante et choisit de déposer une demande

Sarah trouve l’offre d’assurance habitation de la newsletter intéressante et décide de faire une demande. Elle clique sur Demander maintenant sur la newsletter, qui ouvre la demande d’assurance habitation sur le portail We.Finance. Le formulaire de demande est organisé en différentes sections au moyen d’une mise en page de carte.

Sur la page Informations personnelles, Sarah fournit son numéro de sécurité sociale. Une invite s’affiche pour se connecter avec ses informations d’identification.

insurance-ssn

Sarah est déjà cliente de We.Finance. Elle se connecte avec ses identifiants de compte We.Finance et ses données personnelles sont automatiquement renseignées dans le formulaire. Elle continue de renseigner les champs, puis elle envoie la demande.

Si Sarah envoie la demande depuis un appareil mobile, les écrans suivants s’affichent.

insurance-form-on-mobile

Fonctionnement

Le bouton Demander maintenant de la newsletter redirige Sarah vers la demande d’assurance habitation sur le portail We.Finance. La demande est un formulaire adaptatif que vous pouvez consulter dans l’instance de création à l’adresse http://[host]:[Port]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html.

Voici quelques fonctionnalités clés que vous pouvez consulter dans le formulaire adaptatif :

  • Il est basé sur un schéma XSD, insurance.xsd.
  • Il est créé avec le thème Assurance pour le style et utilise la mise en page sans titre de panneau dans la mise en forme de l’en-tête de formulaire pour la navigation mobile. Il présente une mise en page mobile progressive lorsqu’il est ouvert depuis un appareil mobile. Vous pouvez consulter le modèle à l’adresse http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance et le thème à l’adresse http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/insurance/jcr:content.
  • Il inclut des règles de formulaire adaptatif pour appeler les services de modèle de données de formulaire afin de préremplir les détails de l’utilisateur connecté. Il appelle également les services pour préremplir les informations selon le numéro de sécurité sociale ou l’adresse électronique fournie dans le formulaire. Vous pouvez consulter les modèles de données de formulaire et leurs services à l’adresse http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • Il utilise divers composants de formulaire adaptatif pour collecter les entrées et s’adapter aux réponses des utilisateurs. Il emploie également des composants tels que Courrier électronique qui prennent en charge les types d’entrée HTML5.
  • Le bouton Enregistrer ma progression génère un identifiant unique de l’utilisateur et enregistre la demande partiellement remplie en tant que brouillon dans un nœud du référentiel AEM. En outre, il affiche une autorisation de recherche de boîte de dialogue pour envoyer un courrier électronique contenant un lien vers le nœud contenant le brouillon de la demande. Le bouton Envoyer un courrier dans la boîte de dialogue de confirmation déclenche un courrier électronique contenant un lien vers le nœud qui contient le brouillon.
  • Il utilise l’action d’envoi Appeler le processus AEM pour déclencher le processus d’approbation de l’assurance habitation. Vous pouvez consulter le processus utilisé dans ce formulaire à l’adresse http://[host]:[Port]/cf#/etc/workflow/models/we-finance-insurance-workflow.html.

Il est recommandé de consulter le formulaire pour comprendre le schéma, les composants, les règles, les modèles de données de formulaire, le processus des formulaires et l’action d’envoi utilisée pour générer le formulaire.

Consultez également la documentation suivante pour plus d’informations sur les fonctionnalités utilisées dans le formulaire adaptatif de demande d’assurance habitation :

Démonstration

Cliquez sur le bouton Demander maintenant dans la newsletter que vous devriez avoir reçue par courrier électronique. Vous pouvez également accéder à http://[publishHost]:[publishPort]/content/we-finance/global/en/all-forms.html et cliquer sur Demander dans la demande d’assurance. Indiquez 123456789 dans le champ Numéro de sécurité sociale. Lorsque vous y êtes invité, connectez-vous en utilisant les nom d’utilisateur / mot de passe srose/srose.

Remplissez les détails, explorez les divers composants de formulaires adaptatifs et envoyez la demande. Vous pouvez consulter le formulaire adaptatif à l’adresse http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html.

We.Finance approuve la demande et un contrat est signé

We.Finance reçoit la demande d’assurance habitation envoyée par Sarah. Une tâche est assignée à Gloria Rios. Elle examine la demande dans sa boîte de réception AEM et l’approuve.

insurance-inbox-grios

Lorsque Gloria approuve la demande d’assurance habitation de Sarah, une tâche est créée dans la boîte de réception AEM de Frank De Costa. Frank examine la tâche. Il prépare un contrat de police d’assurance habitation pour Sarah, joint le contrat à sa demande et l’envoie à Sarah pour la signature du contrat.

insurance-contact-letter

Sarah reçoit un courrier électronique avec un lien vers le contrat de police d’assurance habitation pour la signature. Sarah examine et signe le contrat.

insurance-contract-email

Fonctionnement

Lorsque Sarah envoie la demande d’assurance habitation, un processus de formulaire se déclenche et une tâche est créée dans la boîte de réception AEM de Gloria. Lorsque Gloria examine la demande et l’approuve, la tâche est assignée à Frank De Costa. Le flux de tâches d’une personne à l’autre est défini dans le processus AEM associé à la demande d’assurance. Pour plus d’informations sur les processus, voir Processus basé sur l’utilisation de Forms sur OSGi.

L’image suivante illustre le processus AEM associé à la demande d’assurance.

insurance-workflow

Frank utilise la gestion de la correspondance pour préparer un contrat de police d’assurance habitation. Il télécharge le contrat PDF, le joint à la demande de Sarah et clique sur Envoyer contrat. Le processus envoie un courrier électronique à Sarah avec le contrat de police d’assurance habitation pour signature.

Démonstration

Effectuez la procédure suivante :

  1. Accédez à la boîte de réception AEM et connectez-vous avec grios/grios comme nom d’utilisateur/mot de passe pour le personnage de Gloria. Approuvez la tâche pour la demande d’assurance habitation de Sarah.
  2. Ensuite, connectez-vous à la boîte de réception AEM avec les nom d’utilisateur/mot de passe fdcosta/password pour le personnage de Frank. Affichez la tâche.
  3. Maintenant, accédez à http://[authorHost]:[authorPort]/aem/forms/assets.html/content/apps/cm/correspondence/letters/we-finance/insurance et prévisualisez le modèle de lettre pour le contrat de police d’assurance des propriétaires. 
  4. Indiquez les informations dans le panneau Données. Cliquez sur Aperçu, puis téléchargez le fichier PDF sur votre système de fichiers local. Assurez-vous que le fichier PDF est enregistré sous le nom de contract.pdf.
  5. Accédez à la boîte de réception AEM de Frank, ouvrez la tâche, joignez le PDF du contrat téléchargé, puis cliquez sur Envoyer contrat.
  6. Ouvrez le courrier électronique avec le contrat et signez le document. 

Sarah reçoit un kit de bienvenue

Lorsque Sarah signe le contrat d’assurance habitation, elle reçoit un courrier électronique avec les détails de la police.  

insurance-policy-details

Peu après, elle reçoit un autre courrier électronique de We.Finance avec un kit de bienvenue pour sa police d’assurance. Sarah peut accéder aux documents de sa police et consulter les instructions depuis le kit de bienvenue.

insurance-welcome-kit

Fonctionnement

Le kit de bienvenue est généré à l’aide d’un script ECMA. Le processus Forms associé au cas de figure de l’assurance habitation spécifie le script à utiliser pour générer les données XML. Les données XML sont ensuite utilisées pour générer le kit de bienvenue et remplir un modèle de courrier électronique envoyé à l’ID de courrier électronique spécifié.

Examinez le script ECMA pour le cas de figure de l’assurance habitation dans /etc/workflow/scripts/we-finance/insurance/we-finance-insurance-welcome-kit-dataxml-generation.ecma sur votre instance d’auteur.

Examinez également les étapes du processus de génération des données XML du kit de bienvenue et de l’envoi du courrier électronique de bienvenue à l’adresse http://[authorHost]:[authorPort]cf#/etc/workflow/models/we-finance-insurance-workflow.html.

Démonstration

Si vous avez spécifié votre ID de courrier électronique dans la demande, vous devriez avoir reçu un courrier électronique avec un lien vers le kit de bienvenue. Cliquez sur Mon kit de bienvenue pour ouvrir le kit de bienvenue.

insurance-welcome-kit-email

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne