DocumentationAEM Headless adaptive forms

Create a Headless adaptive form using Adaptive Forms editor create-a-headless-adaptive-form-using-adaptive-forms-editor

Last update: Sun Jul 23 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • Developer

AEM Forms as a Cloud Service offers a user-friendly editor to create Headless Adaptive Forms. With over 24 core components available, you can easily create a form by dragging and dropping components in the editor. Additionally, the Rules editor allows you to add validations to your form fields.

NOTE
If you are new to Headless Adaptive Forms, Adobe recommends to go through the Create and publish a headless form using starter kit tutorial to learn the basics and handcraft a headless adaptive form before using Adaptive Forms editor for Headless forms.

Perform the following steps to create a Headless adaptive form using Adaptive Forms editor:

Before you start:

You require the following to create an Adaptive Form using Adaptive Forms editor:

For AEM 6.5 Forms:

  • Access to an AEM 6.5.16.0 or later Forms author instance.

  • Adaptive Forms Core Components

  • Adaptive Forms Core Components template

  • An Adaptive Form theme for Core Components based template

  • Add your users to forms-users group. The members of the forms-users group have permissions to create an Adaptive Form.

For AEM Forms as a Cloud Service:

  • Access to an AEM Forms as a Cloud Service author instance or a local AEM Forms as a Cloud Service SDK 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. For example, sending the collected data to a data source. The cloud service provides an OOTB template, named blank:

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

  • 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-components

  1. Login to your Experience Manager Forms Author instance.

  2. Enter your credentials on the Experience Manager login page. After you are logged in, in the upper-left corner, tap Adobe Experience Manager > Forms > Forms & Documents.

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

    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.

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

  5. (Optional) In the Data Tab, select a data model:

    • Form data model: A Form Data Model lets you integrate entities and services from disparate data sources to an Adaptive Form. Choose Form Data Model if the Adaptive Form that you are creating involves fetching and write data from and to multiple data source.

    • JSON Schema: JSON schema Adaptive Form allow 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 newly 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.

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

  7. (Optional) In the Delivery tab, you can specify a publishing or unpublishing date for an Adaptive Form.

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

  9. Tap 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 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 components to Adaptive Forms container to design and create the form.

View JSON rendition of an Adaptive Form preview-form

Select the Adaptive Form and tap Preview. The preview of the form appears. To view form definition (JSON) of the form replace .html extension in the URL with .model.json

For example, http://[author-server]:[port]/editor.html/content/forms/af/contact-us.model.json

You can use the Headless Adaptive Forms getForm API to fetch the form definition (JSON) and use it in your application.

View form definantion(JSOI)

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba