Form Editor Improvements in AEM Forms
- Applies to:
- Experience Manager 6.4
- Experience Manager 6.5
- Topics:
- Adaptive Forms
CREATED FOR:
- Beginner
- User
AEM 6.3 introduces several new features and enhancements in this release to simplify the authoring experience of adaptive forms and documents. The enhancements help reduce your time to market and enable business users to work with forms and documents
Transcript
Hey guys, - in this video I would like to show you some - multi-authoring enhancements introduced in AEM 6.3. Forms that helps users to create, - structure and manage forms thereby creating a - better user experience. Make sure you are using - the AEM 6.3 version and have all the necessary - feature packs installed. Let’s get started.
I have an AEM 6.3 alter instance running on my local machine. From the homepage let’s - navigate to Forms. Notice that certain - capabilities of AEM Forms will be visible only with the - installation of feature packs. So if you do not see a certain - capability, double check to make sure you have - the right feature pack. Let’s click on Forms and Documents.
To better understand the - features let’s create a new form. Click on the Create button - from the top right corner and then select Adaptive Form.
You could see a list of - templates that are in-built with the feature pack. Let’s select the Simple - Enrollment template and then click next. Provide a name and title to - your form and then click done. Click Open to view your form.
Make sure you open the - form in preview mode. You can notice a simple form - which has a logo, form title and three sections to - collect user information. We have successfully created a form using an existing - template at this point.
Under Section One you - can notice three fields named Label 1, 2 and 3. Click on Label 3 and try to - input some values into it.
I’m going to list - different AEM solutions in this text box - separated by a space.
Add in AEM Sites, AEM - Assets and AEM Forms. In previous version of AEM, user could enter data - into a text field but there was not an - option for an end user to style their text to - make it look more readable or not an option to - style their text.
With AEM 6.3 by default - text box components accept only plain text, - however content author can enable rich text editing - mode for an end user. And let’s see how we can do this. Let’s switch from preview - mode to edit mode. Edit mode lets content - authors to easily identify all components and - containers in a form and make necessary changes. Click on the toggle side panel - option and you can see a list of components that - constitute our form on the right side under - Content section.
Pad a note for a form - is its Form Container, you can also notice the - different sections for the form and its nested components - with the current hierarchy. Let’s click on Label - 3 text component and then select the - settings option. On the left side you can - notice a configuration and settings I will elaborate - for the text component. Under the basic - settings you can notice the Allow Rich Text checkbox. Select the checkbox - and save your changes and then go back to - form preview option.
Let’s try to enter the - different AEM solutions again on Label 3 text field. You can notice the rich text - editing option for the text field.
If a user want to create - a bulleted list of items simply select all items and - click on the list option. You can navigate to - full screen option to find several other - styling options. For example let’s pick a - different color for the text. User can also select different - forms, select headers. Exit drop.
Minimize your text - edit screen to exit.
Another enhancement - introduced in AEM 6.3 is the capability - to autofill forms. Let’s switch to preview mode - and double check on the text field.
We do not see an option - to autofill the field. With AEM 6.3 content authors - can enable autofill capability for text boxes, email, - telephone components and adaptive forms to - autofill values for name, address, credit cards, - telephones and email from information stored in - the browser autofill settings. Let’s see how this could be done. Switch from preview mode to - edit mode and toggle side panel. Click on the Label 1 field and - select the settings option.
Change the Element and - Title name to ‘name’ for the first text field. Also check the enable autofill - option and then save your changes.
Switch to preview mode - to see your changes.
Double click on the name field and you should be able to see - the autofill option generated. You also need to make sure - that the autofill capability is turned on for the - browser you are using.
Let’s explore the new HTML5 - input type form field.
The second label field - we have in the form is a numeric box field. Let’s add two more fields - to forms under Section One. Click on the Drag - components here parses and add new components. Search for form and then - add the telephone component.
Similarly add an email - component to the form.
Select the numeric box component - and select the settings option.
Change the label to ‘Number’ and select the Use HTML5 - Number Input Type option and then save your changes.
Select the phone field and then - select the settings option. Select the Enable Autofill - option and then under Patterns you can select the - phone number type from the default three options - or create a custom type. Let’s select the US - Phone Number type. On selecting a particular - phone number type you can also notice the - display pattern type below.
Telephone component also - provides an in-built option to perform validation for - the user entered value. To do this, let’s click on - the validation pattern type and select the US - Phone Number pattern. Validation pattern regex - changes based on your selection and you can notice it below.
In-built validation - and display patterns allow current display patterns. Save your changes.
Click on the Email component - and select the settings option. Select the autofill - option and under Patterns you can notice the validation - pattern for the email field and then save your changes. Click on the preview mode - and let’s check how it looks. Let’s open the form on a mobile - device to see how it looks.
Let’s start filling out the form. Enter a name and then - click on the Number field.
Number is a HTML5 input type - field and when these fields are in focus on mobile - devices and tablets the keyboard displays - specific alphabets, numbers and characters upfront - that are commonly used to input information in the fields. For example the keyboard - for a numeric box primarily shows number - on the top row.
Let’s also see how it - looks for an email field. You can notice that the - characters that commonly used in an email like the - at sign, underscore and period are shown upfront.
Another minor enhancement to - speed up content authoring is the capability to edit - component title in line without having to open - the component settings.
Double click on the Label 3 field and you can easily change the - title to any value in line.
Content authoring can - also be done faster and with fewer mouse - movements and clicks using the keyboard - shortcuts for adaptive forms introduced in AEM 6.3. You can find the keyboard - shortcuts along with this video. -
Some of the major improvements for Adaptive Form Editor includes:
-
Autofill form fields
-
Rich Text for a text box component
-
Specialized input types for form fields
Experience Manager
- Overview
- Best practices to follow
- Setting up OKTA authentication with AEM Author
- Creating your first Adaptive Form
- 1 - Introduction and Setup
- 2 - Create Adaptive Form template
- 3 - Create form fragment
- 4 - Create Adaptive Form
- 5 - Configuring root panel and adding child panels
- 6 - Adding components to People panel
- 7 - Adding table to income panel
- 8 - Configuring assets panel
- 9 - Using custom functions and code editor
- Handling Form Submissions
- Useful Integrations
- Creating OSGi bundle
- Adaptive Forms
- Installing AEM Forms on Windows
- Installing 32 bit packages on Linux
- Prefill Service in Adaptive Forms
- Populate Adaptive Form using query parameters
- QR Code in AEM Forms
- Custom Submit in Adaptive Forms
- Captcha in Adaptive Forms
- Custom Functions in Rule Editor
- Embedding Adaptive Form in web page
- Creating array of strings
- Item Load Path in AEM Forms
- Using Set Value in XML in OSGI Workflow
- Using Set Value in JSON in OSGI Workflow
- Send Email Component in AEM Forms Workflow
- Generating DocumentOfRecord using API
- Displaying Inline Images
- Displaying DAM images inline
- Using GeoLocation API
- Using Transaction Reporting
- User Profile Data Integration in AEM Forms
- Microsoft Dynamics with AEM Forms
- Rule Editor Enhancements
- Restricting Access to Rule Editor
- Theme Editor Enhancements
- Form Editor Enhancements
- Automated Testing Of Adaptive Forms
- Automated Testing Of Adaptive Forms
- Integrating LDAP with AEM Forms
- Using Service User in AEM Forms
- Tagging and Storing DoR on Adaptive Form Submission
- Populating table with the results from Form Data Model Service Invocation
- Capturing workflow comments
- Storing Submitted Form Data in DB
- Inserting form attachment in DB
- Modify Data Source Configuration
- Override Form Data Model Properties
- Form Data Model Service in AEM 6.4 Workflow
- Handling Error Messages in Form Data Model Service Step
- Form Data Model Service in AEM 6.5.1 Workflow
- Form Data Model without Data Source
- Computed Form Data Model Element
- Setting up JDBC Data Source in AEM Forms
- JDBC Based Form Data Model
- Create Associations between 2 entities in Form Data Model
- Using Form Data Model’s invoke service in Rule Editor
- Post Binary Data to AEM DAM Using Form Data Model
- Creating Re-Usable Workflow Models
- Custom Process Step AEM Workflow
- Pre-Populating HTML5 Forms
- Form Data Model with Salesforce
- Adding Items Dynamically to Choice Component
- Fill a PDF form with ChatBot
- Core- Components based forms
- Select and assemble DAM folder content
- Prefilling adaptive form using form data model
- UI Tips and Tricks
- Customizing inbox
- Email form attachments
- Prefilling form with data and attachments
- Storing and Retrieving Adaptive Form
- Import data from pdf file
- Exporting Submitted Data in CSV Format
- HTML5 Forms
- AEM Forms and Acrobat Sign
- Introduction
- Set up SSL
- Create Acrobat Sign API Application
- Create Acrobat Sign Cloud Configuration
- Create Workflow to send document for signing
- Create and Configure Adaptive Form
- Configure Adaptive Form for single signer
- Configure Adaptive Form for two signers
- Configure Automated Forms Conversion Service
- Convert PDF Form into Adaptive Form
- Configure converted Adaptive Form
- Using XDP templates with Acrobat Sign
- Using Acrobat Sign helper methods
- Sign Multiple Forms
- Custom workflow steps
- Custom workflow component
- Variables in AEM Workflow
- Review form data
- Storing and Retrieving Form Data in MySQL DB
- Triggering AEM Workflow on PDF Form submission
- Trigger AEM workflow on Mobile Form Submission
- Querying Form Submissions
- Listing Custom Asset Types in Forms Portal
- AEM Forms With Marketo
- AEM Forms with Adobe Campaign Standard
- Welcome Kit
- Headless Forms API
- React App with Forms and Acrobat Sign
- Document Services
- Types of PDF forms
- Embed pdf in adaptive form
- PDF’s in carousel component
- Using Assembler Service in AEM Forms
- XDP Stitching with Assembler Service
- Using Watched Folder in AEM Forms
- Using Barcode Service in AEM Forms
- Using PDFG Service in AEM Forms
- Encrypt PDF with permissions password
- Using Output and Forms Service in AEM Forms
- Using xdp fragments in output service
- ECMA script to generate pdf with fragments
- Generating multiple pdf’s from one data file
- Generate PDF on Mobile Form Submission
- Generate PDF on Core Component based form submission
- Generate Interactive PDF from Mobile Form
- Generate Interactive DoR from Adaptive Form
- Configure Reader Extensions Credential
- Apply Usage Rights to PDF on XDP Rendition
- Apply Usage Rights to Uploaded PDF
- Certify Documents
- Assemble Form Attachments
- Useful Utility Services
- Forms Designer
- AEM Forms Workbench
- Interactive Communications for Print Channel
- 1 - Introduction
- 2 - Set up Tomcat
- 3 - Create Data Source
- 4 - Create Form Data Model
- 5 - Create XDP Layout using Forms Designer
- 6 - Create Document Fragment
- 7 - Create Print Channel Document
- 8 - Adding Content to Target Areas
- 9 - Configuring Line Chart
- 10 - Adding Table to Print Channel
- 11 - Using Watched Folder to Generate Documents
- 12 - Opening Agent UI on Form Submission
- Save and Retrieve Draft Letters
- Interactive Communications
- Using Batch API
- MultiSeries Charts
- Generate Print Channel Documents From Submitted Data
- Using Reducer Functions
- Two Column Layout in Print Channel Documents
- Using Table Component in AEM Forms Print Channel Document
- Generating Interactive Communications Document for Print Channel using Watch Folders
- Customize text editor
- Interactive Communications For Web Channel
- 1 - Introduction
- 2 - Set up Tomcat
- 3 - Create Data Source
- 4 - Create Form Data Model
- 5 - Creating Web Channel Document Template
- 6 - Creating Document Fragment
- 7 - Creating Interactive Communication Document
- 8 - Adding Text and Images
- 9 - Configuring Line chart
- 10 - Configuring Table
- 11 - Configuring Column Chart
- 12 - Configuring Pie Chart
- 13 - Delivery Of Web Channel Document
- Email Delivery of Web Channel Document
- Troubleshooting
- Document Services: Steps to troubleshoot DDX related issues
- Document Services: Steps to troubleshoot PDFA conversion issues
- Document Services: How to debug font related issue for Forms and Output Service
- Document Services: How to embed fonts for Forms and Output Service
- Document Services: How to enable performance logging to debug Forms and Output Service
- Document Services: How to increase aries transaction timeout for conversion of large files
- Document Services: How to run load tests using FormsIVS and OutputIVS
- Document Services: How to update custom XDPs and data files in FormsIVS and OutputIVS
- Document Services: Steps to enable verbose ORB trace
- Document Services: Steps to tweak bmc pool size for XMLFormService part1
- Document Services: Steps to tweak bmc pool size for XMLFormService part2
- Document Services: Steps to tweak parameters on JMX console
- Enable merging of large xml data files with template
- PDFG: How to change the transaction timeouts in PDFG
- PDFG: How to update CORBA timeout in PDFG
- PDFG: How to update the timeouts in PDFG
- PDFG: Steps to add PDFG user in windows server 2016
- PDFG: Steps to check and install 32 bit libraries and their dependencies
- PDFG: Steps to check folder permission on windows server 2016
- PDFG: Steps to enable strace on unix
- PDFG: Steps to install required 32bit Microsoft Visual C++ redistributables
- PDFG: Steps to run and interpret output of System Readiness Tool
- PDFG: Steps to troubleshoot acrobat specific issues
- PDFG: Steps to troubleshoot HtmltoPDF issues on windows
- PDFG: Steps to troubleshoot HtmltoPDF specific issues on unix(PhantomJS)
- PDFG: Steps to troubleshoot HtmltoPDF specific issues on unix(WebKit conversion)
- PDFG: Steps to troubleshoot multi user PDFG Conversion on unix
- PDFG: Steps to troubleshoot multi user PDFG Conversion on windows
- PDFG: Steps to troubleshoot OpenOffice specific issues on unix
- PDFG: Steps to troubleshoot OpenOffice specific issues on windows
- Document Security: How to apply policy created using document security module in Acrobat
- User Management: How to add users or groups in AEM Forms JEE
- User Management: How to increase UM Session timeout
- Workbench: Connecting workbench using https
- Workbench: Gathering Workbench logs from help menu
- Workbench: How to enable debug output for Workbench
- Workbench: How to tweak workbench memory parameters
- Workbench: How to tweak workbench performance parameters
- Designer: Dependency of Designer on C++ redistributable
- Designer: How to enable HTML Preview
- Designer: How to enable PDF Preview
- Designer: How to install Designer Patches
- JEE Foundation: How to change the value of entropy
- JEE Foundation: How to change transaction timeout of any service in AEM Forms JEE
- JEE Foundation: How to purge process records from the Job Manager table
- JEE Foundation: How to run process purge from command line
- JEE Foundation: Steps to bootstrap manually
- JEE Foundation: Steps to capture debug logs for mobile forms
- JEE Foundation: Steps to mitigate ForcedDisconnectException
- General: How to add management user for JBoss admin console
- General: How to capture HAR logs
- General: How to capture heap dumps of a JVM on a unix server
- General: How to capture heap dumps of a JVM on a windows server
- General: How to capture network logs
- General: How to capture Thread dumps of a JVM on a unix server
- General: How to capture Thread dumps of a JVM on a windows server
- General: How to generate a self signed certificate
- General: How to make web service call from HTML5 form
- General: Steps to enable debug logging for any classes in AEM Forms OSGI
- General: Steps to enable debug logging for any classes in JBOSS Application Server
- General: Steps to enable debug logging for any classes in Websphere Application Server
- General: Steps to enable SSL for AEM Forms OSGi
- General: Steps to encrypt keystore password to be used in lc_turnkey.xml
- General: Steps-to-reset-default-password-for-users-in-AEM-Forms-JEE
- General: Steps-to-reset-default-password-for-users-in-AEM-Forms-OSGI
- General: Steps to set up gemfire locators in a cluster and perform related configuration
Modernizing the Payers' Enrollment Journey with AEM Forms
Discover how AEM Forms helps Payers modernize enrollment from lead gen to applications and communications. Learn how to automate processes and boost engagement through effective, omnichannel experiences