Create an Adaptive Form (Foundation Components)

Adaptive Forms allow you to create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provides business user friendly wizard to quickly author 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 are standardized data capture components. These components provide customization capabilities, reduced development time, and lower maintenance costs for your digital enrolment experiences. A developer can easily customize and style these components. Adobe recommends leveraging these modern and extensible components to develop Adaptive Forms.

• Adaptive Forms Foundation Components 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.

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. 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 supports two types of templates:

• Editable template: You can create a new or import an existing editable template. You can also deploy the latest archetype to get some sample editable templates.

• Static template: These are legacy templates and are recommended only for customers migrating from Adobe Managed Services (AMS) and on-premise AEM Forms installations (AEM 6.5 Forms or earlier). These allow you to continue leverage your existing investment in static templates. When you are create a new Adaptive Form, it is recommended to use an Editable template.

• 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 or import an existing theme. You can also deploy the latest archetype for some sample themes.

• Permissions: 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 (Foundation Components)

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 > Adaptive Forms. The Wizard opens.

4. In the Source tab, select a template:

   • When you select an Editable 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 Editable template does not specify a theme, the create button remains disabled. You can go to the Styles tab to manually select a theme.

     NOTE

     You can also create Document of Record template using an Adaptive Forms editor. For more information, see Document of Record Support in Adaptive Form Editor.

   • When you select a static template, the data, style, submission, delivery, and preview options are not available. When you are create a new Adaptive Form, it is recommended to use an Editable template.

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

6. (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 represents 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 are available for use in the Data Model Objects tab of the Content browser when authoring Adaptive Forms and all the fields are also added to newly created Adaptive Form.

   By default, all the fields of the data model are selected. When you create the Adaptive Form, all the selected data model fields are converted to corresponding Adaptive Form components. The wizard provides you checkboxes to select only those fields which should be included in the Adaptive Form.

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

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

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

10. Tap Create. An Adaptive Form is created and opens in the Adaptive Forms editor. The editor 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 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.

Edit Form Model properties of an Adaptive Form

You can change the form model for an Adaptive Form (JSON-based or Form Data Model). 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.

You can also modify the form model properties from the Adaptive Form editor or Adaptive Form template editor.

1. Select the Adaptive Form container (Root) component.

2. Click icon to open the Properties of the Adaptive Form container.

3. Select the Data Model tab and do one the following:

   • If the Adaptive Form is without a form model, you can choose a 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 not change the form model. You can choose another XML or JSON schema, or Form Data Model for the same form model as applicable.

4. Tap to save the properties.

Business.Adobe.com resources