Form Editor Improvements in AEM Forms form-editor-improvements-in-aem-forms

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

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: