Save forms as drafts and list them on Sites page
This article contains content about theAuto Savefeature, a pre-release feature. The pre-release feature is accessible only through our pre-release channel.
Consider a user who begins filling out a form but needs to pause and return later. AEM offers a save-as-draft
option, allowing the user to save the form as a draft for future completion. To facilitate this, AEM provides the Drafts & Submissions Forsm Portal component out of the box, which displays drafts and submissions on AEM Sites pages. The component lists forms that have been saved as drafts for later completion, as well as those that have been submitted. Only logged-in users can edit their drafts or view their submitted forms. However, if an anonymous user navigates through the list of forms using the Search & Lister component and saves a form as a draft, that draft is not listed by the Drafts & Submissions component. To view drafts and submissions, users must be logged in at the time of form submission.
Pre-requisites
-
Enable Adaptive Forms Core Components for your environment.
After deploying the latest Core Components to your environment, the Forms Portal components become accessible in your authoring environment.
Configure Azure Storage and Unified Storage Connector for Drafts & Submissions Forms Portal component
The Drafts & Submissions component needs a storage setup for saving and listing drafts on AEM Sites page. The Unified Storage Connector offers a framework to link AEM with external storage. To save the form as a draft, ensure that you have an Azure storage account and an access key to authorize access to the Azure storage account. Once, you have Azure storage account and the access key, perform the following steps to create an Azure Storage configuration:
-
Navigate to Tools > Cloud Services > Azure Storage.
-
Select a configuration folder to create the configuration and select Create.
-
Specify a title for the configuration in the Title field.
-
Specify the name of the Azure storage account in the Azure Storage Account and Azure Access Key fields.
Enter
Connection String
in theAzure Storage Account
textbox andAzure Key
in theAzure Access key
textbox. -
Click Save.
note note NOTE You can retrieve the Azure Storage Account and Azure Access Key from the Microsoft Azure Portal. After, you have successfully created the Azure Storage Configuration, configure the Unified Storage Connector for Forms Portal, using the following steps:
-
Navigate to Tools > Forms > Unified Storage Connector.
-
In the Forms Portal section, select Azure from the Storage drop-down list.
-
Specify the configuration path for the Azure storage configuration in the Storage Configuration Path field.
-
Select Save.
Once you have successfully configured Azure Storage and Unified Storage Connector for storing the drafts and submitted forms, add the Drafts & Submissions component on AEM Sites page.
How to add the Drafts & Submissions component to an AEM Sites page?
You can use out-of-the-box Forms Portal components to list drafts and submissions on the Sites page. Perform the following steps to add the Drafts & Submissions portal component:
-
Open the AEM Sites page in an Edit mode.
-
Go to the Page Information > Edit Template
-
Click the Policy and select the Drafts & Submissions checkbox under the [AEM Archetype Project Name] - Forms and Communications Portal.
-
Click Done.
-
Now re-open the AEM Sites page in the authoring mode.
-
Locate the section within the page editor that allows you to add the Forms Portal component.
-
Click the Add icon. The icon is a plus sign (+) that signifies the option to add new components.
Clicking the Add icon displays an Insert New Component dialog box that displays various components for insertion.
note note NOTE Alternatively, you can also drag and drop the component. -
Browse the available components in the dialog box and select the desired component from the list. For example, select the Drafts & Submissions component from the list to add the Drafts & Submissions Forms Portal component.
Now, configure the properties of the Drafts and Submissions component according to the requirements.
Configure properties of the Drafts & Submissions Component
You can configure the properties of the Drafts & Submissions:
-
Select the Drafts & Submissions component.
-
Click the and the dialog box appears.
-
In the Drafts and Submissions dialog, specify the following:
- Title To identify a component in a Sites page and by default, the title appears on top of the component.
- Select Type: To indicate the form listing as draft or submitted forms. If you choose Draft Forms, the forms saved as drafts are displayed. Alternatively, selecting Submitted Forms shows the forms submitted by logged-in users.
- Layout: To display list draft forms or submitted forms in the card or list format.
Configure forms to save as drafts
You can configure Adaptive Forms in the following two ways to save them as drafts for later use:
User action
To save a form as a Draft, create a Save Form rule on a form component, such as a button. When the button is clicked, the rule triggers, and the form is saved as a draft. Perform the following steps to create a Save Form rule on a button component:
-
Open an Adaptive Form in an edit mode.
-
Select the Edit Rules icon to open the Rule Editor for the Button component.
-
Select Create to configure and create the rule for button.
-
In the When section, select is clicked and in the Then section, select the Save Form option.
-
Select Done to save the rule.
When you preview an Adaptive Form, fill it out, and click the Save Form button, the form is saved as a draft.
Auto save
You can also configure an Adaptive Form to save automatically based on a time-based event, ensuring the form is saved after the specified duration. When you enable Forms Portal components for your environment, the Auto Save tab appears in the Forms container properties. You can configure the auto-save feature for an Adaptive Form:
-
In the author instance, open an Adaptive Form in an edit mode.
-
Open the Content browser, and select the Guide Container component of your Adaptive Form.
-
Click the Guide Container properties icon and open the Auto-Save tab.
-
Select the Enable check box to enable auto-save of the form.
-
Configure Trigger as Time based, to auto-save the form after a specific interval of time.
-
Specify the time interval in Auto save on this interval (In seconds) to set the duration that triggers the automatic saving of the form at the defined interval.
-
Click Done.
View drafts/submitted forms on Sites page using the Drafts & Submissions component
To view saved drafts or submitted forms, use the Drafts & Submissions Forms Portal component.
When Select Type is selected as Draft Forms in the configure dialog of the Drafts & Submissions component, the forms saved as drafts appear on the Sites page. You can open the drafts by clicking on the ellipsis (…) to complete the form.
When Select Type is selected as Submitted Forms in the configure dialog of the Drafts & Submissions component, the submitted forms appear. You can view the submitted forms but cannot edit them.
You can also discard the forms by clicking on the ellipsis (…) that appears in the bottom-right corner of the form.
Next Steps
In the next article, let us learn how to add references to forms on the Sites page using the Link Forms Portal component.
Related articles
See Also see-also
- Create an AEM Adaptive Form
- Add an AEM Adaptive Form to the AEM Sites page
- Apply themes to an AEM Adaptive Form
- Add components to an AEM Adaptive Form
- Use CAPTCHA in an AEM Adaptive Form
- Generate a PDF version (DoR) of an AEM Adaptive Form
- Translate an AEM Adaptive Form
- Enable Adobe Analytics for an Adaptive Form to track form usage
- Connect Adaptive Form to Microsoft SharePoint
- Connect Adaptive Form to Microsoft Power Automate
- Connect Adaptive Form to Microsoft OneDrive
- Connect Adaptive Form to Microsoft Azure Blob Storage
- Connect Adaptive Form to Salesforce
- Use Adobe Sign in an AEM Adaptive Form
- Add a new locale for an Adaptive Form
- Send Adaptive Form data to a database
- Send Adaptive Form data to a REST endpoint
- Send Adaptive Form data to AEM Workflow
- Use Forms Portal to list AEM Adaptive Forms on an AEM website
- Add versionings, comments, and annotations to an Adaptive Form
- Compare Adaptive Forms