Set up and configure AEM Forms reference sites

AEM Forms provides a reference site implementation to demonstrate how AEM Forms helps Financial Services Industry and Government organizations in transforming their complex transactions into simple and engaging digital experiences anywhere, anytime, on any device.

The Geometrixx Finance and Geometrixx Gov reference sites draw real life use-cases to engage with existing and potential customers, right from the point of first touch to managing correspondences and transactions in a personalized and cost-effective manner.

For details about the reference site scenarios, see:

• Geometrixx Finance reference site scenario and walkthrough
  This implementation demonstrates the use-case scenario of an organization in the Financial Services Industry (FSI).
• Geometrixx Gov reference site scenario and walkthrough
  This implementation demonstrates the use-case scenario of a Government organization. 

The reference site allows you to explore and showcase the following key capabilities of AEM Forms.

• Easy creation of engaiging and responsive adaptive forms. 
• Enhanced form filling experience. 
• Adaptive documents to create interactive, personalized, and responsive documents that adapt to the device setting and layout.
• Integration with Adobe Sign to securely sign and submit adaptive forms. 
  
• Advanced user data managing and processing capabilities. 
  
• Integration with Adobe Target to serve targeted recommendations and perform A/B testing to maximize the ROI from a form.
• Integration with Adobe Analytics to measure the performance of a form or a campaign and take informed decisions.

The reference site provides reusable assets that you can use as templates to create your own assets.

Before you begin to explore the reference site, you need to deploy and set up the reference site. Prerequisites to setup reference sites are:

• AEM Essentials
  AEM 6.2 quickstart, AEM Forms addon (AEMFD Package), and refsite packages
  See AEM Forms releases
• An SMTP server
  You can use any SMTP server, however, the implementation described below uses Apache James.
• PhoneGap account
  To build AEM Mobile app, a PhoneGap account is required. 
  To sign up for PhoneGap, see Adobe PhoneGap Build.
• Marketing cloud accounts
  Adobe Analytics and Adobe Target accounts are required if you want to generate reports and perform A/B testing.
  To sign up for Marketing cloud, see Adobe Marketing Cloud. 
• Adobe Sign developer account
  To use digital signing capabilities, Adobe Sign developer account is required.
  See Adobe Sign.

The following steps depict various installations, configurations, and integrations you need to perform for the reference site to be up and running.

Install AEM Forms along with Geometrixx Finance and Geometrixx Gov reference sites on OSGi as described in Install and deploy AEM Forms.

Geometrixx Gov and Finance refsites are AEM packages that you can install using package share. To learn more about how to use packages and package share, see How to Work With Packages.

The required packages are:

• For Geometrixx Finance: AEM-FORMS-6.2-FSI-REF-SITE
• For Geometrixx Gov: AEM-FORMS-6.2-GOV-REF-SITE
  

The following resources and artifacts are included in the reference site package.

For Geometrixx Finance:

For Geometrixx Gov:

After you have installed the packages and started the author and publish instances, visit the following URLs in your browser:

• http://[server]:[port]/geogov
• http://[server]:[port]/geofinance

If your installations are successful, you can see the Geometrixx Gov and Finance reference sites landing pages.

When you work with reference sites, automated emails are sent at multiple steps. For example, when you submit a form, you receive an acknowledgement email. Automatically sent emails require an email server with users and domain configured. Following sections describe how to configure an email server to make it work with AEM Forms. 

Perform following steps to configure Apache James email service so that it works with AEM Forms:

1. Configure Day CQ Link Externalizer configuration
2. Configure Day CQ mail service 
3. Configure Users in Email Server
4. Override default XSS configuration

In AEM, the Externalizer is an OSGI service that allows you to programmatically transform a resource path (e.g. /path/to/my/page) into an external and absolute URL (for example, http://www.mycompany.com/path/to/my/page) by prefixing the path with a pre-configured DNS. See Externalizing URLs. 

Perform the following steps on both author and publish instances:

Reference site implementation requires emails to be sent to sample users when they fill and submit forms. Configuring Day CQ Mail Service lets you provide SMTP server details to send automated emails to customers. See Configuring Email Notifications.

Perform the following steps to configure mail service on the publish instance:

Perform the following steps on your email Server, such as Apache James.

Geometrixx Finance email templates contain personalized links in emails. These links have placeholder as ${placeholder}. These placeholders are replaced by actual values before sending emails. The default XSS protection configuration for AEM does not allow curly braces ({ }) in the URL in HTML content. However, you can override the default configuration by performing the following steps on publish instance:

After configuring the SMTP server, try to fill a form using the Sarah Rose persona and save it as a draft. When you save as draft, you get an option to receive the draft using email. On clicking the Send Email button, if you receive an email with a link to the draft of the application, your email configuration is successful. Ensure that you log in using Sarah's credentials to see the draft.

When you install the reference site packages, Geometrixx Gov and Finance mobile apps are also added. The AEM Mobile apps include the entire user experience of the reference site desktop versions on a mobile device. To build mobile applications, configure a PhoneGap account in the cloud services section under AEM Tools. A PhoneGap account is required to build your mobile app. 

To configure PhoneGap Build cloud service:

1. In the top-left corner, click Adobe Experience Manager > Tools > Deployment > Cloud Services.
2. Click Configure Now under PhoneGap Build. 
3. In the Create Configuration dialog, provide a title and name for the configuration and click Create.
4. In the PhoneGap Build Configuration dialog provide your account settings, and click Ok. 
   The PhoneGap Build Configuration dialog lets you test your connection. 

Perform the following steps to add the build configuration in reference site mobile apps:

After you configure your PhoneGap Build service, you can build the reference site mobile app. To build and understand AEM Mobile apps, see Building Mobile Applications. 

To install PhoneGap mobile application, see PhoneGap Documentation.  

For building mobile application, link externalizer configuration is required. See Configure Day CQ Link Externalizer Configuration.  

To generate reports and analyze performance of adaptive forms, marketing cloud integration is required. Following sections describe how to configure Adobe Analytics so that it works with AEM Forms. 

• To integrate Adobe Analytics with Reference Sites, see Configure Analytics. 
• To integrate Adobe Target with Reference Sites, see Configure Target. 

AEM Forms integration with Adobe Analytics allows you to monitor and analyze how your customers interact with your forms and documents. It helps you identify and fix problem areas and increase conversion rate.

To experience this functionality in reference site, configure your Analytics account as described in Configuring analytics and reports.

To generate a report, seed data is shipped with the reference sites. Before you use seed data: 

1. Ensure that Geometrixx Finance and Geometrixx Gov analytics configurations are available in the AEM Cloud Services. You can find cloud services in:
   • Tools > Deployment > Cloud Services.
     URL: http://<host>:<port>/libs/cq/core/content/tools/cloudservices.html
   • In the Cloud Services page, under Adobe Analytics section, click Show Configurations. You can see Geometrixx Finance and Geometrixx Gov configurations available. Click to open the configuration. In the configuration page, click Edit. Provide a valid username and password and click Ok. Create a framework as described in the Configuring Analytics and Reports document linked above.
     
2. Navigate to http://<host>:<port>/system/console/configMgr
   
   • In the Web Console Configuration page, find and click AEM Forms Analytics Configuration.
   • In the SiteCatalyst Framework field of the AEM Forms Analytics Configuration dialog, select geometrixx-finance(geometrixx-finance) or geometrixx-gov(geometrixx-gov).
   • Click Save and let the page refresh.
3. Navigate to forms manager. URL: http://<host>:<port>/aem/forms. 
   
   • Open the Geometrixx Finance or Geometrixx Gov folder, and select the form for which you want to see the report.
   • Click Enable Analytics in the Actions Toolbar. 

After you have enabled analytics for the form, click Analytics Report. You can see a blank report generated. After a blank report is generated, you have to provide seed data shipped with refsite package to generate analytics report. To use the seed data file, navigate to CRXDE (URL: http://<host>:<port>/crx/de). Perform the following steps to use the seed data:

1. In the address browser of CRXDE lite, type: 
   • For Credit Card: /apps/geometrixx-finance/demo-artifacts/analyticsTestData/Credit card Analytics Test Data.
   • For Home Mortgage: /apps/geometrixx-finance/demo-artifacts/analyticsTestData/Home Mortgage Analytics Test Data.
   • For Geometrixx Gov: /apps/geometrixx-gov/demo-artifacts/analyticsTestData/Child support service 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,
   • For credit card application, navigate to: /content/dam/formsanddocuments/geometrixx-finance/cc-app/jcr:content/analyticsdatanode/lastsevendays
   • For home mortgage application, navigate to: /content/dam/formsanddocuments/geometrixx-finance/hm-app/jcr:content/analyticsdatanode/lastsevendays
   • For Geometrixx Gov, navigate to: /content/dam/formsanddocuments/geometrixx-gov/child-support/css/jcr:content/analyticsdatanode/lastsevendays
     
6. In the analyticsdata field under Properties, paste the copied content of the test data file.
   

In the forms manager, select the form for which you have enabled analytics, and click Analytics Report in the Actions Toolbar.  

The reference site showcases the integration of AEM Forms with Adobe Target that allows you to include targeted and personalized content in adaptive documents. It also enables creating A/B tests for adaptive forms.

To experience the integration in the reference site, do the following to configure Target in AEM:

1. Access http://<hostname>:<port>/libs/cq/core/content/tools/cloudservices.html.
2. In the Adobe Target section, click Show Configuration and then the + icon to add a new configuration.
3. In the Create configuration dialog, specify a Title and optionally a Name for the configuration. And click Create. The Edit component dialog for the configuration opens.
4. Specify your Client Code, Email and Password associated with your Target account.
5. Click Connect to Adobe target. Once the Target account is configured successfully, you need to create a framework.
6. Go to http://<hostname>:<port>/system/console/configMgr.
7. Click AEM Forms Target Configuration.
8. Select a Target Framework.
9. In the Target URLs field, specify the URL to AEM Forms. For example: http://<hostname>:<port>
10. Click Save.

Perform the following steps to configure A/B Testing. Following example uses the Application for Credit Card scenario.

Integrating Adobe Sign with AEM Forms lets you digitally sign forms that you can submit. For configuring Adobe Sign to work with AEM Forms, see:

• Configuring Adobe Sign services in AEM Forms
• Enabling Adobe Sign services in AEM Forms

By default, Adobe Sign panel is hidden so that users without Adobe Sign developer account can use reference site adaptive forms for understanding AEM Forms functionality. If you have an Adobe Sign account and it is properly configured to work with AEM Forms, you can unhide the Adobe Sign panel using the rule editor.

Perform the following steps to unhide the Adobe Sign panel:

1. Open the adaptive form in authoring mode.
   
2. Select a component, and tap .
   You can see all the rules listed in the side-panel.
   
3. In the side-panel, look for and select Review & Sign with a green dot next to it. When you select Review & Sign, you can see a rule under Title and Content columns on the right-side.
   
4. Select Review & Sign - Hide rule and click Delete.  

To experience and execute the steps which require process management capabilities of AEM Forms Workflow, you need an AEM Forms JEE setup. Choose an appropriate document according to your application server and installation type from the Installing, Upgrading, and Clustering AEM Forms on JEE section on AEM Forms help landing page.

To use AEM Forms Workflow capabilities, see:

1. Configure LiveCycle client SDK component
2. Configure ContentRepositoryConnector service
3. Reference site configuration
   

LiveCycle SDK component lets you seamlessly invoke AEM Forms Document Services from within AEM web apps and workflows. Configure LiveCycle client SDK component in AEM Forms on OSGi to communicate and invoke document services available on AEM Forms on JEE. See AEM LiveCycle Connector.  

To configure the component, perform the following steps in the publish instance:

1. Navigate to the AEM Web Console Configuration page at http://<hostname>:<port>/system/console/configMgr.
2. Locate the Adobe LiveCycle Client SDK Configuration component.
3. Click the Edit icon to edit the configuration.
4. Specify the server URL, username, and password for AEM Forms on JEE server.
5. Click Save.

After the LiveCycle Client SDK component is configured, open http://[server]:[port]:/system/console/bundles. In the Adobe Experience Manager Web Console Bundles page, restart the following bundles:

• Geometrixx Finance Util Bundle
• AEM Forms Geometrixx Gov Bundle
  

There is a one to one mapping between an author instance and a publish instance. ContentRepositoryConnector service lets AEM Forms JEE server update application submission metadata on publish instance. 

1. On AEM Forms JEE, go to http://<hostname>:<port>/adminui.
2. Navigate to Services > Applications and Services > Service Management.
3. In the list of services, click ContentRepositoryConnector : 1.0.
4. In the Configuration tab, select Named User from the Run As drop-down list.
5. In the Experience Management Server URL, specify the path to the CRX server. For example: http://<hostname>:<port>/lc/crx/server/
6. Specify admin in the CRX user field.
7. Specify admin in the CRX Password field.
8. Click Save.

Perform the following steps on publish instance:

1. Go to OSGi Configuration at http://<hostname>:<port>/system/console/configMgr.
2. Search and click:
   
   • Geometrixx Gov Configuration for Gov refsite.
     
   • Geometrixx Finance Configuration for Finance refsite.
     
3. In the configuration dialog, check Enable JEE server configuration. It enables application approval through AEM Forms JEE server workflow. If you disable it, applications are approved using the dashboard.
   
4. Click Save.

If the AEM Forms JEE is properly set up and configured, you can see workbench processes in the adminui (http://[server]:[JEEport]/adminui) . In the adminui home, navigate to Services > Forms Workflow > Forms Workflow.

You can see Active status for the processes you created.

With AEM, you can allow your customers to log in using their Facebook and Twitter accounts. To allow this, you need to enable authentication handler and create Facebook and Twitter applications as described in Social Login with Facebook and Twitter.

Now you are all set to explore the reference site. For more information about reference site workflow and steps, see:

• Geometrixx Finance reference site walkthrough.
• Geometrixx Gov reference site walkthrough.