Adaptive Forms Core Components adaptive-forms-core-components-introduction
Using the Adaptive Forms Core Components in ÃÛ¶¹ÊÓƵ Experience Manager, you can create compelling enrollment experiences.
Core Components overview
In ÃÛ¶¹ÊÓƵ Experience Manager (AEM), components are the building blocks used to create pages and forms. They provide a simple and powerful way for authors to create and manage content, while also providing developers with the flexibility and extensibility needed to create custom components. These are designed to speed up development time and reduce maintenance costs for websites and forms, be flexible and can be easily customized to match the specific needs of a website and form.
The Core Components are also designed to be responsive and support a wide range of devices, including desktops, tablets, and smartphones. They also adhere to the latest web standards and best practices, making them a robust and reliable solution for creating web content.
Overall, the Core Components are an essential tool for creating and managing web content in AEM, providing a powerful and flexible solution that can help to reduce development time and maintenance costs, while also providing a great user experience to the website visitors.
Adaptive Forms Core Components
The Adaptive Forms Core Components are a set of 30 open-source, BEM-compliant components that are built on the foundation of the ÃÛ¶¹ÊÓƵ Experience Manager WCM Core Components. They are specifically designed to be used for creating Adaptive Forms, which are forms that adapt to the device, browser and screen size of the user.
These components can be used to create exceptional data capture and enrollment experiences by providing a wide range of form field options, including text fields, checkboxes, drop-down menus, and more. They also include features like validation, conditional logic, and responsive design, which can be used to create forms that are user-friendly and easy to use.
Additionally, as these components are open-source, developers have the ability to easily customize and extend the components to match the specific needs of their organization. And, These components are built on the BEM methodology, which ensures that they are scalable and maintainable.
Features features
Benefits benefits
Data capture experiences are crucial for lead generation and enrollment, and the Adaptive Forms Core Components provide a powerful solution for creating forms that are optimized for data capture. Some of the reasons to use Core Components to create these experiences over foundation components are:
-
: The AEM Adaptive Forms Core Components are open-source and available on GitHub, along with comprehensive documentation. This makes it easier for developers to understand the components and how they work, as well as contribute to their development. The website is also a valuable resource, where developers can see the components in action and access detailed documentation.
-
BEM Model for Styling: The Core Components follow the BEM (Block Element Modifier) model for styling, which is a well-established and widely used methodology for organizing CSS. This makes it easier for developers to understand how the styles are organized and how to modify them to fit their specific needs.
-
No Dependency on Third-Party Libraries: One of the advantages of the Core Components is that they have no dependency on third-party JavaScript libraries, including JQuery and Underscore. This makes the components faster and more lightweight, as well as easier to integrate into an existing AEM implementation.
-
Focus on Performance and Accessibility: The Core Components are built with performance and accessibility in mind, which is reflected in their high Google Lighthouse and web vitals scores. This makes it easier for developers to create accessible and high-performing web pages, which is increasingly important in today’s digital landscape.
-
Form Components in Sites 30 Template and Themes: The Core Components provide support for form components in the Sites 30 template and themes, making it easier for developers to create and customize forms within AEM.
-
Easier to Style: The Core Components are easier to style than their foundation component counterparts. The theme creation process is similar to Sites, with the ability to inherit the same theme/CSS from the parent Sites page. Additionally, the BEM model for styling makes it easier to understand and modify the styles.
-
Accessibility: Adaptive Forms Core Components support accessibility standards and guidelines to ensure that forms can be used by people with disabilities, including those using assistive technologies such as screen readers.
-
Versioning: You can create and manage multiple versions of a Core Components based Adaptive Forms, engage in collaborative discussions through comments, and attach annotations to specific form components, thereby enhancing the overall form-building experience.
Available Components: A breakdown by component type
The current version of AEM Forms has the following Core Components, Foundation Components, and Form Block Components (Edge Delivery Services).
- In addition to the components listed above, Forms block supports all valid and as components.
- Need a component not listed above? Request it by emailing aem-forms-ea@adobe.com from your official address.
Easy-to-use forms editor
The editor for Core Components based Adaptive Forms is similar to the one you already use for creating AEM Sites Pages. Here’s what you get:
-
Familiar UI elements and settings: When configuring properties for form components, you see a properties dialog looks just like the ones you are using to for WCM Core Components. This makes it quicker to find the options you need. Like WCM Core Components, for form components, the properties dialog appear in the center of the editor with clear tabs separating basic and advanced options, help text, and accessibility information – all in a tabs format for easy navigation.
-
Rule Editor: You can add logic and dynamic features to your forms without writing code. You can use the built-in rule editor to:
- Show or hide fields based on user choices
- Enable or disable an object
- Set a value for an object
- Perform calculations
- Set property of an object
- Validate data entry
- Invoke a service (call external functionality)
- Use built-in functions (predefined functions for common tasks)
- Use custom functions (your own code for specific needs)
- Validate fields and panels (ensure that data meets requirements)
- Validate the value of an object
- Execute functions to compute the value of an object
- Invoke a Form Data Model (FDM) service and perform an operation
- Dynamically add styles (change the appearance based on conditions)
- Create other rules (chain actions and logic)
- and more!
The rule editor does not have the code editor. You can use custom functions to add your own code for specific needs to the rule editor.
-
Pre-filling forms: You can automatically populate certain fields in a form with existing data when a user opens it. This saves users time and effort by eliminating the need to manually enter information that might already be available. The Core Components editor provides an OOTB pre-fill service to populate form fields with the help of a Form Data Model. You can also create custom prefill services for more complex scenarios.
-
Document of Record (DoR): A Document of Record (DoR) refers to a formal, printable representation of the data submitted through the form. It serves as a permanent record of the information a user entered, providing a snapshot of the submitted data in a user-friendly format, typically a PDF document. You can use the editor to easily configure a custom template or use an OOTB template to generate a DoR.
-
Form Data Model: An Adaptive Forms Data Model (FDM) acts as a bridge between your Adaptive Forms and your data sources. It essentially defines the structure and organization of the data that your forms collect and interact with. You can use the editor to easily connect your form with a Forms Data Model (FDM).
-
Form Submissions: A form submission refers to the process of users completing and sending their filled-out forms. This triggers a series of actions defined within the form’s configuration, ultimately leading to the storage or processing of the submitted data. The Adaptive Forms editor offers a variety of options for configuring form submissions. Some of the common submit actions are:
-
Adaptive Forms Core Components in Sites Page editor: You can enable and use Adaptive Forms Core Components in AEM Page Editor and AEM Experience Fragments to directly create data capture experience along with builidng a Sites page.
embed
Enable Adaptive Forms Core Components
Enabling Adaptive Forms Core Components on AEM Forms as a Cloud Service, allows you to start creating, publishing, and delivering Core Components based Adaptive Forms and Headless Forms using your AEM Forms Cloud Service instances to multiple channels. For detailed instructions to enable Adaptive Form Core Components, see Enable Adaptive Forms Core Components on AEM Forms as a Cloud Service and local development environment.
The Adaptive Forms Core Components have the following requirements.
If your AEM Cloud Service SDK version older than 2023.02.0, ensure that you have prerelease
flag enabled on your environment as Adaptive Forms Core Components were part of pre-prelease before the 2023.02.0 release.
Create a Core Components based Adaptive Form
You can perform the following actions on both AEM Forms as a Cloud Service or AEM 6.5 Forms environments: