Create Core Components based Adaptive Forms creating-an-adaptive-form-core-components

Last update: Mon Jun 24 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Adaptive Forms,Core Components

CREATED FOR:

Admin
Developer

Adobe recommends using Core Components to add Adaptive Forms to an AEM Sites Pageor to create standalone Adaptive Forms.

Version

Article link

AEM as a Cloud Service

Click here

AEM 6.5

This Article

Adaptive Forms let you create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provide business user-friendly UI to quickly create Adaptive Forms. The UI offers 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 forms, Adobe recommends using Adaptive Forms Core Components to create an Adaptive Forms.

Pre-requisites

You require the following to create an Adaptive Form:

Enable Adaptive Forms Core Components for your environment: AEM Archetype project version 41 or later is required to enable Core Components for your environment. On enabling the Core Components for your environment, the Adaptive Forms (Core Component) template and Canvas theme are added to your environment.

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. You can also deploy sample templates to your environment. These help you start creating forms swiftly.

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.

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 theme is added by default, when you enable core components for your environment. You can download and customize the standard themes. For out of the box themes you can 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

Login to your local AEM author 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 > Create Adaptive Forms.
Select a Adaptive Forms Core Components template and click Next.
The Add Properties appears. Specify the values for following property fields. The Title and Name fields are mandatory:
- 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.
- Description: Specifies the detailed information about the form.
- Theme Client Library: Specifies the theme for an Adaptive Form. By default, the adaptiveform.theme.canvas3 theme is selected. You can also choose a different theme from the Theme Client Library drop-down menu.
- Configuration Container: Defines a location where configuration files for Adaptive Forms are stored. These configuration files contain settings and properties related to the behavior and appearance of Adaptive Forms.
- Tags: Specifies tags to uniquely identify the Adaptive Form. Tags help in searching the form. To create tags, type new tag names in the Tags box.
Select Create. An Adaptive Form is created and a dialog to open the form for editing appears.
Select Edit to open the newly created form in a new tab. The form opens for editing and displays the contents available in the template. It also displays the sidebar to customize the newly created form.

Use Adaptive Forms Core Components to create your form

After opening the form for editing, you can use available Adaptive Forms Core Components to add form fields to your form. You can drag-and-drop or use the + [insert component] option to add these components to a form. See, AEM Core Components documentation to learn about available Adaptive Forms Core Components. 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 by way of 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 for an Adaptive Form configure-schema-or-data-model-for-form

You can use the Form Data Model 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:

Configure a JSON Schema or Form Data Model for your form

To configure a JSON Schema or Form Data Model 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, 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.
- When you select the Schema option, use the Schema option to select a JSON schema for your form.
Click Done.

NOTE

You can edit the JSON Schema or Form Data Model for an Adaptive Form using the Guide Container properties.

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