Adobe recommends using the modern and extensible data capture Core Components for creating new Adaptive Forms or adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.
Version | Article link |
---|---|
AEM 6.5 | Click here |
AEM as a Cloud Service | This article |
In a typical forms-centric portal deployment scenario, forms development and portal development are two disjoint activities. While Form Designers design and store forms in a repository, Web Developers create a web application to list forms and handle submission of forms. Forms are copied over to the web tier as there is no communication between the forms repository and the web application.
Such scenarios often result in management issues and production delays. For example, if there is a newer version of a form available in the repository, you need to replace the form on the web tier, modify the web application, and redeploy the form on the public site. Redeploying the web application might cause some server downtime. Typically, the server downtime is a planned activity and therefore the changes cannot be pushed to the public site instantaneously.
AEM Forms provide portal components that reduce management overheads and production delays. The components equip Web Developers to create and customize a Forms Portal on websites authored using Adobe Experience Manager (AEM).
The Form Portal components allow you to add the following functionality:
AEM Forms provide the following portal components out of the box:
Search & Lister: This component lets you list forms from the forms repository onto your portal page and provides configuration options to list forms based on specified criteria.
Drafts & Submissions: While Search & Lister component displays forms which are made public by Forms author, the Drafts & Submissions component displays forms that are saved as draft for completing later and submitted forms. This component provides personalized experience to any logged in user.
Link: This component lets you create a link to a form anywhere on the page.
You can import the out-of-the-box Forms Portal components from the AEM Project Archetype. After importing, perform the following configurations:
To import out-of-the-box Forms Portal components on AEM Forms as a Cloud Service, perform the following steps:
Clone Cloud Manager Git repository on your local development instance: Your Cloud Manager Git repository contains a default AEM project. It is based on AEM Archetype. Clone your Cloud Manager Git Repository using Self-Service Git Account Management from Cloud Manager UI to bring the project on your local development environment. For details on accessing the repository, see Accessing Repositories.
Create Experience Manager Forms as a [Cloud Service] project: Create Experience Manager Forms as a [Cloud Service] project based on AEM Archetype 27 or later. The archetype help developers easily start developing for AEM Forms as a Cloud Service. It also includes some sample themes and templates to help you started quickly.
To create Experience Manager Forms as a Cloud Service project, open the command prompt and run the below command. To include Forms specific configurations, themes, and templates, set includeForms=y
.
mvn -B archetype:generate -DarchetypeGroupId=com.adobe.aem -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=30 -DaemVersion="cloud" -DappTitle="My Site" -DappId="mysite" -DgroupId="com.mysite" -DincludeForms="y"
Also, change appTitle
, appId
, and groupId
, in the above command to reflect your environment.
After the project is ready, update the <core.forms.components.version>x.y.z</core.forms.components.version>
property in the top-level pom.xml
of the Archetype project to reflect the latest version of core-forms-components in your AEM Archetype
project.
Deploy the project to your local development environment: You can use the following command to deploy to your local development environment
mvn -PautoInstallPackage clean install
For the complete list of commands, see Building and Installing
Deploy the code to your AEM Forms as a Cloud Service environment.
Experience Manager Forms Data Integration provides Azure storage configuration to integrate forms with Azure storage services. The Form Data Model can be used to create Adaptive Forms that interact with Azure server to enable business workflows.
Before executing these steps, ensure that you have an Azure storage account and an access key to authorize access to the Azure storage account.
Perform the following steps to configure Unified Storage Connector for AEM Workflows:
To use any core component (including the out-of-the-box portal components) in an Adobe Experience Manager (AEM) site, you must create a proxy component and enable it for your site. For creating a proxy component and enabling portal components, see Using Core Components.
Once a portal component is enabled, you can use it in the author instance of your sites page.
You can create and customize Forms Portal on websites authored using AEM by adding and configuring the portal components. Ensure that the components are enabled before using them in the Forms Portal.
To add a component, either drag and drop the component from the Components pane to the layout container on the page, or select the add icon on the layout container and add the component from the Insert New Component dialog.
The Drafts & Submissions component displays forms that are saved as draft for completing later and submitted forms. To configure, select the component and then select the . In the Drafts and Submissions dialog, specify the title to indicate the form listing as draft or submitted forms. Also select whether the component should list draft forms or submitted forms in card or list format.
The Search & Lister component is used to list adaptive forms on a page and to implement search on the listed forms.
To configure, select the component and then select the . The Search and Lister dialog opens.
The link component enables you to provide links to an adaptive form on the page. To configure, select the component and then select the . The Edit Link Component dialog opens.
You can configure to submit an adaptive form only when all the recipients have completed the signing ceremony. Follow the steps below to configure the setting using Adobe Sign.
You can save forms as Drafts for completing them later. There are two ways in which a form is saved as a draft:
To create a “Save Form” rule on a form component, for example, a button, follow the steps below:
You can configure the auto-save feature for an adaptive form as follows: