Create an Adaptive Form

Adaptive Forms allow you to create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provides an intuitive user interface and out-of-the-box components for creating and working with Adaptive Forms. You can choose to create an Adaptive Form based on a form model or schema or without a form model. It is important to carefully choose the form model that not only suits your requirements but extends your existing infrastructural investments and assets. You get to choose from the following options to create an Adaptive Form:

• Using a form data model
  Data integration lets you integrate entities and services from disparate data sources in to a Form Data Model that you can use to create Adaptive Forms. Choose Form Data Model if the Adaptive Form you are creating involves fetching and write data from and to multiple data source.

• Using an XML Schema Definition (XSD) or a JSON Schema
  XML and JSON schemas represent the structure in which data is produced or consumed by the back-end system in your organization. You can associate the schema to an Adaptive Form and use its elements to add dynamic content to the Adaptive Form. The elements of the schema will be available for use in the Data Model Objects tab of the Content browser when authoring Adaptive Forms.

• Using none or without a form model
  Adaptive Forms created with this option don’t use any form model. The data XML generated from such forms has flat structure with fields and corresponding values.

Pre-requisites

You require the following to create an Adaptive Form:

• 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 You can create a new template, import an existing template, or download and import some sample templates.
• 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. You can create a new theme, import an existing theme, or download and import some sample themes.
• Add your users to forms-users to provide them permissions to create an Adaptive Form. For detailed list of forms specific user groups, see Groups and permissions.

Create an Adaptive Form

Follow these steps to create an Adaptive Form.

1. Access Experience Manager Forms Author instance. It can be a Cloud instance or a local development 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 and select Adaptive Form. Select a template and tap Next.

4. An option to 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. All the invalid inputs are replaced with a hyphen.
   • Description: Specifies the detailed information about the form.
   • 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.

5. You can create an Adaptive Form based on one of following form models:

   • Form Data Model
   • XML or JSON schema
   • None or without any form model

   You can configure these from the Form Model tab on the Add Properties page. By default, the form model selected is None.

6. Tap Create. An Adaptive Form is created and a dialog to open the form for editing appears.

7. Tap Open 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 according to the needs.

   Based on the type of Adaptive Form, the form elements present in the associated XML schema or JSON schema 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.

Create an Adaptive Form based on a Form Data Model

Data integration lets you integrate multiple data sources and bring their entities and services together to create a form data model. It is an extension of JSON schema. You can use a Form Data Model to create an Adaptive Form. The entities or data model objects configured in a Form Data Model are available as data model objects for form authoring. They are bound to respective data sources and used to prefill a form and write submitted data back to the respective data sources. You can also call services configured in a Form Data Model using Adaptive Form rules.

To use a Form Data Model for creating an Adaptive Form:

1. In Form Model tab on Add Properties screen, select Form Data Model in the Select From drop-down list.

   

2. Tap to expand Select Form Data Model. All available form data models are listed.Select a from data model.

Create an Adaptive Form based on XML or JSON schema

XML and JSON schemas represent the structure in which data is produced or consumed by the back-end system in your organization. You can associate a schema to an Adaptive Form and use its elements to add dynamic content to the Adaptive Form. The elements of the schema are available in the Data Model Object tab of the content browser for authoring Adaptive Forms. You can drag-drop the schema elements to build the form.

See the following documents to understand how to design XML or JSON schema for authoring Adaptive Forms.

• Creating Adaptive Forms using XML schema
• Creating Adaptive Forms using JSON schema

Do the following to use XML or JSON schema as form model for an Adaptive Form:

1. On the Add Properties step of Adaptive Form creation page, tap on the Form Model tab.

2. In the Form Model tab, select Schema from the Select From drop-down field.

3. Tap Select Schema and do one of the following:

   • Upload from disk - Select this option and tap Upload Schema Definition to browse and upload an XML schema or JSON schema from your file system. The uploaded schema file resides with the form and is not accessible to other Adaptive Forms.

   • Search in repository - Select this option to select from the list of schema definition files available in the repository. Select the XML or JSON schema file as form model. The selected schema is associated with the form by reference and is accessible for use in other Adaptive Forms.

     Ensure that the JSON schema filename ends with .schema.json. For example: mySchema.schema.json

   
   Figure: Selecting XML or JSON schema

4. (For XML schema only) After you select or upload an XML Schema, specify a root element of the selected XSD file to map with the Adaptive Form.

   
   Figure: Selecting XSD root element

Edit Form Model properties of an Adaptive Form

Adaptive Forms are created without a form model (using the None option for form model) or using a form model such as a XML schema or JSON schema, or form data model. You can change the form model for an Adaptive Form from None to another form model. For Adaptive Form based on a form model, you can choose another XML schema, JSON schema, or Form Data Model for the same form model. However, you cannot change from one form model to another.

1. Select the Adaptive Form and tap the Properties icon.

2. Open the Form Model tab and do one the following.

   • If the Adaptive Form is without a form model, you can choose another form model and accordingly select XML or JSON schema, or form data model.
   • If the Adaptive Form is based on a form model, you can choose another XML or JSON schema, or Form Data Model for the same form model.

3. Tap Save to save the properties.