Adaptive Form Templates adaptive-form-templates

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

When you author a form, you add fields and components to define form structure, content, and actions in the editor. You add fields and components in the guideRootPanel of the form container. With Template Editor, you can create a template that contains basic structure and initial content that authors can use to create forms.

For example, you want all form authors to have certain text boxes, navigation buttons, and a submit button in an enrollment form. You can create a template with the components that authors can use to create a form that is consistent with other enrollment forms. When authors use the template to create an adaptive form, the new form inherits the structure and components you have specified in the template. Template Editor lets you:

Working with templates working-with-templates

You can access template editor from the Tools menu by navigating to Adobe Experience Manager > Tools > Templates. Here, the templates are organized in folders enabled for editable templates. AEM provides a global folder to organize templates. However, it is not enabled by default. You can request your Administrator to enable the global folder or create a folder for templates. For more information on how to create folders, see Template Folders.

Once you select to open a folder, you see a Create button that lets you create a template for adaptive forms.

Creating a template create-template

After you have created a folder, open the folder and perform the following steps to create a template:

Template editor UI template-editor-ui

When you open a template for editing, you can see the following AEM Editor components:

See Introduction to authoring adaptive forms to understand the Touch UI editor.

Editing a template editing-a-template

An adaptive form template is created using two layers:

The layer selector is available beside the Preview option in the upper-right corner of the screen.

Structure structure

When you select the structure layer in the Template Editor, you can see the layout containers above and below the Adaptive Form Container. Authors can use these layout containers for header and footer. You can add, edit, or customize the header and footer. Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container to customize the template header. Drag-drop the Adaptive Form Footer component in the layout container below the Adaptive Form Container to customize the template footer.

Layout containers in the structure layer

A. Layout container for Header component B. Layout container for Footer component

Drag-drop the Adaptive Form Header component in the layout container above the Adaptive Form Container. After you add the component, you can specify its properties that let you add a logo and provide its title.

Similarly, when you drag-drop the footer component in the layout container below the Adaptive Form Container, you can provide the copyright information and company details.

Header and footer added in the Structure layer

Locking/unlocking components in the structure layer locking-unlocking-components-in-the-structure-layer

When you edit the template with structure layer selected, you can unlock the header and footer of the template. If a component is unlocked in the template, form authors can edit the component in the adaptive form that uses the template. Locking a component prevents form authors from editing it in the adaptive form. Lock option is available in the component toolbar.

For example, you add the header component in the template. When you select the component, you can see a lock option in the component toolbar. Typically, header includes company name and logo, and you don’t want form authors to change the logo and header in a template. In an adaptive form created using the template with the header component locked, form authors cannot change the logo and company name.

Initial Content initial-content

When the Initial Content option is selected, the Adaptive Form Container of the template opens like an adaptive form for editing. Like authoring an adaptive form, you can specify initial settings, such as selecting a theme and submit actions.

Form authors use it as a base to create a form. Content flow structure is specified in the Initial Content layer of the template. To switch to editing initial content of the form template, before Preview in the page toolbar, select > Initial Content.

Initial Content layer in Template Editor showing Adaptive Form Container selected for specifying properties.

In the Initial Content layer, you create the adaptive form template that your authors use as a base. Authoring a template is similar to authoring a form, you use options available in the Sidebar. Sidebar provides content, properties, assets, and components browsers.

See Sidebar.

Creating an adaptive form template with tabs and panels  creating-an-adaptive-form-template-with-tabs-and-panels-nbsp

For example, you want to create a template with the following tabs:

You have added a logo, provided a title, and added a footer in the structure layer. Lock the header and footer to stop form authors from editing them when they use the template to create forms.

Change the layer from Structure to Initial Content, and start adding content to the form. To create a tabbed structure, add a child Panel in the guideRootPanel of the Adaptive Form container. To add a panel:

To create the General Information and Professional Information tabs, add two panels in the child panel of the guideRootPanel. Select the panels and select to open the properties in the sidebar. Change the element names as general-info and professional-info, and titles as General Information and Professional Information respectively. In the sidebar, select content to open the content browser. In the Form Objects tab, select guideRootPanel. In the editor, the guideRootPanel is selected. Select in the component toolbar to open its properties. In the Panel Layout field, select Tabs on Top and select Done. The tabbed template structure is applied.

Adding content in tabs adding-content-in-tabs

After you add panels and structure them as tabs, you can add fields inside the tabs. When you select a tab in the editor, you can see the Drag components here option. You can drag-drop components such as text-boxes, list items, and buttons. You can drag-drop components from the components browser in the sidebar.

Each component has properties that enhance data capturing and manipulation. For example, you can enable the Required field property of a component. Your authors can specify a message that your customers see when they skip filling a required field. Specify the message in Required Field Message property.

In the example template, Name, Phone number, and Date of birth fields are added in the General Information tab. In the Professional Information tab, Currently employed, employment type, Educational qualification fields are added.

After you have added fields, you can add buttons such as Submit and Reset.

Enabling the template enabling-the-template

When you create a template, it is added as a draft. Enable the template to use it for creating adaptive forms. To enable a template:

Importing or exporting a template importing-or-exporting-a-template

A form works with its template. When you download an adaptive form created using a customized template, the template is not downloaded. When you import the form on a different AEM Forms instance, it is imported without its template. If a form is imported but its template is not available, the form is not rendered. You can package the custom template from /conf node in https://<server>:<port>/crx/packmgr, and port it in the AEM Forms instance where you want to upload the form.

Creating an adaptive form using the template creating-an-adaptive-form-using-the-template

After you create and enable a template, it is available in the forms manager when you create an adaptive form. To use a template and create an adaptive form, see Creating an adaptive form.

Change display option of out of the box templates change-display-option-of-out-of-the-box-templates

You can create custom templates for adaptive forms to define basic structure and initial content. AEM Forms also provides a set of out of the box template for adaptive forms. You can choose to show or hide the templates.

Perform the following steps to show and hide templates:

Recommendations recommendations