Introduction to authoring adaptive forms introduction-to-authoring-adaptive-forms

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

Sidebar

Page toolbar

Component toolbar

Adaptive form page

See form content such as panels, components, fields, and layout.

Edit component properties.

Search, view, and use assets in your AEM Digital Asset Management (DAM) repository.

Add components on your form.

Click to enlarge

Content browser

In the content browser, you can see

• Form Objects

  Shows object hierarchy of the Form. Author can navigate to specific form component by tapping that element in Form Object Tree. Author can search objects and rearrange them from this tree.

• Data Model Objects

  Lets you see the form model hierarchy.

  It allows you to drag and drop form-model elements on the adaptive form. The added elements automatically get converted into form components while retaining their original properties. You can see data model objects when your form uses XML schema, JSON schema, or XDP template.

Properties browser

Lets you edit the properties of a component. Properties change according to a component. To see properties of the adaptive form container:

Select a component, then tap > Adaptive Form Container, and then tap .

Assets browser

Segregates different types content such as images, documents, pages, movies, and so on.

Components browser

Includes components that you can use to build an adaptive form. You can drag components from onto the adaptive form to add form elements, and configure added element as per the requirements. The following table describes the components listed in components browser.

Each component has associated properties that control its appearance and functionality. To configure the properties of a component, tap the component and tap to open the component properties in the Properties browser.

A component is identified with its element name. When you tap , you can change the name of the component by changing the Element Name field value in the properties browser. The Element Name field accepts letters, numbers, hyphens (-), and underscores (_) only. Other special characters are not allowed, and element name should begin with a letter.

You can modify the Title property of an adaptive form component inline in the form editor without opening the Properties browser as long as the title is visible on the form. To do so:

1. Tap to select a component that has a Title property and whose Hide title property is disabled.
2. Tap to make the title editable.
3. Modify the title and tap the Return key or tap anywhere outside the component to save the changes. Tap the Esc key to discard the changes.

Some adaptive form components like Email and Telephone include out-of-the-box validation patterns. However, you can specify custom validation by updating the Validation Pattern field under the Patterns accordion in the component properties. See component descriptions in the table above for more information about default validations.

Adaptive forms fields, such as Numeric Box and Email can be configured to include specialized HTML5 input types. When these fields are in focus on mobile devices and tablets, the keypad displays specific alphabet, numbers, and characters upfront that are commonly used to input information in the fields. It helps users enter information quickly without having to toggle between characters sets on the keypad. To allow specialized input for a component, enable the Use HTML Type Number check box in its component properties.

You can enable a Text Box component to accept Rich Text. To enable rich text for a text box, enable the Allow Rich Text check box in the component properties.

You can enable Text Box, Email, and Telephone components to autofill values for fields like name, address, credit card, telephone, and email from the information stored in browser’s autofill settings. To enable this feature, select Enable Autofill in the component properties and select an Autofill Attribute. When a user fills an adaptive form, the values are suggested from the autofill profile in the browser or based on the values earlier filled by the user. Note that autofill works if autofill settings in user’s browser are turned on.

Specify values for Radio Button and Check Box items in {value}={text} format in component properties.

The File attachment component, by default, allows a user to attach only one file. However, you can configure the component properties to support multiple attachments. In addition, if a user attaches multiple files with the same filename, the attachments can cause some issues. Therefore, it is recommended to associate a unique identifier for each submitted attachment at form submission. To do so:

1. On your AEM Forms server, navigate to Adobe Experience Manager > Tools > Operations > Web Console.
2. Find and tap Adaptive Forms Configuration Service.
3. In the Adaptive Forms Configuration Service dialog, enable Make File Names Unique. By default, it is disabled.

To enable users to attach a PDF using Safari browser, ensure that application/pdf is added to the Supported File Types property of the File attachment component. Adaptive forms created with previous AEM Forms version may contain .pdf instead of application/pdf in the Supported File Types property.

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.

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