Sunday, April 9, 2023

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.

  1. Prerequisites to start adobe adaptive form
  2. How to connect MySQL with AEM
  3. How to Create DataModel
  4. How to create a template for an adaptive form
  5. How to create adaptive form using DataModel
  6. How to Submit aem form and save data in MySQL


  1. 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.
  1. 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.
  2. 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.



 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
  • Now you can drag and drop text fields or anything according to the requirement
  • To submit the form in also need to select "Submit Button Component"


  • Configure the submit button according to the bottom image


6. How to Submit aem form and save data in MySQL


  • Now its time to configure submit handler to submit the form on the button click
  • Select the parent Container of the form, and click on configure icon.
  • Next, Configure according to the bottom image

  • Click on Preview mode
  • add data in the form and submit
  • you will see the form submitted and data stored in Mysql Database




Thanks


Previous Post
Next Post

post written by:

0 comments: