Documentation AEM as a Cloud Service User Guide

Create an Adaptive Form creating-an-adaptive-form-core-components

Last update: Sat May 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
User
Developer

Version

Article link

AEM 6.5

Click here

AEM as a Cloud Service

This article

Adaptive Forms let you create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provides business user-friendly wizard to quickly create Adaptive Forms. The wizard has a quick tab navigation to easily select pre-configured template, styling, fields, and submission options to create an Adaptive Form.

Before you start, learn about the type of Forms components available to you:

Adaptive Forms Core Components: These are standardized data capture components. These components provide customization capabilities, reduced development time, and lower maintenance costs for your digital enrollment experiences. A developer can easily customize and style these components. Adobe recommends using these modern and extensible components to develop Adaptive Forms.
Adaptive Forms Foundation Components: These are classic (old) data capture components. You can continue to use these to edit your existing foundation components based Adaptive Form. If you are creating new forms, Adobe recommends using Adaptive Forms Core Components to create an Adaptive Forms.

Wizard to create an Adaptive Form

Pre-requisites

You require the following to create an Adaptive Form:

Enable Adaptive Forms Core Components for your environment: When you create a program, the Adaptive Forms Core Components already enabled for your environment. If you have a Forms as a Cloud Service environment based on Archetype 39 or earlier, Enable Adaptive Forms Core Components for your environment. On enabling the Core Components for your environment, the Adaptive Forms (Core Component) template and canvas theme is added to your environment. If your AEM SDK version older than 2023.02.0, ensure that you have prerelease flag enabled on your environment as Adaptive Forms Core Components were part of pre-prelease before the 2023.02.0 release.
An Adaptive Form template: A template provides a basic structure and defines appearance (layouts and styles) of an Adaptive Form. It has pre-formatted components containing certain properties and content structure. It also provides the options to define a theme and a submit action. The theme defines the look and feel and submit action defines the action to take on submission of an Adaptive Form. For example, sending the collected data to a data source. The cloud service provides an OOTB template, named blank:
- The blank template is included with every fresh AEM Forms as a Cloud Service program.
- You can install the reference package, via Package Manager, to add the blank template to your AEM Forms as a Cloud Service program.
- You can also create an Adaptive Forms template (Core Components) from scratch.
- You can also deploy sample templates to your environment. These help you start creating forms swiftly.
An Adaptive Form theme: A theme contains styling details for the components and panels. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply a theme, the specified style reflects on the corresponding components. The Canvas template is included with every fresh AEM Forms as a Cloud Service program. You can also deploy sample themes to your environment. These help you start styling your forms and provide a base structure to create or customize a theme as per your business requirements.
Permissions: Add your users to forms-users group. The members of the forms-users group have permissions to create an Adaptive Form. For detailed list of forms-specific user groups, see Groups and permissions.

Create an Adaptive Form create-an-adaptive-form-core-components

Log in to your Experience Manager Forms Author instance. It can be a Cloud instance or a local development instance.
Enter your credentials on the Experience Manager login page. After you are logged in, in the upper-left corner, select Adobe Experience Manager > Forms > Forms & Documents.

Select Create > Adaptive Forms. The Wizard opens. In the Source tab, select a template:

Core Components Template

When you select a template, a theme and submit action specified in the template are auto-selected, and the Create button is enabled. You can go to the Style or Submission tabs to select a different theme or submit action. If the selected template does not specify a theme, the create button remains disabled. You can go to the Styles tab to manually select a theme.

note note
NOTE
If you do not have, Adaptive Forms (Core Component) template on your environment, Enable Adaptive Forms Core Components for your environment. On enabling the Core Components for your environment, the Adaptive Forms (Core Component) template is added to your environment.

In the Style tab, select a theme:
- When the selected template specifies a theme, the theme is auto selected in the wizard. You can also choose a different theme from the Style tab.
- If the selected template does not specify a theme, you can use the Style tab to choose a theme. The Create button is enabled only after a theme is selected.
(Optional) In the Data Tab, select a data model:
- Form data model (FDM): A Form Data Model lets you integrate entities and services from disparate data sources to an Adaptive Form. Choose Form Data Model (FDM) if the Adaptive Form that you are creating involves fetching and write data from and to multiple data source.
- JSON Schema: JSON schema Our Core-Components-based Adaptive Form allows for seamless integration with your organization’s back-end system by providing the ability to associate a JSON schema, which represents the structure of the data being produced or consumed. This association enables authors to dynamically add content to the Adaptive Form using the elements of the schema. The elements of the schema are easily accessible in the Data Model Objects tab of the Content browser during the authoring process, and all fields are automatically added to any created Adaptive Form.
By default all fields of the associated JSON schema are automatically selected and converted into corresponding Adaptive Form components, streamlining the authoring process. The wizard offers the added convenience of allowing you to selectively choose which fields should be included in the Adaptive Form through the use of checkboxes.
In the Submission tab, select a submit action:
- When you select a template, the submit action specified in the template is auto-selected. You can select a different submit action from the Submission tab. The ** Submission** tab displays all the available submit actions.
- When the selected template does not specify a submit action, you can use the Submission tab to select a submit action
(Optional) In the Delivery tab, you can specify a publishing or unpublishing date for an Adaptive Form.
Select Create. A dialog to specify title, name, and location to save the Adaptive Form appears:
- Title Specifies the display name of the form. The title helps you identify the form in the Experience Manager Forms user interface.
- Name: Specifies the name of the form. A node with the specified name is created in the repository. As you start typing a title, value for the name field is automatically generated. You can change the suggested value. The name field can include only alphanumeric characters, hyphens, and underscores. All the invalid inputs are replaced with a hyphen.
- Path: Specifies the location at which the Adaptive Form is to be saved. You can save the Adaptive Form directly at /content/dam/formsanddocuments or create a folder such as /content/dam/formsanddocuments/adaptiveforms to save an Adaptive Form. Ensure that you create the folder before using it in the path. The Path field does not create a folder automatically.
Select Create. An Adaptive Form is created and opens in the Adaptive Forms editor. The editor displays the contents available in the template. Based on the type of Adaptive Form, the form elements present in the associated JSON schema or Form Data Model (FDM) are displayed in the Data Model Objects tab of the Content Browser in the sidebar. You can also drag-drop these elements to build your Adaptive Form.

Now, you can drag-and-drop the Adaptive Forms Core Components to Adaptive Forms container to design and create the form. You can also visit https://aemcomponents.dev/ to view available core components in action.

Configure Submit Action for an Adaptive Form configure-submit-action-for-form

A Submit Action lets you choose the destination of data captured via an Adaptive Form. It is triggered when a user clicks the Submit button on an Adaptive Form. Adaptive forms include some out of the box submit actions. You can also extend a default submit actions to create your own custom submit action. To configure a Submit Action for your form:

Open the Content browser, and select the Guide Container component of your Adaptive Form.
Click the Guide Container properties icon. The Adaptive Form Container dialog box opens.
Click the Submission tab.
Select and configure a Submit action, based on your requirements. For detailed information about Submit Actions, see Adaptive Form Submit Action

Redirect the user to a page or show a thank you message on form submission

On submission of a form, you can redirect the user to another webpage or a message. To redirect the user or configure the thank you message:

Open the Content browser, and select the Guide Container component of your Adaptive Form.
Click the Guide Container properties icon. The Adaptive Form Container dialog box opens.
Open the Submission tab.
- To configure a Redirect URL, for on Submit option, select the Redirect to URL option, and browse and select an AEM Sites page, or provide URL of an external page.
- To configure a custom or thank you message, for on Submit option, select the Show Message option, and provide a message in the Message content box. It is a rich text box, you can use the full screen option to view all the available rich text items.

Configure a Schema or Form Data Model (FDM) for an Adaptive Form configure-schema-or-data-model-for-form

You can use the Form Data Model (FDM) to connect a form to a Data Source to send and receive data based on user actions. You can also connect a form to a JSON schema to receive the submitted data in a pre-defined format. Based on the requirement, connect your form to a JSON schema or Form data model (FDM):

Configure a JSON Schema or Form Data Model (FDM) for your form

To configure a JSON Schema or Form Data Model (FDM) for your form:

Open the Content browser, and select the Guide Container component of your Adaptive Form.
Click the Guide Container properties icon. The Adaptive Form Container dialog box opens.
Open the Data Model tab.
Select and configure a JSON Schema or Form Data Model (FDM), based on your requirements:
- When you select the Form Model option, use the Select Form Data Model option to select a pre-configured Form Data Model (FDM).
- When you select the Schema option, use the Schema option to select a JSON schema for your form.
Click Done.

Configure a pre-fill service configure-prefill-service-for-form

You can use the prefill service to auto fill fields of an Adaptive Form using existing data. When a user opens a form, the values for those fields are prefilled. You can:

Use Form Data Model Prefill service to prepopulate fields of an Adaptive Form fdm-prefill-service

You can use the Form Data Model Prefill service to prepopulate fields of an Adaptive Form using a Form Data Model or a custom pre-fill service. The Form Data Model Prefill service uses the Get Service of configured Form Data Model to retrieve data. To use Form Data Model Prefill service for an Adaptive Form:

Open the Content browser, and select the Guide Container component of your Adaptive Form.
Click the Guide Container properties icon. The Adaptive Form Container dialog box opens.
Click the Adaptive Form Container properties icon. The Adaptive Form Container dialog box to configure Data Models opens.
Select a form data model (FDM). Open the Basic tab. In the prefill service, select Form Data Model Prefill Service.
Click Done. Your Adaptive form is now configured to use Form Data Model Prefill. You can now, use the rule editor to create rules to prepopulate fields of the form.

Edit Form Model properties of an Adaptive Form edit-form-model

Select the Adaptive Form and select > Open Properties. The Form Properties page opens.
Go to the Form Model tab and choose a form model. If the Adaptive Form is without a form model, you have the freedom to choose either a JSON schema or a form data model (FDM). On the other hand, if the Adaptive Form is already based on a form model, you have the option to switch to another form model of the same type. For instance, if the form is using a JSON schema, you can easily switch to another JSON schema, and similarly if the form is using a Form Data Model (FDM), you can switch to another Form Data Model (FDM).
Select Save to save the properties.