Create an Adaptive Form template based on Core Components

Last update: 2023-12-12

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:

  • Add header and footer components of a form in the structure layer.
  • Provide the initial content for the form.
  • Specify a theme, Submit Actions.

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.

NOTE

On deploying the Forms as a Cloud Service environment based on Archetype 45, the Adaptive Forms (Core Component) templates and core component-based themes are added to your environment.

Working with template

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.

NOTE

You can find the core component based editable templates in core component-specific folders.

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

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

  1. Select Create inside the folder you have created.

  2. In the Pick a Template Type section, select Adaptive Form (Core Component) template and select Next.

  3. In the Template Details section, provide a Template Title and select Create.
    You can also provide a description.

  4. Select Done to return to the console, or select Open to open the template in the editor.

Template editor UI

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

  • Page toolbar
    Contains the following options:

    • Toggle Side Panel: Lets you show or hide the sidebar.
    • Page Information: Lets you specify information such as the publish/unpublish time, thumbnails, client-side libraries, page policy, and page design client-side library.
    • Mode selector: Lets you change the mode. You can choose Structure mode, Initial Content, Layout Control mode. Structure mode lets you add and customize the header and footer. Initial Content mode lets you customize the form content.
    • Preview: Lets you preview how the template looks when you publish it. You can use Layer Selector and Preview to toggle editing and preview modes.
  • 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.

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

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.

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

NOTE

Locking or unlocking image or logo in the header component, individually, is not recommended. You can unlock the header component.

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 canvas-drop-down > Initial Content.

Header and footer added in the Initial Content layer

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.

NOTE

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.

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.

Layout container in the structure layer

Refer to the article understanding responsive layout for additional information.

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:

  1. 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.
  2. Select the template and select Enable in the toolbar.
    When you create an Adaptive Form, you can see the template listed when you are asked to choose 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.

NOTE

Associate a Form Data Model Schema to a 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:

  1. Select Content Browser located on the left-hand side.
  2. Go to the form container Setting.
  3. Select Data Model.
  4. Choose your form data model through Select Form Data Model and save the configuration.

Form-Data-Model-Association-in-Forms

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:

  1. Add a custom group name in the policy of a Template editor
  2. Select a custom group name in the edit dialog of an Adaptive Form’s component

Add a custom group name in the policy of template editor

  1. Go to Adobe Experience Manager > Tools > General > Templates.
  2. Select the template based on Core Components and open it in an edit mode.
  3. Click the Policy Policy icon of an Adaptive Form Core Component field on which the custom properties need to be defined. The Adaptive Form Field dialog appears.
  4. Select the Custom Properties tab.
  5. Specify the Policy Title under the Policy section.
  6. Specify the Group name and add key-value pair associated to a specific group. The group name is visible to form authors in the edit dialog of a component. If you select the group name, every associated key-value pair is applicable to a component.
  7. Click [Done].

Adding custom properties group name in template editor

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

  1. Open an Adaptive Form in an edit mode.
  2. Select the component for which the custom properties have been defined in the template editor and select settings_icon to open the edit dialog of the component.
  3. Select the Advanced tab.
  4. Select the custom property group name from Custom Property Select drop-down. All the defined custom group names are automatically populated in the drop-down list.
  5. Select Done to save the properties.

select custom property group name

NOTE
  • The Additional Custom Properties checkbox allows you to dynamically add component-specific custom properties in addition to those provided in the template policy. The custom property of the specific component takes precedence over the custom property set at the template policy when the key name values match.

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

  • Create templates using the components based on Core Components, for example, Adaptive Form Text, Adaptive Form Container and more. To get information on Adaptive Forms Core Components, click here.
  • Limit the number of templates to match the fundamentally different form types available on the websites
  • Provide the necessary flexibility and configuration capabilities to your custom components used in a template.

See Also

On this page