Documentation AEM as a Cloud Service User Guide

Save forms as drafts and list them on Sites page

Last update: Fri Aug 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

User
Developer

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.

Drafts icon

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

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 the Azure Storage Account textbox and Azure Key in the Azure 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.

NOTE

If you need to configure a storage option, other than Azure, write to aem-forms-ea@adobe.com from your official email address with your detailed requirements.

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
Auto-save

User action

NOTE

Ensure that the Core Components version is set to 3.0.24 or later to save forms as drafts using the Save Form rule.

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

NOTE

Ensure that the Core Components version is set to 3.0.52 or later to save forms as drafts using the auto save feature.

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.

Drafts icon

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.

Submissions icon