Show Menu
TOPICS×

Introduction to authoring adaptive forms

Overview

Adaptive forms allow you to create forms that are engaging, responsive, dynamic, and adaptive. AEM Forms provides an intuitive user interface and out-of-the-box components for creating and working with adaptive forms. You can choose to create an adaptive form based on a form model or schema or without a form model. It is important to carefully choose the form model that not only suits your requirements but extends your existing infrastructural investments and assets. You get to choose from the following options to create an adaptive form:
  • Using a form data model Data integration lets you integrate entities and services from disparate data sources in to a form data model that you can use to create adaptive forms. Choose form data model if the adaptive form you are creating involves fetching and write data from and to multiple data source.
  • Using an XDP Form Template It is an ideal form model if you have investments in XFA-based or XDP forms. It provides a direct way to convert your XFA-based forms into adaptive forms. Any existing XFA rules are retained in the associated adaptive forms. The resulting adaptive forms support XFA constructs, such as validations, events, properties, and patterns.
  • Using an XML Schema Definition (XSD) or a JSON Schema XML and JSON schemas represent 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 will be available for use in the Data Model Objects tab of the Content browser when authoring adaptive forms.
  • Using none or without a form model
Adaptive forms created with this option don't use any form model. The data XML generated from such forms has flat structure with fields and corresponding values.
For more information about creating an adaptive form, see Creating an adaptive form .

Adaptive form authoring UI

The touch-optimized UI for authoring adaptive forms is intuitive, and provides:
  • Drag-and-drop functionality
  • Standard form components
  • Integrated repository for assets
When you create a new or edit an existing adaptive form, you use the following UI elements:
A. Sidebar B. Page toolbar C. Adaptive form page

Page toolbar

The page toolbar on the top provides options that let you preview the form, change form properties, and edit form layout. You can preview the form when you author it, and make changes accordingly. In the page toolbar, you see:
  • Toggle Side Panel : Lets you show or hide Sidebar.
  • Page information : Lets you view page properties, publish/unpublish a form, start a form workflow, and open the form in classic UI.
  • Emulator : Lets you emulate the look of your form for different display sizes such as tablets and phones.
  • Edit : Lets you select other modes such as: Edit, Style, Developer, and Design .
    • Edit : Lets you edit the properties of the form and its components. For example, adding a component, dropping an image, and specifying mandatory fields.
    • Style : Lets you style the appearance of components of your form. For example, in style mode, you can select a panel and specify its background color.
    • Developer : Lets a developer to:
      • Discover what forms are composed of.
      • Debug what is happening where and when, which in turn helps to resolve issues.
    • Design : Lets you enable or disable custom components, or out-of-the-box components that are not listed in the Sidebar.
  • Preview : Lets you preview how the form looks when you publish it.

Component toolbar

When you select a component, you see a toolbar that lets you work it. You get options to cut, paste, move, and specify properties of the components. Your options are:
A. Configure : When you tap Configure , component properties are visible in the sidebar. Configuring these properties let you customize the data capturing experience. You can change the element name of the component, specify the label text in the Title field of the component. Element name lets you capture values users enter using the component. In the component properties, you specify the behavior of the component, and manage user input. Configure properties in the sidebar to capture user data and use it for further processing. Properties for adaptive form container let you specify Client libraries, Layouts, Themes, Document of Record settings, save settings, submission settings, and metadata settings.
B. Copy : You can use the copy option to copy a component and paste it in other places in the form. When you paste a component, the pasted component gets a new element name but retains the properties of the copied component.
C. Cut : You can use the cut option to move a component from one place to another in the adaptive form.
D. Delete : Lets you delete the component from the form.
E. Insert : Lets you insert a component above the selected component.
F. Paste : Lets you paste the component you cut or copied using the options described above.
G. Edit rules : Lets you open the rule editor. For more information, see Rule Editor .
H. Group : Lets you select multiple components if you want to cut, copy, or paste more than one component together.
I. Parent : Lets you select the parent of a component. For example, a text field lies within a sub-section, which resides in a section. The section resides in the guide root panel, and the adaptive form container is the parent of a guide root panel. For a component, you can see all the options with the hierarchy sorted bottoms-up.
For example, if you tap Parent for a text box, you can see:
  • Sub-section
  • Section
  • guideRootPanel
  • Adaptive Form container
J. Others : Provides more options to work with the selected component.
  • View SOM expression
  • Save a panel as fragment (for panels only)
  • Add child panel (for panels only)
  • Add panel toolbar (for panels only)
  • Replace (not for panels)

Adaptive form page

The adaptive form page is the actual form. It is like any other WCM page modeled as the WCM cq:Page component. The following image shows the content structure of a typical adaptive form.
The content structure typically contains the following primary components:
  • guideContainer : The root of an adaptive form, which is marked as Start of adaptive form in the adaptive form UI. In this component, you can specify:
    • Mobile Layout of the adaptive form : Defines the appearance of the form on mobile devices.
    • Thank You page : Defines the page where the user is redirected after submitting the form.
    • Submit Action : Defines how the form is processed on the server once the user submits the form.
    • Styling : Specifies the path to the CSS file used to customize the appearance of the form.
  • rootPanel : The root panel of an adaptive form. It can contain subpanels under the items node. Each panel including the root panel can have a layout associated with it. The layout of the panel dictates how the form is laid out. For example, in the Accordion layout*, *its items are laid out as Accordion steps.
  • toolbar : An adaptive form container has an associated global toolbar, which is global to the form. This toolbar can be added using the **Add Toolbar **action in the edit bar, which allows authors to add actions, such as Submit, Save, Reset, and so on.
  • assets : This node contains additional information used for form authoring. For example, form model details, localization details, and so on).