Integrate Adaptive Forms in AEM Sites

Published
Modified
There are two potential scenarios for integrating Adaptive forms into AEM Sites: one for new projects and another for existing projects. Adobe has developed the aem-core-forms-components (Forms Core Components) which can be used to incorporate forms standard components into AEM Sites.
During project creation using the aem-project-archetype, you can enable Forms Core Components for New Projects. The includeFormsenrollment option is solely responsible for integrating Forms Core Components dependencies and generating associated artifacts in a new AEM project. Customize the values as per your needs when creating a project. Only the essential options below are required to establish a new project with Forms Core Components.
AEM 6.5.X
mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D archetypeVersion=47 \ -D appTitle="AEM Demo" \ -D appId="aem-demo" \ -D groupId="com.aem.demo" \ -D aemVersion="6.5.20" \ -D includeFormsenrollment="y" \ -D sdkFormsVersion="6.0.1180"
After generating the project, the AdaptiveForm components will be automatically included in your project, allowing you to immediately utilize these components on your pages.
However, for Existing Projects, you'll have to manually add several dependencies to the pom.xml files. Moreover, incorporating Adaptive Form components into the project will also require manual intervention.
pom.xml
<dependency> <groupId>com.adobe.aemfd</groupId> <artifactId>aemfd-client-sdk</artifactId> <version>${aem.forms.sdk.api}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-apps</artifactId> <type>zip</type> <version>${core.forms.components.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> <version>${core.forms.components.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> <version>${core.forms.components.af.version}</version> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> <version>${core.forms.components.af.version}</version> </dependency>
ui.apps / pom.xml
<dependency> <groupId>com.adobe.aemfd</groupId> <artifactId>aemfd-client-sdk</artifactId> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> </dependency>
core / pom.xml
<dependency> <groupId>com.adobe.aemfd</groupId> <artifactId>aemfd-client-sdk</artifactId> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> </dependency>
all / pom.xml
<embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> <target>/apps/aem-demo-vendor-packages/application/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> <target>/apps/aem-demo-vendor-packages/application/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-apps</artifactId> <type>zip</type> <target>/apps/aem-demo-vendor-packages/application/install</target> </embedded> <embedded> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> <target>/apps/aem-demo-vendor-packages/application/install</target> </embedded> <!-- ========================================== --> <!-- D E P E N D E N C I E S --> <!-- ========================================== --> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-core</artifactId> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-apps</artifactId> <type>zip</type> </dependency> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>core-forms-components-af-core</artifactId> </dependency>
After updating the pom.xml files, the subsequent step involves creating proxy components within the project's codebase. Here's an example demonstrating how to incorporate the Adaptive Form text component by extending the Forms Core Components.
adaptiveForm / text / .content.xml
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:description="Adaptive Form Text (v1) component" jcr:primaryType="cq:Component" jcr:title="Adaptive Form - Text" sling:resourceSuperType="core/fd/components/form/text/v1/text" componentGroup="AEM Demo - Adaptive Form"/>
adaptiveForm / text / _cq_template.xml
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="nt:unstructured" jcr:title="Text" fieldType="plain-text"/>
If you allow "AEM Demo - Adaptive Form" group properly in the template, you'll find the "Adaptive Form - Text" component in the component sidekick. According to your requirements, you can include additional adaptive form components.
Congratulations! You've successfully integrated Adaptive Forms functionality into AEM Sites. You can now incorporate AEM Forms related features into your content pages.