Experience League | Image

Modernize legacy forms using machine learning and Automated Forms Conversion

Table of Contents

Lab Overview

In this lab you will learn how to use Automated Forms Conversion service by Adobe Experience Manager Forms to accelerate digitization and modernization of data capture experience through automated conversion of legacy PDF forms to adaptive forms. The service, powered by Adobe Sensei, automatically converts your PDF forms to device-friendly and responsive HTML5 based adaptive forms. You will learn to generate adaptive forms with consistent styling, layout, and field validations as per your organization's needs.

Key Takeaways

  • Convert legacy forms at scale through reduced manual effort with AI
  • Automatically generate consistent styling, layout, and field validations
  • Optimize digital form inventory with reusable form fragments

Prerequisites

  • Adobe Experience Manager 6.5 Forms(add-on)
  • Automated Forms Conversion service package
  • Java 11
  • Adobe Acrobat DC Pro
  • Chrome browser
  • JSON editor Chrome plugin

In-Product help dialogs

Certain in-product help dialogs may be displayed in Adobe Experience Manager UI during the course of the lab. Follow the below instructions to dismiss the dialogs.

  1. Product Navigation dialog

    Product navigation dialog

    To dismiss the dialog, check Don't show this again and click Close

  2. Form Authoring modes help dialog

    Adaptive Form authoring modes dialog

    To dismiss the dialog, click Skip > Don't show again

Configure Service URL

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Click Tools icon in the left navigation.

    Click tools

  3. Navigate to Cloud Services > Automated Forms Conversion configuration.

    Navigate to Cloud Services

  4. Click global and select SummitConfig-custom config.

  5. Click Properties to open property sheet.

    Open property sheet

  6. Change the Service URL field from "https://flmorch-va7.cloud.adobe.io" to "https://aemformsconversion.adobe.io".

    Change service URL

    Change service URL

  7. Click Save&Close present on the top right side of screen.

    Change service URL

  8. Now, select SummitConfig config.

  9. Click Properties to open property sheet.

    Open property sheet

  10. Change the Service URL field from "https://flmorch-va7.cloud.adobe.io" to "https://aemformsconversion.adobe.io".

    Change service URL

    Change service URL

  11. Click Save&Close present on the top right side of screen.

    Change service URL

Lesson 1 - Leverage AI to convert PDF form to Adaptive Form

Objective

  1. Apply AI/ML to convert PDF form to Adaptive form
  2. Auto-generate consistent layout, styling, and field validations
  3. Optimize digital form inventory through reusable form fragments

Lesson Context

Automated Forms Conversion service automates various stages of manual form creation to accelerate the form digitization and modernization end to end process. It applies AI/ML to extract form structure from input form by discerning the text and fields, identify compound widgets, and semantically groups them into field groups and sections. Reusable form fragments are extracted by grouping fields into logical sections. Common layout and style are applied to generated adaptive forms to provide consistent branding and appearance. Field validations are automatically applied for different field types. E.g. email, social security number, zip code fields. Adobe Analytics is enabled automatically on all forms to help obtain user engagement.

Exercise 1.1 - Upload and convert PDF form

Let us upload the PDF form and start the conversion:

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Navigate to Forms > Forms & Documents.

    Navigation Forms

    Navigation Forms and Documents

  3. Click Create > Folder. Provide title as Summit Demo, click Create.

    Create folder

    Provide folder name

  4. Navigate inside Summit Demo folder. Click Create > File Upload and select LoanApplication.pdf.

    File upload

  5. Click Open > Upload and wait for form to be uploaded in the folder.

    Upload LoanApplication.pdf

    Uploaded LoanApplication.pdf

  6. Using navigation at the top, goto Forms & Documents folder.

    Navigate to Forms & Documents folder

  7. Select Summit Demo folder and click Automated Forms Conversion.

    Select Summit Demo folder

  8. The Configuration Settings dialog appears

  9. Select Configuration as SummitConfig

  10. Check Extract Fragments and click Start Conversion.

    Trigger conversion

  11. As conversion is triggered, Conversion in progress message is displayed on the folder.

    Conversion in progress

  12. Refresh the page after a couple of minutes to check conversion progress. Once the conversion is complete, open the Summit Demo folder.

    Conversion complete

  13. Open the output folder. The adaptive form and auto-generated JSON schema are present.

    Navigate inside output folder

    Adaptive Form, fragments and schema

  14. Open the fragments folder. The auto-generated fragments and associated JSON schema are present.

    Fragments folder

Exercise 1.2 - Preview your adaptive form

Let us preview the adaptive form generated automatically.

  1. Navigate to Summit Demo > output folder. Select LoanApplication adaptive form.

    Navigate to output folder

    Select adaptive form

  2. Click Edit from top toolbar to launch adaptive form editor in a separate tab.

    Open adaptive form authoring

  3. Notice the fragments generated on page 1 in the right panel.

    Fragments

  4. In the left navigation bar, click Data sources icon to open form schema.

    Open data sources

  5. Click Expand All to view data bindings generated for all fields and fragments.

    Expand data bindings

  6. You may make necessary modifications to the adaptive form in authoring environment, if required.

  7. Close the adaptive forms editor.

  8. With the adaptive form selected in the previous tab, click Preview > Preview as HTML to launch adaptive form runtime experience for end-users.

    Preview adaptive form

  9. Scroll down to Date of Birth field, click date picker to select a date.

    Date of birth field

    open date picker

  10. Navigate to different pages by clicking on page level panels.

    Page 2

  11. Notice largely all fields including tables have been extracted and identified automatically.

  12. Resize the browser to see how adaptive form adapts itself to various device form factors.

    Resize browser

    Navigate different tab with resized browser

  13. Close preview tab of the form.

Lesson 2 - Review and Correct to make necessary updates after automated conversion

Objective

Update auto-generated form using easy to use Review and Correct UI

Lesson Context

The pattern detection capabilities of AI/ML networks is limited by their training data. Detection accuracy increases over time as more data is added over time to the training corpus. So AI/ML-based solutions help increase efficiency and reduce time to value but the finished output may require some human verification and update. Form authors can use the Review editor to review the automated conversion, fix errors, and provide helpful cues to conversion network to improve the conversion process. This editor lets users review, add, or update corrective steps using the familiar PDF form layout. Form author sends the form for conversion after completing all updates. The final adaptive form with updates is returned back in the output folder location.

Exercise 2.1 - Review and Correct

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Navigate to Forms > Forms & Documents.

    Navigation Forms

    Navigation Forms and Documents

  3. Select Summit Demo RNC folder and Click Automated Forms Conversion in top navigation.

    Summit Demo RNC folder Conversion

  4. The Configuration Settings dialog appears

  5. Select Configuration as SummitConfig. Click Start Conversion.

    Summit Demo RNC folder Trigger Conversion

  6. Refresh the page after a couple of minutes to check conversion status. If conversion is still in progress, wait for couple of minutes and then again refresh the page. Proceed with the exercise only after conversion is completed.

  7. Navigate to the Summit Demo RNC folder and select the LoanApplication.pdf PDF form.

    Navidate to Summit Demo RNC folder

    Select LoanApplication PDF form

  8. Click Review Conversions in top navigation to launch Review editor.

    Launch Review UI

  9. Scroll down to Gender field and select the field.

    Gender field

  10. Double click Gender field to open property sheet and in options add text "1=F".

    Gender property sheet

  11. Under Date moved there, the From and To fields are incorrectly detected as text field whereas they should be date fields. Such errors are inadvertent and based on the context around the field which humans can understand better than algorithmic detection.

    From field

  12. Double click the From field to open property sheet and select Type as Date from the dropdown.

    From field property sheet

  13. Similarly, double click To field and update field Type to Date.

  14. Click Save and Convert to save changes and trigger the creation of adaptive form based on recent changes.

    Save and convert

    Form converting after review

Exercise 2.2 - Preview the generated Adaptive Form

Let us preview the adaptive form generated after review and corrections.

  1. Navigate to Summit Demo RNC > output folder. Select loanapplication.pdf adaptive form.

  2. Click Preview > Preview as HTML to launch adaptive form runtime experience for end-users.

    Summit Demo RNC preview

  3. Text fields like First Name allow alphanumeric input.

  4. Scroll down to Gender field. Two options will be visible in gender field.

  5. Scroll down to Date moved there > From and To fields.

    Date moved there from and to fields

  6. Use the date picker to select dates.

    Use date picker

    Use date picker

  7. So we can see that Review UI corrections were successfully applied in the adaptive form.

  8. Close preview tab of the form.

Lesson 3 - Enhance conversion through the meta model

Objective

Extend the default meta-model to improve field detection and validations

Lesson Context

Default Meta model provides a structured configuration to inform helpful cues during automated forms conversion. The meta model JSON file uses standard vocabulary to defines patterns and validations for various fields. During conversion, the validations defined in the meta model are automatically applied to detected fields. As an organization's needs evolve, default meta model can be extended to add vocabulary and validations.

Exercise 3.1

Extend default meta-model to provide custom vocabulary and add field validations in generated Adaptive Form as per your organizational requirements.

Upload custom meta-model and update configuration

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Navigate to Forms > Forms & Documents.

    Navigation Forms

    Navigation Forms and Documents

  3. Open the Meta Model folder.

    Meta model folder

  4. Default global schema meta-model is present in this folder as global.schema.json.

    Global default meta model

  5. In practice, the administrator would download global meta-model and customize as per organizational needs. For purpose of the lab, a ready to use extended meta-model file is provided.

    Download meta model

  6. Open the myorg-metamodel.schema.json in Notepad++.

  7. Following section from line 22 onwards provides configuration to:

    1. Detect BSB account number fields and add a validation clause to ensure data provided consists of 10-digits. For any other data input, the field validation fails and displays the appropriate error message.
    2. Detect Date of Birth field and add display and validation clauses to accept input in DD MMMM, YYYY format.

Do not make changes to myorg-metamodel.schema.json. Detailed documentation to extend meta-model JSON would be provided later.

          "properties": {
            "BSB": {
              "type": "string",
              "pattern": "/\\d{10}/",
              "aem:affKeyword": [
                "Provide any BSB/account no."
              ],
              "description": "BSB",
              "aem:afProperties": {
                "validatePictureClause": "\\d{10}",
                "validationPatternType": "custom",
                "validatePictureClauseMessage": "BSB/account no. must be atleast 10 digit long"
              }
            },
            "birthDate": {
              "type": "string",
              "format": "date",
              "pattern": "date{DD MMMM, YYYY}",
              "aem:affKeyword": [
                "DOB",
                "Date of Birth"
              ],
              "description": "Date of birth in DD MMMM, YYYY",
              "aem:afProperties": {
                "displayPictureClause": "date{DD MMMM, YYYY}",
                "displayPatternType": "date{DD MMMM, YYYY}",
                "validationPatternType": "date{DD MMMM, YYYY}",
                "validatePictureClause": "date{DD MMMM, YYYY}",
                "validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
              }
  1. Close Notepad++.

  2. In a browser window, navigate to Forms > Forms & Documents.

    Navigation Forms

    Navigation Forms and Documents

  3. Click Create > Folder.

    Create folder

  4. Provide folder name as Custom-Metamodel. Click Create.

    Provide folder name

  5. Navigate inside Custom-Metamodel folder.

  6. Click Create > Upload myorg-metamodel.schema.json in this folder.

    File upload

    Upload custom meta model

  7. Click Adobe Experience Manager icon on the top left to navigate to the home screen.

    Click AEM logo

  8. Click Tools icon in the left navigation.

    Click tools

  9. Navigate to Cloud Services > Automated Forms Conversion configuration.

    Navigate to Cloud Services

  10. Click global and select SummitConfig-custom config.

  11. Click Properties to open property sheet.

    Open property sheet

  12. Click browse to open picker for Custom Meta-model.

    Launch asset picker

  13. Navigate to Assets > formsanddocuments > Custom-Metamodel folder and select myorg-metamodel.schema.json. Click Select.

    Select custom meta model

  14. Click Save & Close in the top right menu to save the configuration.

    Save properties

Convert form using custom meta-model

  1. Click Adobe Experience Manager icon on the top left and navigate to Forms > Forms & Documents.

    Click AEM logo

    Navigate to Forms

    Navigate to Forms & Documents

  2. Click Create > Folder.

    Click Create folder

  3. Name the folder Summit Form CMM and click Create.

    Provide folder name

  4. Open the Summit Form CMM folder.

    Navigate inside folder

  5. Click Create > File Upload to upload LoanApplication.pdf in the folder.

    Select file

    Upload file

  6. Navigate up to Forms & Documents.

    Navigate to Forms & Documents

  7. Select Summit Form CMM folder, click Automated Forms Conversion to trigger conversion.

    Trigger conversion

  8. In Configuration Settings dialog

    1. Select Configuration as SummitConfig-custom.
    2. Check Extract Fragments and click Start Conversion.

    Conversion dialog

  9. As conversion starts, Conversion in progress message is displayed on the folder.

    Conversion triggered

  10. Refresh the page after a couple of minutes to check the conversion progress. Once conversion is complete, navigate inside Summit Form CMM folder.

    Conversion complete

    Navigate inside folder

  11. Navigate inside output folder. The Adaptive form and auto-generated JSON schema is present.

  12. Select the adaptive form and click Edit to open the form editor.

    Launch adaptive form authoring

  13. In right panel, double click fragment under Personal Details - Person 1.

    Fragment 1

  14. Click Edit in the toolbar to open fragment in form editing mode.

    Edit fragment

  15. Scroll down and double click Date of Birth field to open properties in the left panel.

    Date of birth field

  16. Collapse Basic properties and expand Patterns.

    Collapse Basic

  17. Notice display and validation pattern have been set as specified in the custom meta-model.

    Expand Patterns

  18. Click X on top to close property sheet.

  19. Scroll down in right panel and double click Provide any BSB/account no. field to open properties in the left panel.

  20. Notice the validation pattern has been set to 10-digits as specified in the custom meta-model.

    BSB field pattern

  21. Close both tabs for fragment and form authoring.

  22. In AEM UI, select the form and click Preview > Preview as HTML.

    Preview adaptive form runtime

  23. Scroll down to Date of birth field. Select a date using date picker and click outside the field.

    Select date

  24. Notice the date is formatted into DD MMMM, YYYY format.

    Date formatted

  25. Enter date as 10-10-2019 and click outside the field.

    Enter incorrect date format

  26. Notice the error message is displayed.

    Date error message

  27. Scroll down to Provide any BSB/account no. field and enter less than 10 digits.

  28. Click outside the field or tab out. Notice error is displayed.

    Incorrect BSB number

  29. Now provide a 10-digit number and tab out. Notice the data is accepted fine.

    Correct BSB number

  30. Close the Adaptive form tab.

Lesson 4 - Use input XFA form as Document of Record template

Objective

Form author should be able to generate Document of Record containing submitted data with the same layout as the input form

Lesson Context

Adaptive forms provides end users with an online responsive device friendly data capture experience. The submitted data can be easily integrated into down stream processing and storage systems. In regulated industries like Public Sector, Financial Services, and Healthcare compliance requirements may mandate archival of submitted data in the layout and format of original traditional form. Thus it is important to be able to seamlessly merge the submitted data with the original form template and provide the document of record. Adaptive forms provides the ability to either automatically generate the document of record based on a default layout or a custom XFA template layout. Thus, XFA input forms can be used as Document of Record template in the adaptive forms automatically generated by Automated Forms Conversion service.

Exercise 4.1

Configure XFA template as DoR template in auto-generated Adaptive Form and verify results.

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Navigate to Forms > Forms & Documents.

    Navigation Forms

    Navigation Forms and Documents

  3. Navigate to Summit DoR Demo folder.

  4. Select input XFA form XDP file WeFinanceApplicationForm, click Preview > Preview as HTML

    Select form

    Preview form

  5. The XDP form is displayed as HTML form in new tab. The form contains various type of form fields.

    Form preview

  6. Close preview tab.

  7. Unselect WeFinanceApplicationForm and navigate to output folder.

  8. For purpose of workshop, a pre-converted Adaptive Form is present. Select the adaptive form and click Properties.

    Select adaptive form

    Open form properties

  9. Navigate to Form Model tab

    Open form properties

  10. Expand Document of Record Template Configuration.

    Expand DOR properties

  11. Select Associate form template as the Document of Record template.

    Select form template option

  12. In Search dialog, enter WeFinanceApplicationForm, press Enter.

    Search template

  13. Select the form.

  14. Click Save and Close on the top right.

    Select template

  15. Select the adaptive form, click Preview as HTML.

    Preview adaptive form

  16. Enter First name, Last name and other data in the form.

    Fill data in form

  17. Click Summary panel. The form is automatically submitted and a link to the document of record with merged data is displayed.

    Form submission in Summary panel

  18. Click the link to open document of record in a separate tab.

    DOR displayed in new tab

Troubleshoot Section

If you are finding any problem regarding cloud configuration, pre converted form or summit package provided in the resources. Follow the below instructions to reinstall package provided in the resource folder.

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. In the left navigation bar, click tools icon to open tool.

    tool display

  3. Click on CRXDE Lite and crxde tool will open in new tab.

    crxde tool button crxde tool display

  4. Click on the package button provided in the top menu bar of crxde tool.

    crxde tool package button click

  5. In the search field type Summit_Demo and hit Enter. Select the Summit_Demo package.

    crxde tool search crxde tool summit_demo package select

  6. Click on the more button. Select uninstall from the dropdown. Uninstall dialog will appear and click on uninstall button to uninstall package.

    crxde tool summit_demo package uninstall crxde tool summit_demo uninstall dialog

  7. Click on the more button. Select delete from the dropdown. Delete dialog will appear and click on delete button to delete package. crxde tool summit_demo package delete crxde tool summit_demo delete dialog

  8. Click on the Upload package button in top menu, a dialog will appear. Upload the Summit_Demo.zip and click Ok. crxde tool package upload crxde tool package upload dialog

  9. Summit_Demo package will be visible in the content. Click on the install button provided on the right side of Summit_Demo.zip, a dialog will appear. Select the install button on the dialog to install package in AEM. crxde tool package install crxde tool package install dialog

  10. Close the upload package tab and refresh the AEM to see the expected changes.

If form conversion is taking too much time. Please go through the mentioned steps.

  1. Login to AEM http://localhost:4502/aem/start.html with username "admin" and password "admin".

  2. Navigate to Forms > Forms & Documents.

  3. Scroll down the folder you chose for conversion. If there is a Conversion in progress status on folder top right side and its been too long since you have started the conversion.

    Conversion in Progress Folder

  4. Navigate inside the folder. Note that the pdf would also be showing Converting status at top right side.

    Converting pdf file

  5. Navigate to the Output folder.

  6. If your Output folder is empty. Please wait because the conversion is still in progress.

    Output Folder Empty

  7. If your Output folder is not empty and an adaptive form, schema folder and fragment folder are present there. Then conversion has been completed, please ignore the Conversion in Progress status and continue with exercise.

    Output Folder Non-Empty

Next Steps

Your feedback is important as it helps us improve our offerings. To share your experiences and report feedback on the conversion service, you may join the beta program. Send a request to AEMBeta@adobe.com with the subject "Request to join Automated Forms Conversion service beta program" with below details:

  • Your name
  • Job title
  • Official email id
  • Organization name
  • Location

Additional Resources

AEM Forms documentation - https://www.adobe.com/marketing/experience-manager-forms.html

Automated Forms Conversion service - https://www.adobe.com/in/marketing/experience-manager-forms/automated-forms-conversion.html

Forms maturity model - http://bit.ly/FormsMaturityModel