CodenTree

Monday, April 10, 2023

JSON file to Adaptive Form Schema in adobe aem

In this Article following subtopics of adobe aem adaptive form

Create Form Fragment
Create Schema from JSON file
Create an Adaptive form with JSON Schema

1. Create Form Fragment

Similar to content fragments or experience fragments, it is also possible to create a form fragment that can be reused. The form fragment contains fragments of input fields that we can create. The steps below need to be followed in order to create Form Fragment

Go to Navigation, Forms, Forms & Documents,
Click on Create button, Select the Adaptive Form Fragment
Add title, configuration Container, and create then edit

First of all, you need to drag a "Panel" Component, it's not mandatory but its have some advantages
next, configure your component according to the bottom image
Now you need to drag your all required input fields inside the panel component
I just added two input fields,

Form Fragment is Done, Let's use this fragment in any Adaptive Form

open the edit mode of an existing adaptive form that you have created or create a new adaptive form and open it in edit mode.
Select Assets Icons, Adaptive Form Fragment from dropdown,
At the bottom, there will list of your created form fragments just drag and drop like component

Open your form in Preview mode then you will find your fragment fields

2. Create Schema from JSON File

The steps below need to be followed in order to create a schema using a JSON file

NOTE: your JSON file name should be (anyname.schema.json)

Prepare your JSON file according to your requirement
I am adding mine created file (you can reuse this as per your need)

{
    "$schema": "https://json-schema.org/draft-04/schema#",
    "title": "User Schema",
    "type": "object",
    "properties": {
        "userName": {
            "title": "User Name",
            "type": "string"
        },
        "dateOfBirth": {
            "title": "Date of Birth",
            "type": "string",
            "format": "date"
        },
        "email": {
            "title": "User Email",
            "type": "string",
            "format": "email"
        },
        "gender": {
            "title": "User Gender",
            "type": "string",
            "enum": [
                "male",
                "female"
            ],
            "enumNames": [
                "Male",
                "Female"
            ]
        },
        "address": {
            "title": "Address",
            "description": "User's Address",
            "type": "object",
            "properties": {
                "city": {
                    "type": "string"
                },
                "state": {
                    "type": "string"
                }
            },
            "required": [
                "city",
                "state"
            ]
        }
    },
    "required": [
        "userName",
        "dateOfBirth",
        "email"
    ]
}

after creating the JSON file you need to upload the file in aem
Go to Navigation, Forms, Forms & Documents,
Click Create button and select File Upload
Browse your file and click upload

My schema is created from a JSON file

3. Create an Adaptive form with JSON Schema

The steps below need to be followed in order to create an adobe aem adaptive form using JSON schema

Go to Navigation, Forms, Forms & Documents,
Click Create button, select your form template, Next button
Add title and other information
Next, setup the configuration according to the bottom image
From Model Tab Select schema from the dropdown
Search in the repository and then select the schema that you have created with the JSON file

Now your form is created now
Open form in edit mode
follow the bottom image, then you can drag and drop your schema

Thanks

No Comment

Sunday, April 9, 2023

Adaptive Form AEM

Adaptive Form with MySql in Adobe AEM

Adaptive Form in Adobe AEM with MySQL

This article will cover the following topics related to Adobe AEM adaptive forms.

Prerequisites to start adobe adaptive form
How to connect MySQL with AEM
How to Create DataModel
How to create a template for an adaptive form
How to create adaptive form using DataModel
How to Submit aem form and save data in MySQL

Prerequisites to start adobe adaptive form

Before you begin working on Adobe AEM adaptive forms, it is essential to install some add-ons (packages), which are listed below.

AEM Adaptive form addons: you can download this form aem software distribution center according to your machine (Windows or Mac) simply install this addon in aem like installing packages.
MySQL Connector: you can download this by clicking Here. and you can install this as a bundle in aem (http://localhost:4502/system/console/bundles)

2. How to connect MySQL with AEM

The steps below need to be followed in order to establish a connection between MySQL and AEM.

Go to http://localhost:4502/system/console/configMgr
Search Here "Apache Sling Connection Pooled DataSource"
Do the next configuration according to the bottom image
after doing all configuration click on save button

3. How to Create Form DataModel

The form data model in AEM refers to the structured representation of the data that is captured and processed by an adaptive form. It defines the fields, data types, validations, and other characteristics of the form data, allowing the form to capture and process data accurately and efficiently. The data model can be created and customized using the Form Modeler tool in AEM. Follow to following setup to create FDM

Goto Navigation, Forms, Data Integration,
Click on Create button and select Form Data Model
Add the title, name, and Select Data Source Configuration click on the next button
Select the Datasource RDBMS that you configured before, click on create button then edit the button

Here you will find your DataSource
Expand your DataSource Here will be a list of Databases that you have already created in your MySQL database
Expand your targeted database there will be a list of all tables that you have created inside your database
Tick your table and tick all services from the bottom in the services then click on Add Selected

Click on the Services tab then select any service (get) and click on Edit properties
Add a title, select your table, and then the Done button
Repeat the same setups for all services and then click on the Save button

There will be a warning in Your Data Model to remove this warning following the bottom image. After doing all configuration click on the save button
Then you will check the warning is Removed.

4. How to create a template for an adaptive form

Template creation is the same as creating an editable template. the difference is you need to select the type "Adaptive Form Template" while creating the template for an adaptive form.
There will be different components that are specific to adaptive form like (Header, Footer), etc.

5. How to create an adaptive form using DataModel

The steps below need to be followed in order to create an adaptive form using DataModel in AEM.

Go to Navigation, Forms, Forms & Documents
Click on Create button and select Adaptive Form
Select the template that you have created for forms, click next
follow bottom images
In Form Model Tab you need to select Form Data Modle and you Data model that you have created Above, click Create