Ogledujete si pomoč za različico :

Overview

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:

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.

  • Integration with Adobe Sign to securely sign and submit adaptive forms. 
  • Integration with Adobe Sign to securely sign and submit adaptive forms. 

Opomba:

Reference site provides XML files with seed content to help you demonstrate the reference site scenario. These XML filenames and their content are in English and their localization is not supported. If you localize the XML filenames, the ECMA script programmatically fetches the localized filename using Java API, which does not match with the expected English filename resulting in error. To resolve the exception, rename the English XML files to the localized filename and manually localize their contents.

Steps and prerequisites to set up reference sites

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.

Step

Prerequisite

Notes

Install AEM Forms

AEM 6.2 quickstart

AEM Forms add-on (AEMFD package)

Reference site packages

-

Configure Email Server

Apache James Email Server

Reference Site use cases deliver emails for different transactions. The email delivery mechanism requires SMTP server. Apache James is an open source email server which you can use to deliver emails.

Configure PhoneGap service to build the AEM Mobile app PhoneGap account Reference site consists AEM Mobile App project which needs a PhoneGap account for building and deploying the app.

Integrate Marketing Cloud

Adobe Analytics and Adobe Target accounts

If you performed all the steps above and did not face an issue, your simple configuration using AEM Forms on OSGi is complete. You can integrate Analytics and Target to generate reports. Integration with Analytics and Target is the next part of the reference site configuration. 

Integrate Adobe Sign

Adobe Sign developer account

To use Adobe Sign with AEM Forms

Configure AEM Forms JEE (Optional)

AEM Forms JEE setup

If you have AEM Forms configured on JEE, you can link the OSGi configuration to use AEM Forms workflow capabilities. When you use AEM Forms Workflow capabilities, you can:
  • Create tasks and processes in Workbench, and link them with the application forms.
  • Process submissions using the AEM Forms Workspace (HTML Workspace).
  • Create a field-worker story, and realize it using the AEM Forms app.
Enable login through social accounts - You can let users log in on reference sites using social accounts such as Facebook or Twitter account.

Install AEM Forms

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

Opomba:

URLs for resources are slightly different if you are using AEM Forms on OSGi instead of AEM Forms on JEE. For example,

  • For AEM Forms on OSGi, URL to access AEM homepage is http://<host>:<port>.
  • For AEM Forms on JEE, URL to access AEM homepage is http://<host>:<port>/lc/aem

Similarly, you can access the AEM forms and documents.

  • For AEM Forms on OSGi, URL to access forms and documents is http://<host>:<port>/aem/forms.
  • For AEM Forms on JEE, URL is http://<host>:<port>/lc/aem/forms

Installing Reference Site packages

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
Reference site packages on package share
Reference site packages on package share

Reference site package contents

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

For Geometrixx Finance:

Content

Description

/apps/geometrixx-finance

Contains custom components, layout, and templates used in the reference site.

/content/geometrixx-finance

Contains Geometrixx finance web pages.

/content/dam/geometrixx-finance

Contains all the resources and assets, such as icons, images, and banners, used in the reference site.

/etc/designs/geometrixx-finance

Contains all the client libraries, including CSS and JavaScript, for the reference site.

/home/users/geometrixx/grios

 

Contains a demo user, Gloria Rios.

 

/home/users/geometrixx/jjacobs

 

Contains a demo user, John Jacobs.

 

/home/users/geometrixx/srose@geometrixx.info

 

Contains a demo user, Sarah Rose.

 

cq-geometrixx-finance-adaptiveform-pkg.zip

A package containing the credit card and mortgage application used in the reference site. The credit card application is an adaptive form that you can use as a template and extend to create another adaptive form. Similarly, a mortgage application is an adaptive form that you can use to create another form. 

cq-geometrixx-finance-layout-pkg.zip

A package containing a custom form view layout of the credit card application form on mobile devices. You can apply this layout on any other adaptive form.

cq-geometrixx-finance-content-pkg.zip

A package containing email templates and a welcome kit. The welcome kit is an interactive adaptive document, which you can use as a template to create your own adaptive document.

For Geometrixx Gov:

Content

Description

/apps/geometrixx-gov

Contains custom components, layout, and templates used in the reference site.

/content/geometrixx-gov

Contains Geometrixx Gov web pages.

/content/dam/geometrixx-gov

Contains all the resources and assets, such as icons, images, and banners, used in the reference site.

/etc/designs/geometrixx-gov

Contains all the client libraries, including CSS and JavaScript, for the reference site.

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.

Configure Email Server

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

Configure Day CQ Link Externalizer 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:

  1. Go to OSGi Configuration at http://<hostname>:<port>/system/console/configMgr.

  2. Find and click Day CQ Link Externalizer configuration.
    The Day CQ Link Externalizer dialog opens for editing the configuration.

  3. In the Day CQ Link Externalizer dialog, in the Domains field:

    • On the author instance, specify a publish URL that can be accessed from an external system. For example, a hostname or a publishing web server.
    • On the publish instance, specify the author URL.
  4. On both author and publish instances, ensure that the local server URL is specified in the Domains field.

  5. Click Save. Wait for a while for all services to restart.

Configure Day CQ Mail Service

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:

  1. Go to OSGi Configuration at http://<hostname>:<port>/system/console/configMgr.

  2. Find and click Day CQ Mail Service to open it for configuration.

  3. Provide SMTP server hostname and port values.

    Opomba:

    If you are running Apache James or any other SMTP server, provide the hostname of the machine and port on which server is running.

  4. Click Save.

Configure Users in Email Server

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

  1. Configure the email server domain as geometrixx.info.

  2. Create the following users accounts:

    • Sarah Rose - srose@geometrixx.info
    • John Doe - jdoe@geometrixx.info
      Create John Doe for Geometrixx Finance only. 

    To add users in Apache James, see Creating User Accounts

Override default XSS configuration

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:

  1. Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.

  2. Open /apps/cq/xssprotection/config.xml.

  3. In the common-regexps section, modify the onsiteURL entry as follows and save the file.

    <regexp name="onsiteURL" value="([\p{L}\p{N}\\\.\#@\$\{\}%\+&amp;;\-_~,\?=/!\*\(\)]*|\#(\w)+)"/>

     

Opomba:

Curly braces ({ }) are included as accepted characters in the URL in HTML content.  

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.

Configure PhoneGap Service to build the AEM Mobile app

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:

  1. In the author instance, navigate to Adobe Experience Manager > Mobile

  2. Open the Geometrixx Gov app or Geometrixx Finance app. 

  3. In Manage Cloud Services panel, click +.

  4. In the Add Cloud Services page, select PhoneGap build and click Next.

  5. In the Create or Select section, select a configuration that you created and click Submit.

    In the Create or Select section, you can also create a new configuration. 

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.  

Integrate Marketing Cloud

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. 

Configure Analytics

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.  

Configure Target

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.

Configure and Demonstrate A/B Testing

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

  1. Start the author quickstart with the jvm argument –Dabtesting.enabled=true to enable A/B testing on the server.

  2. In the author instance, navigate to Forms & Documents.

    URL: http://<server>:<port>/aem/forms.html/content/dam/formsanddocuments

    If the AEM instance is running on JBoss, started as a service from turnkey, in jboss\bin\standalone.conf.bat file, add -Dabtesting.enabled=true parameter in the following entry:

    set "JAVA_OPTS=%JAVA_OPTS% -Dadobeidp.serverName=server1 -Dfile.encoding=utf8 -Djava.net.preferIPv4Stack=true -Dabtesting.enabled=true"

    Click to open Geometrixx Finance or Geometrixx Gov folder.

  3. Select an adaptive form, for example, Application For Credit Card.  

  4. Click Configure A/B Testing in the actions toolbar when you select the adaptive form. For small displays, you can see the option by clicking horizontal ellipsis in the actions toolbar. 

  5. Specify an activity name for the A/B Test.  

  6. 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. The audience list is populated from the configured Target server.

  7. Provide values for Experience Distribution for experience A and Experience B. 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. 

  8. Click Configure. A dialog appears to confirm the creation of the A/B test.

  9. Click Done.  

  10. 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.

  11. Modify the form as desired to create a different experience than the default experience A.

  12. Go to the Forms and Documents UI, select the form, click More, and select Start A/B Testing.

  13. Now open the form in chrome browser several times using the following url:
    http://<hostname>:<port>/content/dam/formsanddocuments/geometrixx-finance/cc-app/jcr:content?wcmmode=disabled

    Opomba:

    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.

  14. 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.

  15. Open CRXDE Lite and take a back-up of the following file: /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js

  16. Replace the content of the above mentioned file with the content of the following file: /apps/geometrixx-finance/demo-artifacts/targetreport.js

    Opomba:

    These changes are only for the demo purpose. Ensure that you restore the file contents after completing this procedure.

    Refresh the report you generated and review the updated report.

  17. To end the A/B test, click End A/B test button on the reporting dashboard.

    A dialog prompts you to declare an experience. Choose a winner and confirm to end the A/B test.

Integrate Adobe Sign

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:

Opomba:

Adobe Sign configuration is shipped with reference site package. Ensure that in Cloud Services, you edit the Adobe Sign configuration and provide valid Adobe Sign developer account credentials.

Enable Adobe Sign panel

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.  

Configure AEM Forms JEE server (Optional)

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

Configure LiveCycle client SDK component

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

Configure ContentRepositoryConnector service

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.

Reference site configuration

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.

Enable login through social accounts

Opomba:

Social login integration is applicable for Geometrixx Finance reference site only. 

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.

Next step

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

Za ta izdelek je bila izdana neprenosljiva licenca za priznanje avtorstva, nekomercialno uporabo in skupno rabo pod enakimi pogoji 3.0  Objav v storitvah Twitter™ in Facebook ne urejajo pogoji pogodbe Creative Commons.

Pravna obvestila   |   Pravilnik o zasebnosti v spletu