Create an Adaptive Form template based on Core Components adaptive-form-templates

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:

Pre-requisite

Enable Adaptive Forms Core Components for your environment: When you create a program, the Adaptive Forms Core Components already enabled for your environment. If you have a Form as a Cloud Service environment based on AEM Archetype 39 or earlier, Enable Adaptive Forms Core Components for your environment.

Working with template working-with-templates

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.

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:

Editing a template editing-a-template

Different modes to select and edit the appropriate aspect of the template are:

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, it helps in predefining the content that cannot be changed while creating Adaptive Forms associated with the template.

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

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. It allows you to create a predefined content that can be changed while creating Adaptive Forms associated with the template. 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.

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.

Layout layout

When editing a template you can define the layout, this uses standard responsive layout. The layout helps in managing the width of a component based on device width to facilitate a responsive Adaptive Form design.

Refer to the article understanding responsive layout for additional information.

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. You can also Create a template using AEM Archetype and deploy it to your Cloud Services instance.

Associate a Form Data Model Schema to a template associating-form-data-model-schema-in-template

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 authors also. To select a form data model schema in template editor:

Adding custom properties to Adaptive Form Components using template policy

Custom properties allows you to associate custom attributes (key-value pairs) to an Adaptive Form core component using the form template. The custom properties are reflected in the properties section of the headless rendition of the component. It allows creating dynamic form behavior that adapts based on the custom attributes values. For example, developers can design various renditions of a Headless Forms component for mobile, desktop, or web platforms, significantly enhancing the user experience across a wide array of devices.

Steps to add custom properties to Adaptive Form core component fields are:

Add a custom group name in the policy of template editor add-a-custom-group-name

When you add at least one custom property group using the template policy, the Advanced tab becomes visible in the Edit dialog of a corresponding core component.

Select a custom group name in the edit dialog of a core component select-a-custom-group-name

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 based on Core Components.

Best Practices best-practices

See Also see-also