Version and Compatibility
The Adaptive Forms Accordion Core Component was released in Feb 2023 as part of the Core Components 2.0.4 for Cloud Service and Core Components 1.1.12 for AEM 6.5.16.0 Forms or later. Here’s a table showing all supported versions, AEM compatibility, and links to corresponding documentation:
| Component Version | AEM as a Cloud Service | AEM 6.5.16.0 Forms or later |
|---|---|---|
| v1 | Compatible with release 2.0.4 and later | Compatible with release 1.1.12 and later but less than 2.0.0. |
For information on Core Component versions and releases, refer to the Core Components Versions document.
Technical Details
Get the latest information on the Adaptive Forms Container Core Component in the technical documentation on GitHub. For more on developing Core Components, check out the Core Components developer documentation.
Configure Dialog
You can easily customize your form container experience for visitors with the Configure Dialog. You can also define form container options with ease for a seamless user experience.
Basic Tab
-
Title - With its Title, you can easily identify a component in a form and by default, the title appears on top of the component. If you do not add a title, the name of the component is displayed instead of the title text.
-
Prefill services - This option allows the user to select a prefill service for retrieving data when the Adaptive Form is rendered. Learn more about how to create and configure a prefill service.
-
Role: The role is an HTML attribute used to specify the purpose of an HTML element to assistive technologies such as screen readers. The role attribute is used to provide additional context and semantic meaning to an element, making it easier for screen readers to interpret and announce the content to the user. For example, in AEM Forms, a form field’s label might have the role of “label,” and its input field might have the role of “textbox.” This helps the screen reader understand the relationship between the label and input field, and correctly announce them to the user.
-
Client Library category - The user can configure custom JavaScript library per Adaptive Form. It is recommended to keep only the reusable functions in the library, which have dependency on jquery and underscore.js third-party libraries.
At times, if there are complex validation rules, the exact validation script reside in custom functions and users calls these custom functions from field validation expression. To make this custom function library known and available while performing server-side validations, the form user can configure the name of AEM client library under the Basic tab of Adaptive Form Container properties.
User can configure customJavaScript library per Adaptive Form. In the library, only keep the reusable functions, which have dependency on jquery and underscore.js third-party libraries.
Data Model Tab
You can use the Form Data Model to connect a form to a Data Source to send and receive data based on user actions. You can also connect a form to a JSON schema to receive the submitted data in a pre-defined format. Based on the requirement, connect your form to a JSON schema or Form data model:
- Create a JSON Schema and upload to your environment
- Create a Form Data Model
Drafts
- Automatically save drafts: Select the Automatically save drafts check box to enable saving of forms as drafts.
- Save Preference: Configure Save Preference as Save drafts at regular intervals, to auto-save the form after a specific interval of time.
Save interval frequency (Seconds): Specify the time interval (in seconds) to set the duration that triggers the automatic saving of the form at the defined interval.
Submission Tab
Users can configure different actions for an Adaptive Form submissions.
- Redirect URL/Path - This option allows user to configure a page for each form, to which the form users are redirected after submitting an Adaptive Form. Click here for more information on how to configure redirect pages.
- Show Message - This option allows users to add a message that is displayed when the Adaptive Form is successfully submitted. The predefined text is included in the dialog box and it can be modified by the user. The Show Message dialog supports rich text formatting tools that allow users to format the added text.
- Submit Action - A Submit Action is triggered when a user clicks the Submit button on an Adaptive Form. The users can select Submit Actions from the drop-down list that are supported out of the box. Learn how to configure a Submit Action in the Submission tab.
Design Dialog
Design Dialog is used to define and manage CSS styles for the Form Container component.
Allowed Components Tab
The Allowed Components tab allows template editor to set the components that can be added as items to the panels in the component in the Adaptive Forms editor.
Default Components Tab
The Default Components tab allows the template editor to specify the components that are visible by default as items in the form container component in the Adaptive Forms editor.
Responsive Settings Tab
The Responsive Settings tab allows the template editor to specify the number of columns in the grid within the form container component in the Adaptive Forms editor.
Styles Tab
The Adaptive Forms File Attachment Core Component supports the AEM Style System.
-
Default CSS Classes: You can provide a default CSS class for the Adaptive Forms Form Container Core Component.
-
Allowed Styles: You can define styles by providing a name and the CSS class that represents the style. For example, you can create a style named “bold text” and provide the CSS class “font-weight: bold”. You can use or apply these styles to an Adaptive Form in Adaptive Forms editor. To apply a style, in Adaptive Forms editor, select the component you want to apply the style to, navigate to the properties dialog, and select the desired style from the Styles drop-down list. If you need to update or modify the styles, simply return to the Design Dialog, update the styles in the styles tab, and save the changes.
Custom Properties Tab
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.
-
Group Name: You can provide a name to identify the custom property group. You can add, delete, or rearrange multiple custom property groups. After adding the custom property group, you can see the following options:
-
Key-Value Pairs: You can add multiple custom property names and custom property values by clicking the Add button for each custom property group.
-
Delete: Tap or click to delete the custom property name and custom property value.
-
Rearrange: Tap or click and drag to rearrange the order of the custom property name and custom property value.
-