Using External Data Sources in AEM Forms with OpenAPI Swagger Specification

AEM Forms connected with REST API using FDM.

What are the data sources ?

A host of data storage solutions, such as REST services, Databases, Web services, CRMs etc., are used in businesses applications. The following data sources are supported out-of-the-box in AEM Forms:

• RESTful web services
• Relational databases
• AEM user profile
• SOAP-based web services
• OData services

However, it’s possible to integrate other data sources as well with a little customization.

What are Adaptive Forms?

Adaptive Forms (a feature of AEM Forms) allow us to create engaging, responsive, and adaptive forms that automatically render as PDF or HTML5 based on device and browser settings. These forms can submit user-filled data, dynamically pre-fill the form fields from data sources, and adapt to user responses by adding or removing fields or sections based on user response.

How to retrieve and submit data in a form?

Form Data Model (also known as FDM) framework enables AEM Forms to configure and connect different data sources to it. It provides an intuitive user interface to create a unified data representation schema of business entities and services across connected data sources.

Getting Started

In this article, we’ll use Open API Swagger specification to integrate a RESTful web service with our adaptive form using FDM.

Prerequisites/Tools

1. A RESTful web service
2. AEM
3. Node & NPM

Step 1: Create a RESTful web service

Create a new RESTful Web Service or download the sample REST API below.

GitHub - abhishekarora12/UsersNodeAPI: A Sample RESTful Web Service API in nodejs

To start the API, type:

npm run start

API definition:

‘/users’ has two methods GET and POST

‘/user/id’ has GET, PUT and DELETE

Step 2: Create a swagger specification

RESTful web service can be described using Swagger specifications in JSON or YAML format in a Swagger definition file.

Swagger Definition for RESTful API.

Modify the swagger file according to your API specifications.

Step 3: Create a form data model

1. Create a new RESTful Service data source.
2. Create a new form data model and select the data source created above.
3. Test the web service in this fdm.

See the video below for reference

Creating a form data model.

Step 4: Create an Adaptive Form using the form data model

1. Open the forms tab and create a new adaptive form.
2. Select the blank template.
3. After filling the form name, open form model tab and select the user fdm.
4. In form edit mode, drag and drop the data sources.
5. Also, drag and drop a submit button.
6. Open the form container setting and select “Form Data Model” in the pre-fill service.
7. Edit the form data model and enable read service on User object.
8. Test the service by changing the id literal.

See the video below for reference:

Creating an Adaptive Form using FDM.

Final Step: Putting everything together

In this section, we will get and set the data between our adaptive form and data source (User REST API) using the Form Data Model.

1. Remove the FDM default read parameters set in the previous section.
2. In Edit Form, drag and drop a new Textbox component in form and name it User Id.
3. Click on this textbox and set the rules.
4. Invoke service “Get /user/{id}” on textbox change event and fill in the fields.

See the video below for reference:

Get and set the data between adaptive form and data source using FDM.

Now that everything is connected, all that’s left is to test by modifying the User ID and see all the other form fields changing automatically from the incoming REST API data employing form data model.