Prohlížíte obsah nápovědy pro verzi:

Pre-requisites

Set up the reference sites as described in Set up and configure AEM Forms reference sites.

We.Finance Reference site scenarios

We.Finance is a leading organization in Financial Services domain that offers comprehensive and personalized financial solutions to suit the requirements of diverse customer profiles. They offer credit cards, home mortgage, and home insurance services.

Their goal is to reach out to existing and prospective customers on their preferred device, explain the benefits of their services, and help them enroll in their services. In addition, they are looking to pitch for more financial products like add-on cards that customers may find interesting.

Read on for detailed walkthroughs of We.Finance use cases and understand how AEM Forms helps financial organizations achieve their objectives.

Credit card application walkthrough

The We.Finance credit card application scenario involves the following personas:

  • Sarah Rose, a We.Finance customer
  • Gloria Rios, Head of Credit Card and Mortgage, We.Finance

The following infographic depicts step-by-step workflow of the credit card application.

workflow_aem-cc

Let’s look at the reference site scenario in detail to understand how the AEM Forms helps We.Finance achieve their objectives.

Sarah receives a newsletter from We.Finance and applies for a credit card

Sarah Rose is an existing We.Finance customer. She receives a newsletter from We.Finance about new credit cards on offer. She finds the offers exciting and decides to apply for a credit card. She clicks the Apply Now button in the newsletter, which takes her to the credit card application on We.Finance portal. 

marketing-email

How it works

The newsletter sent to Sarah is a custom implementation that triggers an email to the specified email ID. The Apply Now button in the email is linked to the credit card application, which is an adaptive form on a publish instance. 

See it yourself

Open the following URL to trigger a newsletter email. Ensure that you replace [emailID] with a valid email account to receive the newsletter. Open the newsletter and click Apply Now to go to the credit card application.

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

Sarah finds the offer interesting and chooses to apply

Sarah decides to apply for the credit card and taps Apply Now button on the email. It takes Sarah to the credit card application on We.Finance portal. The application form is organized in sections using a card layout.

Sarah selects a credit card from the available options and clicks Continue.

cc-application-form-desktop

On the Personal Information page, as Sarah provides her Social Security Number, she gets a prompt to log in with her credentials.

login-ssn

Sarah is an existing We.Finance customer. She logs in with her We.Finance account credentials and her personal details are auto-populated in the form. Sarah continues to fill the application form and that’s when a reminder pops up for a meeting she must attend. She clicks Save my progress on the application form. It saves all the information Sarah has filled in so far and a dialog pops up to confirm if she would like to receive an email with a link to her draft application to complete later.

Sarah clicks Send mail. She receives an email with a link to resume her credit card application.

resume

If Sarah is accessing the credit card application from her mobile device, the responsive application opens in a view optimized for mobile devices. In this view, the application form is renders as one section at a time. It allows Sarah to view and provide information progressively as she navigates the application.

Filling the credit card application on mobile device

How it works

The Apply Now button directs Sarah to the credit card application. The application is an adaptive form, which you can review in the authoring instances at http://[host]:[Port]/editor.html/content/forms/af/we-finance/cc-app.html.

Some of the key features you can review in the adaptive form are:

  • It is based on an XSD schema.
  • It is built using We Finance Theme A for styling and We.Finance template for layout. Also, it uses Layout without panel titles in the form header layout for mobile navigation. It displays a progressive mobile layout when opened from a mobile device. You can review the template at http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance and the theme at http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/we-finance-theme-a/jcr:content.
  • It includes adaptive form rules to invoke Form Data Model services to prefill user details of logged in user. It also invokes services to prefill information by social security number or email address provided in the form. You can review the Form Data Models and their services at http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • It uses various adaptive form components to capture inputs and adapts to user responses. It also uses components like Email that support HTML5 input types.
  • It uses the Signature Step component to display the completed form and allows electronic signature on the form.
  • The Save my progress button generates a unique ID for the user and saves the partially-filled application as a draft in a node in AEM repository. Also, it displays a dialog seeking permission to send an email with a link to the node containing the draft application. The Send mail button on the confirmation dialog triggers an email with a link to the node containing the draft.
  • It uses the Invoke AEM Workflow submit action to trigger the credit card approval workflow. You can review the workflow used in this form at http://[host]:[Port]/cf#/etc/workflow/models/we-finance-credit-card-workflow.html.

It is recommended to review the form to understand the schema, components, rules, Form Data Models, forms workflow, and submit action used to build the form.

Also, see the following documentation for more information about features used in the credit card application adaptive form:

See it yourself

When logged in as Sarah Rose, click the Apply now button on the credit card application. Fill in some details, explore various adaptive form components, and click Save my progress to receive an email with a Resume button that links to the draft application. Ensure that you specify your email ID in the application form to receive the email.

Review the We.Finance Theme available at:

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

You can review the We.Finance Template at:

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

Sarah resumes and submits the application

Sarah comes back later and finds an email from We.Finance. She clicks the Resume button in the email that takes her to her draft credit card application. The information that she filled earlier comes prepopulated. She fills the remaining application form, signs the application, and submits it.

resume

Alternatively, she can access her draft application under My Forms on We.Finance home page.

portal-drafts

How it works

The Resume button in the email redirects Sarah to the node containing her draft application.

See it yourself

You must have received an email with a link to the draft application on your email ID that you specified while filling the application form. Go ahead, fill in the remaining sections in the application, and submit it.

We.Finance receives and approves the application

We.Finance receives the credit card application submitted by Sarah. A task is assigned to Gloria Rios. She reviews the task in her AEM Inbox and approves it.

inbox

How it works

When Sarah fills and submits the credit card application, a Forms Workflow triggers and a task is created in Gloria's AEM inbox.

AEM Forms on OSGi provides forms-centric workflows that allow you to build adaptive forms-based workflows. These workflows can be used for review and approvals, business process flows, to start document services, integrate with Adobe Sign signature workflow, and so on. For more information, see Forms-centric workflow on OSGi.

The following image depicts the AEM workflow that processes the credit card application and generates a PDF output of the application.

forms-workflow

See it yourself

You can access the AEM inbox at http://<hostname>:<AuthorPort>/aem/inbox. Log in to the AEM inbox using grios/password as the username/password for Gloria Rios, and approve the credit card application. For information about using AEM Inbox for forms-centric workflow tasks, see Manage Forms applications and tasks in AEM Inbox.

inbox

When you approve the application, Sarah receives an email with the welcome kit. 

Sarah receives the welcome kit and applies for an add-on card

As Sarah's credit card application gets approved, she receives an email with a link to the Welcome kit. She opens the Welcome kit, which includes her credit card account details. The Welcome kit also includes a carousel window that displays promotional offers personalized for Sarah. As she scrolls down, the Welcome kit contains an embedded form to apply for an add-on card.  Sarah quickly filled in the required details from within the Welcome kit and applies for the add-on card. A confirmation dialog for the add-on card application appears.

welcome-kit

The welcome kit is personalized for Sarah and shows information relevant to her. It provides her an option to download a PDF version of the welcome kit. The arrow button at the bottom allows Sarah to scroll down and navigate through other sections in the welcome kit.

benefits

The welcome kit includes another application form that Sarah can fill and submit to apply for an add-on card from within the welcome kit without visiting the We.Finance portal.

addon-card

How it works

The welcome kit is an adaptive document included in the cq-we-finance-content-pkg.zip package. The promotional offers in the welcome kit are served by Adobe Target server. The offers are customized and targeted for specific customer segments. The welcome kit fetches offers from a preconfigured Adobe Target server for an audience segment of female Platinum card customers.

The interactive cards in the desktop version to showcase the benefits of the credit card in the welcome kit is a custom layout created using the default card layout of a document fragment.

The add-on card application is an embedded adaptive form in the welcome kit adaptive document.

See it yourself

Click the Resume button in the email that you received in the previous step. It opens the draft application. Fill in all the details and submit the application. You will then receive a welcome kit. Review the welcome kit.

You can also view the welcome kit at the following URL:

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

You can access it on author and publish instances. 

Sarah receives a credit card statement

As Sarah begins to use the credit card, she receives another email from We.Finance that includes her credit card statement. The following images show the email with a link to the credit card statement on mobile.

statement-email

Sarah clicks View Statement in the email to view the credit card statement. The interactive statement constitutes various elements:

  • Statement summary
  • Detailed expense report
  • Graphical expense analysis
  • Option to make a payment for the due amount from within the statement
  • Download the payment receipt
Different parts of the credit card statement

Sarah doesn’t need to go to the portal or search through her emails for the latest credit card statement. She just clicks the View Latest Statement button from any statement to opens the latest statement.

The detailed statement is laid out in a responsive table and provides an option to pay a part or the entire due amount from within the statement.

Detailed statement

Sarah makes the due payment from within the statement and gets an option to download the payment receipt instantly. However, the Download Receipt button does not let you download a payment receipt. The Download Receipt button is provided for demo purposes. You can add code to enable functionality to download a receipt using this button. 

How it works

The credit card statement is an adaptive document. The detailed expense table in the statement is a responsive table. The graphic for expense analysis is a custom chart component and reads the expense table and generates the pie chart.

See it yourself

You can review the interactive credit card statement at the following URL:

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

You can access it on author and publish instances. 

We.Finance analyzes the performance of the credit card application

We.Finance, from time to time, reviews the performance of their credit card application to check for any issues that customers might be facing. They use this analysis to take informed decisions about the changes required in the credit card application to enhance the user experience, reduce abandonment rate of forms, and thereby improve conversion. They leverage the integration of AEM Forms with Adobe Analytics for their analysis. The following image depicts their analytics dashboard.

For more information about how to interpret the analytics dashboard, see Viewing and understanding AEM Forms analytics reports.

cc-analytics

How it works

The performance metrics for the credit card application form are tracked using Adobe Analytics. For more information about configuring Adobe Analytics and viewing reports, see Configuring analytics for forms and documents.

See it yourself

For you to view and explore the analytics report, we are providing seed data for the credit card application in the reference site. Before you use seed data, see Configure Analytics. Perform the following steps in author instance to view the report with the seed data:

  1. Go to Forms & Documents UI at http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Click to open the We.Finance Folder.
  3. Click the Select tool in the toolbar and select Application for Credit Card adaptive form.
  4. Click More in the toolbar and click Analytics Report. To generate the analytics report with seed data.

To access the seed data for the analytics report:

  1. In the address browser of CRXDE lite, type: /apps/we-finance/demo-artifacts/analyticsTestData/Credit card Analytics Test Data
  2. The test data is selected in the left side directory structure. 
  3. Double click the selected file to open its content in the right side panel. 
  4. Copy all the content in the test data file. 
  5. In CRXDE, navigate to: /content/dam/formsanddocuments/we-finance/cc-app/jcr:content/analyticsdatanode/lastsevendays
  6. In the analyticsdata field under Properties, paste the copied content of the test data file. 

A/B testing of the credit card application

In addition to analyzing performance of the credit card application and constantly improving it, We.Finance leverages integration of AEM Forms with Target to create A/B tests. It allows them to serve different experiences of the credit card application form and identify the experience that causes better conversion rate in terms of form completion and submission.

To configure Target in AEM Forms server, see Set up and integrate Target in AEM Forms.

Perform the following steps to experience the creation of A/B test for We.Finance credit card application form:

  1. Go to Forms & Documents at http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Click to open the We.Finance folder.
  3. Click the Select tool in the toolbar.
  4. Select Application for Credit Card adaptive form.
  5. Click More in toolbar and select Configure A/B Testing. The Configure A/B testing page opens.
  6. Specify an Activity Name.
  7. From the Audience drop-down list, select an audience to whom you want to serve different experiences of the form. For example, Visitors Using Chrome.
  8. In the Experience Distribution fields for experiences A and B, specify the distribution, in terms of percentage, to determine the distribution of experiences among the total audience. For example, if you specify 40, 60 for experiences A and B, respectively, the experience A will be served to the 40% of the audience and the remaining 60% will see the experience B.
  9. Click Configure. A dialog appears to confirm the creation of the A/B test.
  10. Click Done.
  11. Select the Application for Credit Card form and click Open. It gives the option to open one of the experiences. Click Experience B. The form opens in the edit mode.
  12. Modify the form as desired to create a different experience than the default experience A.
  13. Go to the Forms and Documents UI, select the form, click More, and select Start A/B Testing.
  14. Now open the form in chrome browser several times using the following url:
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/cc-app/jcr:content?wcmmode=disabled
    Note:
    Remove the cookie with the name mbox from browser’s cookie persistence before opening the form next time.
    You will see experience A and B of the form at random.
  15. Select the form, click More, and click A/B Testing Report. You won’t find much data in the report as you have just started the testing. Let’s now provide some seed data to see how A/B Testing report looks like.
  16. Open CRXDE Lite and take a back-up of the following file: /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. Replace the content of the above mentioned file with the content of the following file: /apps/we-finance/demo-artifacts/targetreport.js
    Note:
    These changes are only for the demo purpose. Ensure that you restore the file contents after completing this procedure.
  18. Refresh the report that you generated, and you will see something like the following. Review the reporting dashboard.
ab-test-report

To end the A/B test, click End A/B test button on the reporting dashboard. At this time, a dialog prompts you to declare an experience. Choose a winner and confirm to end the A/B test.

If you choose experience A as the winner, the A/B test will be put to an end, and going forward, only Experience A will be served to all audiences, including those on Chrome.

Home mortgage application walkthrough

The We.Finance home mortgage scenario involves the following personas:

  • Sarah Rose, a We.Finance customer
  • Gloria Rios, Head of Credit Card and Mortgage, We.Finance
  • John Doe, Customer Care Representative, We.Finance

The following infographic depicts step-by-step workflow of a home mortgage application.

Mortgage application infographic

Let’s now look in detail the steps in the reference site scenario to see how the AEM Forms helps We.Finance achieve their objectives.

Sarah visits We.Finance website and applies for home mortgage

Sarah Rose is planning to buy a home and looking for a home mortgage plans. She is a We.Finance customer and therefore visits the We.Finance portal to explore home mortgage offers. She goes to the Loans section and finds a mortgage calculator on the portal. She fills in the details and clicks Calculate my mortgage, which returns a mortgage plan.

loans1
loans2
Mortgage calculator

loans3
Mortgage calculator result


How it works

The home mortgage calculator on the Loans page is an embedded adaptive form in AEM Sites page. You can review the Loans page in edit mode at http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html.

The embedded mortgage calculator, which is an adaptive form, uses rules to calculate the EMI amount based on the loan details provided in the calculator fields. You can review the adaptive form at http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/hm-calc.html.

See it yourself

Go to We.Finance portal at http://<publishHost>:<publishPort>/content/we-finance/global/en.html and click Loans. Provide details in the mortgage calculator and see the results.

Sarah finds the offer interesting and chooses to apply

Sarah chooses to apply for home mortgage and clicks Apply Now on home mortgage calculator results. It opens the application for home mortgage.

If Sarah is accessing the home mortgage application from her mobile device, the application form opens in a view optimized for viewing on a mobile device. In this view, the application form renders one section at a time. It allows Sarah to view and provide information progressively as she navigates the application form.

The following images show the workflow as Sarah navigates through the home mortgage application on her mobile device.

Filling the mortgage application on mobile device

If Sarah clicks Apply now from her desktop, the mortgage application form opens as follows. The information Sarah provided in the mortgage calculator is prefilled in the application form. Sarah fills in the remaining details and clicks Continue.

mortgage-application

Based on the information Sarah filled in the mortgage calculator, she is presented with a few mortgage plans. She chooses the plan that suits her requirements and continues to fill the application. She finally signs and submits the application.

The submitted application goes to We.Finance for approval.

Saving a draft application

How it works

The Apply now button directs Sarah to the home mortgage application. The application is an adaptive form, which you can review in the authoring instances at http://[host]:[Port]/editor.html/content/forms/af/we-finance/hm-app.html.

Some of the key features you can review in the adaptive form are:

  • It is based on an XSD schema, homeMortgageApplication.xsd.
  • It is built using We Finance Theme B for styling and We.Finance template for layout. Also, it uses Layout without panel titles in the form header layout for mobile navigation. It displays a progressive mobile layout when opened from a mobile device. You can review the template and the theme used in the adaptive form at the following locations on your AEM author instance:
    • 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
  • The first tab, Getting Started, in the application is a dynamic mortgage calculator that displays options based on user selection. For example, the fields and values are different for Purchase and Refinance options. This functionality is achieved using show-hide rules. In addition, when you click Continue and the Plans tab is initialized, it invokes a web service configured in a Form Data Model to fetch and display mortgage plans. You can review the Form Data Models and configured services at http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • It uses various adaptive form components to capture inputs and adapts to user responses. It also uses components like Email that support HTML5 input types.
  • It uses the Signature Step component to display the completed form and allows electronic signature on the form.
  • It uses the Invoke AEM Workflow submit action to trigger the We Finance Home Mortgage AEM workflow. You can review the workflow used in this form at http://[host]:[Port]/cf#/etc/workflow/models/we-finance-home-mortgage-workflow.html.

It is recommended to review the form to understand the schema, components, rules, Form Data Models, forms workflow, and submit action used to build the form.

Also, see the following documentation for more information about features used in the home mortgage application adaptive form:

See it yourself

Go to http://[server]:[port]/content/we-finance/global/en/all-forms.html and click the Apply now button on Home Mortgage Application. Fill in the details in the Getting Started tab, try different options, and submit the application.

Ensure that you specify a valid email ID in the application to receive an acknowledgement mail in your inbox.

We.Finance receives the application

We.Finance receives the mortgage application submitted by Sarah. The task to approve or reject the application is assigned to Gloria Rios. She reviews the application and finds that Sarah's government ID is missing.

grios-inbox

Gloria opens the task and clicks Need More Info and puts a comment about missing government ID.

need-more-info

The task is now assigned to John Doe, a customer care representative with We.Finance. He opens the task and reviews Gloria's comment. He contacts Sarah and asks her to send a copy of her ID. After he received a copy of Sarah's ID, he attaches it to the task and submits the application for re-evaluation.

reevaluation

The task is reassigned to Gloria. She reviews the attached ID and approves the application. 

How it works

When Sarah fills and submits the home mortgage application, a Forms Workflow triggers and a task is created in Gloria's AEM inbox. As Gloria reviews the application and requests for more information, the task is assigned to John Doe. When John Doe attaches the ID and resubmits the application, it is assigned to Gloria. This is defined in the AEM Workflow associated with the mortgage application.

AEM Forms on OSGi provides forms-centric workflows that allow you to build adaptive forms-based workflows. These workflows can be used for review and approvals, business process flows, to start document services, integrate with Adobe Sign signature workflow, and so on. For more information, see Forms-centric workflow on OSGi.

The following image depicts the AEM workflow associated with the mortgage application.

mortgage-workflow

See it yourself

You can access the AEM inbox at http://<hostname>:<AuthorPort>/aem/inbox. Log in to the AEM inbox using grios/password as the username/password for Gloria Rios and jdoe/jdoe for John Doe, and explore the home mortgage application workflow.

For information about using AEM Inbox for forms-centric workflow tasks, see Manage Forms applications and tasks in AEM Inbox.

Sarah receives the welcome kit

As Sarah's mortgage application gets approved, she receives an email with a link to the Welcome kit. She opens the Welcome kit, which includes a carousel displaying promotional offers personalized for Sarah.  

mortgage-welcome-kit

The welcome kit is personalized for Sarah and shows information relevant to her. It provides her an option to download a PDF version of the welcome kit. The arrow button at the bottom allows Sarah to scroll down and navigate through other sections in the welcome kit.

How it works

The welcome kit is an adaptive document included in the cq-we-finance-content-pkg.zip package. The promotional offers in the welcome kit are served by Adobe Target server. The offers are customized and targeted for specific customer segments. The welcome kit fetches offers from a preconfigured Adobe Target server for an audience segment of female customers.

The interactive cards in the desktop version of the welcome kit use a custom layout created using the default card layout of a document fragment.

See it yourself

If you provided your email ID when filling the mortgage application, you should have received an email containing link to the welcome kit. Check your inbox and review the welcome kit.

You can view it in AEM publish instance at the following URL:

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

Sarah receives an account statement

As Sarah avails the loan and starts paying the installments, she receives another email from We.Finance that includes her monthly account statement. 

mortgage-statement-email

Sarah clicks View Statement in the email to view the mortgage account statement. The interactive statement constitutes various elements:

  • Statement summary
  • Statement Details

The following image shows different part of the account statement on Desktop.  

Mortgage account statement

The detailed statement is laid out in a responsive table and provides an option to pay a part or the entire due amount from within the statement.

How it works

The mortgage statement is an adaptive document. It is generated using the JSON batching process. The detailed expense table in the statement is a responsive table. 

See it yourself

You can review the interactive mortgage account statement at the following URL:

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

You can access it on author and publish instances. 

We.Finance analyzes the performance of the mortgage application

We.Finance, from time to time, reviews the performance of their mortgage application to check for any issues that customers might be facing. They use this analysis to take informed decisions about the changes required in the mortgage application to enhance the user experience, reduce abandonment rate of forms, and thereby improve conversion. They leverage the integration of AEM Forms with Adobe Analytics for their analysis. The following image depicts their analytics dashboard.

For more information about how to interpret the analytics dashboard, see Viewing and understanding AEM Forms analytics reports.

mortgage-analytics

How it works

The performance metrics for the mortgage application form are tracked using Adobe Analytics. For more information about configuring Adobe Analytics and viewing reports, see Configuring analytics for forms and documents.

See it yourself

For you to view and explore the analytics report, we are providing seed data for the mortgage application in the reference site. Before you use seed data, see Configure Analytics.  Perform the following steps in author instance to view the report with the seed data:

  1. Go to Forms & Documents UI at http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Click to open the we-finance Folder.
  3. Select Home Mortgage Application Form adaptive form.
  4. Click More in the toolbar and click Analytics Report. To generate the analytics report with seed data.

To access the seed data for the analytics report:

  1. In the address browser of CRXDE lite, type: /apps/we-finance/demo-artifacts/analyticsTestData/Home Mortgage Analytics Test Data
  2. The test data is selected in the left side directory structure. 
  3. Double-click the selected file to open its content in the right side panel. 
  4. Copy all the content in the test data file. 
  5. In CRXDE, navigate to: /content/dam/formsanddocuments/we-finance/hm-app/jcr:content/analyticsdatanode/lastsevendays
  6. In the analyticsdata field under Properties, paste the copied content of the test data file. 

A/B testing of the mortgage application

In addition to analyzing performance of the mortgage application and constantly improving it, We.Finance leverages integration of AEM Forms with Target to create A/B tests. It allows them to serve different experiences of the application form and identify the experience that causes better conversion rate in terms of form completion and submission.

To configure Target in AEM Forms server, see Set up and integrate Target in AEM Forms.

Perform the following steps in the author instance to experience the creation of A/B test for We.Finance mortgage application form:

  1. Go to Forms & Documents at http://<hostname>:<AuthorPort>/aem/forms.html/content/dam/formsanddocuments.
  2. Click to open the we-finance folder.
  3. Click the Select tool in the toolbar.
  4. Select Home Mortgage Application Form adaptive form.
  5. Click More in toolbar and select Configure A/B Testing. The Configure A/B testing page opens.
  6. Specify an Activity Name.
  7. From the Audience drop-down list, select an audience to whom you want to serve different experiences of the form. For example, Visitors Using Chrome.
  8. In the Experience Distribution fields for experiences A and B, specify the distribution, in terms of percentage, to determine the distribution of experiences among the total audience. For example, if you specify 40, 60 for experiences A and B, respectively, the experience A will be served to the 40% of the audience and the remaining 60% will see the experience B.
  9. Click Configure. A dialog appears to confirm the creation of the A/B test.
  10. Click Done.
  11. Select the Home Mortgage Application form and click Open. It gives the option to open one of the experiences. Click Experience B. The form opens in the edit mode.
  12. Modify the form as desired to create a different experience than the default experience A.
  13. Go to the Forms and Documents UI, select the form, click More, and select Start A/B Testing.
  14. Now open the form in chrome browser several times using the following url:
    http://<hostname>:<port>/content/dam/formsanddocuments/we-finance/Home-Mortgage-Application-Form/jcr:content?wcmmode=disabled
    Note:
    Remove the cookie with the name mbox from browser’s cookie persistence before opening the form next time.
    You will see experience A and B of the form at random.
  15. Select the form, click More, and click A/B Testing Report. You won’t find much data in the report as you have just started the testing. Let’s now provide some seed data to see how A/B Testing report looks like.
  16. Open CRXDE Lite and take a back-up of the following file: /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
  17. Replace the content of the above mentioned file with the content of the following file: /apps/we-finance/demo-artifacts/targetreport.js
    Note:
    These changes are only for the demo purpose. Ensure that you restore the file contents after completing this procedure.
  18. Refresh the report that you generated, and you will see something like the following. Review the reporting dashboard.
ab-test-report

To end the A/B test, click End A/B test button on the reporting dashboard. At this time, a dialog prompts you to declare an experience. Choose a winner and confirm to end the A/B test.

If you choose experience A as the winner, the A/B test will be put to an end, and going forward, only Experience A will be served to all audiences, including those on Chrome.

Home Mortgage application walkthrough with Microsoft Dynamics

The We.Finance home mortgage with Microsoft Dynamics scenario involves the following personas:

  • Sarah Rose, a We.Finance customer
  • The Administrator of the We.Finance Microsoft Dynamics instance

The Home Mortgage application walkthrough with Microsoft Dynamics demonstrates how a We.Finance customer can use the site to apply for a home mortgate when the reference site uses the Microsoft Dynamics for data integration. The walkthrough ends with the data filled in by the user being received by Microsoft Dynamics. Before you proceed with this scenario, you need to complete the Microsoft Dynamics 365 configuration for the home mortgage workflow of the We.Finance reference site.

Sarah visits We.Finance website and applies for home mortgage

Sarah Rose is planning to buy a home and looking for a home mortgage plans. She is a We.Finance customer and therefore visits the We.Finance portal to explore home mortgage offers. She goes to the Loans section and finds a mortgage calculator on the portal. She fills in the details and clicks Calculate my mortgage, which returns a mortgage plan.

loans1
loans2
Mortgage calculator

loans3
Mortgage calculator result


How it works

The home mortgage calculator on the Loans page is an embedded adaptive form in AEM Sites page. You can review the Loans page in edit mode at http://[authorHost]:[authorPort]/editor.html/content/we-finance/global/en/loan-landing-page.html.

The embedded mortgage calculator, which is an adaptive form, uses rules to calculate the EMI amount based on the loan details provided in the calculator fields. You can review the adaptive form at http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/ms-dynamics/home-mortgage-calculator.html.

See it yourself

Go to We.Finance portal at http://<publishHost>:<publishPort>/content/we-finance/global/en.html and click Loans. Provide details in the mortgage calculator and see the results.

Sarah finds the offer interesting and chooses to apply

Sarah chooses to apply for home mortgage and clicks Apply Now on home mortgage calculator results. It opens the application for home mortgage.

If Sarah is accessing the home mortgage application from her mobile device, the application form opens in a view optimized for viewing on a mobile device. In this view, the application form renders one section at a time. It allows Sarah to view and provide information progressively as she navigates the application form.

The following images show the workflow as Sarah navigates through the home mortgage application on her mobile device.

Filling the mortgage application on mobile device

If Sarah clicks Apply now from her desktop, the mortgage application form opens as follows. The information Sarah provided in the mortgage calculator is prefilled in the application form. Sarah fills in the remaining details and clicks Continue.

mortgage-application

Based on the information Sarah filled in the mortgage calculator, she is presented with a few mortgage plans. She chooses the plan that suits her requirements and continues to fill the application. She finally signs and submits the application.

The submitted application goes to We.Finance for approval.

Saving a draft application

How it works

The Apply now button directs Sarah to the home mortgage application. The application is an adaptive form, which you can review in the authoring instances at http://[host]:[Port]/editor.html/content/forms/af/we-finance/ms-dynamics/application-for-home-mortgage.html.

Some of the key features you can review in the adaptive form are:

  • It is based on an XSD schema, homeMortgageApplication.xsd.
  • It is built using We Finance Theme B for styling and We.Finance template for layout. Also, it uses Layout without panel titles in the form header layout for mobile navigation. It displays a progressive mobile layout when opened from a mobile device. You can review the template and the theme used in the adaptive form at the following locations on your AEM author instance:
    • 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
  • The first tab, Getting Started, in the application is a dynamic mortgage calculator that displays options based on user selection. For example, the fields and values are different for Purchase and Refinance options. This functionality is achieved using show-hide rules. In addition, when you click Continue and the Plans tab is initialized, it invokes a web service configured in a Form Data Model to fetch and display mortgage plans. You can review the Form Data Models and configured services at http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • It uses various adaptive form components to capture inputs and adapts to user responses. It also uses components like Email that support HTML5 input types.
  • It uses the Signature Step component to display the completed form and allows electronic signature on the form.

It is recommended to review the form to understand the schema, components, rules, Form Data Models, forms workflow, and submit action used to build the form.

The administrator views the submitted data in the Microsoft Dynamics instance

We.Finance receives the mortgage application submitted by Sarah on the Microsoft Dynamics instance. The administrator taps entry in the lead column to go to the lead record created for Sarah Rose.

msdynamicsrecord

Home insurance application walkthrough

The We.Finance home insurance scenario involves the following personas:

  • Sarah Rose, a We.Finance customer
  • Gloria Rios, Head of Credit Card and Mortgage, We.Finance
  • Frank De Costa, Insurance Agent, We.Finance

The following infographic depicts step-by-step workflow of a home insurance application scenario.

workflow_insurance

Let’s now look in detail the steps in the reference site scenario to see how the AEM Forms helps We.Finance achieve their objectives.

Sarah receives a newsletter from We.Finance and applies for home insurance

Sarah Rose is a home mortgage customer of We.Finance and looking for a good deal on home insurance. She visits the We.Finance portal and explores home insurance plans. We.Finance identified her as an existing customer and sends her a targeted newsletter on her email. The newsletter contains home insurance offers.

insurance-newsletter

How it works

The newsletter sent to Sarah is a custom implementation that triggers an email to the specified email ID. The Apply Now button in the newsletter is linked to home insurance application, which is an adaptive form on a publish instance. 

See it yourself

Open the following URL to trigger a newsletter email. Ensure that you replace [emailID] with a valid email account to receive the newsletter. Open the newsletter and click Apply Now to go to the home insurance application.

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

Sarah finds the home insurance offer interesting and chooses to apply

Sarah likes the home insurance plan in the newsletter and decides to apply for it. She clicks Apply Now on the newsletter, which opens the home insurance application on We.Finance portal. The application form is organized in sections using a card layout.

On the Personal Information page, as Sarah provides her Social Security Number, she gets a prompt to log in with her credentials.

insurance-ssn

Sarah is an existing We.Finance customer. She logs in with her We.Finance account credentials and her personal details are auto-populated in the form. She continues to fill and submit the application.

If Sarah submitted the application on a mobile device, she would go through the following screens.

insurance-form-on-mobile

How it works

The Apply Now button on the newsletter directs Sarah to the home insurance application on We.Finance portal. The application is an adaptive form, which you can review in the authoring instance at http://[host]:[Port]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html.

Some of the key features you can review in the adaptive form are:

  • It is based on an XSD schema, insurance.xsd.
  • It is built using Insurance theme for styling and uses Layout without panel titles in the form header layout for mobile navigation. It displays a progressive mobile layout when opened from a mobile device. You can review the template at http://[host]:[Port]/libs/wcm/core/content/sites/templates.html/conf/we-finance and the theme at http://[host]:[Port]/editor.html/content/dam/formsanddocuments-themes/we-finance/insurance/jcr:content.
  • It includes adaptive form rules to invoke Form Data Model services to prefill user details of logged in user. It also invokes services to prefill information by social security number or email address provided in the form. You can review the Form Data Models and their services at http://[host]:[Port]/aem/forms.html/content/dam/formsanddocuments-fdm.
  • It uses various adaptive form components to capture inputs and adapts to user responses. It also uses components like Email that support HTML5 input types.
  • The Save my progress button generates a unique ID for the user and saves the partially-filled application as a draft in a node in AEM repository. Also, it displays a dialog seeking permission to send an email with a link to the node containing the draft application. The Send mail button on the confirmation dialog triggers an email with a link to the node containing the draft.
  • It uses the Invoke AEM Workflow submit action to trigger the home insurance approval workflow. You can review the workflow used in this form at http://[host]:[Port]/cf#/etc/workflow/models/we-finance-insurance-workflow.html.

It is recommended to review the form to understand the schema, components, rules, Form Data Models, forms workflow, and submit action used to build the form.

Also, see the following documentation for more information about features used in the home insurance application adaptive form:

See it yourself

Click Apply now button on the newsletter you would have received on your email. Alternatively, go to http://[publishHost]:[publishPort]/content/we-finance/global/en/all-forms.html and click Apply on the insurance application. Specify 123456789 in the Social Security Number field. When prompted, log in using srose/srose as the username/password.

Fill in details, explore various adaptive form components, and submit the application. You can review the adaptive form at http://[authorHost]:[authorPort]/editor.html/content/forms/af/we-finance/insurance/application-for-insurance.html.

We.Finance approves the application and a contract is signed

We.Finance receives the home insurance application submitted by Sarah. A task is assigned to Gloria Rios. She reviews the application in her AEM Inbox and approves it.

insurance-inbox-grios

As Gloria approves Sarah's home insurance application, a task gets created in Frank De Costa's AEM Inbox. Frank reviews the task. He prepares a home insurance policy contract for Sarah, attaches the contract to her application, and sends it to Sarah for signing the contract.

insurance-contact-letter

Sarah receives an email with a link to the home insurance policy contract for signing. Sarah reviews and signs the contract.

insurance-contract-email

How it works

When Sarah submits the home insurance application, a Forms Workflow triggers and a task is created in Gloria's AEM inbox. As Gloria reviews the application and approves it, the task is assigned to Frank De Costa. The flow of tasks from one persona to another is defined in the AEM Workflow associated with the insurance application. For more information about workflows, see Forms-centric workflow on OSGi.

The following image depicts the AEM workflow associated with the insurance application.

insurance-workflow

Frank uses correspondence management to prepare a home insurance policy contract. He downloads the contract PDF and attaches it to the Sarah's application and clicks Send Contract. The workflow triggers a mail to Sarah with home insurance policy contract for signing.

See it yourself

Do the following:

  1. Go to AEM Inbox and log in with grios/grios as username password for Gloria's persona. Approve the task for Sarah's home insurance application.
  2. Next, log into AEM Inbox with fdcosta/password as username password for Frank's persona. View the task.
  3. Now, go to http://[authorHost]:[authorPort]/aem/forms/assets.html/content/apps/cm/correspondence/letters/we-finance/insurance and preview the letter template for Homeowners Insurance Policy Contract. 
  4. Specify information in the Data panel. Click Preview and then download the PDF to your local filesystem. Ensure that the PDF file is saved with contract.pdf filename.
  5. Go to Frank's AEM Inbox, open the task, attach the downloaded contract PDF, and click Send Contract.
  6. Open the email with contract and sign the document. 

Sarah receives a welcome kit

As Sarah's signs the home insurance contract, she receives an email with policy details.  

insurance-policy-details

Shortly, she receives another email from We.Finance with a welcome kit for her insurance policy. From the welcome kit, Sarah can access her policy documents and view statements.

insurance-welcome-kit

How it works

The welcome kit is generated using an ECMA script. The Forms Workflow associated with the home insurance scenario specifies the script to use to generate the data XML. The data XML is then used to generate the welcome kit and populate an email template, which is sent to the specified email ID.

Review the ECMA script for home insurance scenario at /etc/workflow/scripts/we-finance/insurance/we-finance-insurance-welcome-kit-dataxml-generation.ecma on your author instance.

Also, review the Welcome Kit Data XML Generation and Sending Welcome Email workflow steps at http://[authorHost]:[authorPort]cf#/etc/workflow/models/we-finance-insurance-workflow.html.

See it yourself

If you specified you email ID in the application, you would have received an email with a link to the welcome kit. Click My Welcome Kit to open the welcome kit.

insurance-welcome-kit-email

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online