Adobe recommends using the modern and extensible data capture Core Components for creating new Adaptive Forms or 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.
|AEM 6.5||Click here|
|AEM as a Cloud Service||This article|
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:
You can download and install AEM Forms reference content package from Software Distribution portal to import reference themes and templates to your environment.
You can access template editor from the Tools menu by navigating to Adobe Experience Manager > Tools > General > Templates. Here, the templates are organized in folders enabled for editable templates.
Experience Manager 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.
After you have created a folder, open the folder and perform the following steps to create a template:
Tap Create inside the folder you have created.
In the Pick a Template Type section, select Adaptive Form template and tap Next.
In the Template Details section, provide a Template Title and tap Create.
You can also provide a description.
Tap Done to return to the console, or tap Open to open the template in the editor.
When you open a template for editing, you can see the following AEM Editor components:
Contains the following options:
Sidebar: Provides the Content, Properties, Assets, and Components browsers.
Component toolbar: When you select a component, you see a toolbar that lets you customize the component.
Page: The area where you add content to create the 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.
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
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 do not 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.
Locking or unlocking image or logo in the header component, individually, is not recommended. You can unlock the header component.
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, tap > Initial Content.
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.
When you select Store content or StorePDF as the Submit Action, you get an option to specify the Storage path. If you specify path in template, then all forms created from it have the same path. You can specify the correct storage path, or ensure form authors to update it to prevent data from every form getting stored at same location.
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:
You can add a panel by tapping the + button when you select the Drag components here option.
You can drag-drop the panel component from the components browser in the sidebar.
You can add child panel of the
guideRootPanel from the component toolbar.
To create the General Information and Professional Information tabs, add two panels in the child panel of the
guideRootPanel. Select the panels and tap to open the properties in the sidebar. Change the element names as
professional-info, and titles as General Information and Professional Information respectively. In the sidebar, tap content to open the content browser. In the Form Objects tab, select
guideRootPanel. In the editor, the guideRootPanel is selected. Tap in the component toolbar to open its properties. In the Panel Layout field, select Tabs on Top and tap Done. The tabbed template structure is applied.
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.
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:
Navigate to Adobe Experience Manager > Tools > Templates, and open the folder in which you have created the template.
The template you have created is marked as Draft.
Select the template and tap Enable in the toolbar.
When you create an Adaptive Form, you can see the template listed when you are asked to choose 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. You can also Create a template using AEM Archeype and deploy it to your Cloud Services instance.
Authors can associate a Form Data Model Schema to an Adaptive Form template in the template editor. It allows authors to select a schema from the template editor. When you associate a schema to a template and a form author creates a form based on the template, the schema is pre-selected for the form. It helps forms authors regulate the use of schema and saves time for forms author also. To select a form data model schema in template editor:
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.
You can also save an Adaptive Form as a template for future use. To save a Adaptive Form as a template:
Select an Adaptive Form to save it as a template.
Click Save as Template. A dialog box appears.
Specify Title (mandatory field), Location (mandatory field) and Description (optional field) for the template.
To use the same container policy as of the source Adaptive Form, it is recommended to save the template in the same folder as of the source Adaptive Form. In case, the template is saved in any other folder, than the created template uses a default container policy.