Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM 6.3 Forms - How can I populate a dropdownlist from database?

Avatar

Level 3

Hi everyone

I'm Fabio from Italy

I'm new about AEM Forms and I'm working on a project for a company!

We're building an Adaptive Form with a Form Data Model connected

We need to populate a dropdownlist from a database (on initialize), but I've no idea how to do

Can someone suggest me some working examples?

Thank you so much

Fabio

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi Fabio,

You may refer this thread for help on the approach Adaptive form dynamic Drop-down funtionality .

Somewhere you will have to write your own servlet and make a JDBC call to your database and bring the list to your repository. This approach can be merged with the sample approach to load the list in the dropdown from repository further as mentioned in AEM 6.0 Forms Help | Dynamically populating drop-down lists.

Also, if you can expose the list via JSON then you can even use jquery on the form initialize to load the list in the drop-down. For this approach, you may find a lot of samples available publically. Sharing few for reference:

How to populate a dropdownlist with json data in jquery? - Stack Overflow

How to Load Data Dynamically to Html Dropdownlist - CodeProject

View solution in original post

11 Replies

Avatar

Correct answer by
Employee Advisor

Hi Fabio,

You may refer this thread for help on the approach Adaptive form dynamic Drop-down funtionality .

Somewhere you will have to write your own servlet and make a JDBC call to your database and bring the list to your repository. This approach can be merged with the sample approach to load the list in the dropdown from repository further as mentioned in AEM 6.0 Forms Help | Dynamically populating drop-down lists.

Also, if you can expose the list via JSON then you can even use jquery on the form initialize to load the list in the drop-down. For this approach, you may find a lot of samples available publically. Sharing few for reference:

How to populate a dropdownlist with json data in jquery? - Stack Overflow

How to Load Data Dynamically to Html Dropdownlist - CodeProject

Avatar

Level 3

Thank you so much Mayank for the answer

Let me ask you something more specific:

( I would like to be consistent from the beginning of this project, so I prefer the servlet-solution, because I think is better, in the long run)

My need is:

A dropdown populated from database with a list of customers (I want to show just the id number),

when I select a value from the dropdown I want to display the details of the customer

....so

1) to create the servlet you mentioned is necessary to understand how to create an OSGi Bundle?

1.1) Could you link me some example around the internet so I can "study and paste"?

2) JSON or XML returning from the servlet is the same or one of them is better, thinking about the structure of AEM Forms?

3) I've created a Service in a Form Data Model connected to my Adaptive Form! It can help or is just a waste of time?

Thank you so much...and sorry for the noob questions!

Fabio

Avatar

Level 10

Yes - to create a Servlet in AEM - you need to understand how to create an OSGi bundle. I recommend that you look at this article - it will teach you how to work with Maven to generate some default files - including a Servlet and how to compile and deploy the project:

Creating an Adobe Experience Manager 6.4 Project using Adobe Maven Archetype 13

Avatar

Level 10

Also - we are releasing a brand new Article for AEM Forms that shows you how to submit data from an adaptive form and use a custom service - defined in an OSGi bundle to populate a database.

Adobe Experience Manager Help | Submitting Adaptive Form Data to MySQL using a DataSourcePool

Avatar

Employee Advisor

Hi Fabio,

I think we might help you with FDM as well, I had to explore few things to get it to work but you may improvise it further.

Step 1: Have the list of values in the database in a single field. In below sample I have kept all the values I plan to populate as comma separated values  'a,b,c,d,e' .

1537025_pastedImage_0.png

Step 2: Create an FDM using RDBMS, make sure you add the get service here as we will use it in the form for invocation. Remove the arguments list from the model properties.

Model:

1537028_pastedImage_4.png

Services:

1537029_pastedImage_5.png

Test your service to make sure you get the response from db something like this:

1537030_pastedImage_6.png

Now let's move to Adaptive form:

Create an Adaptive form based on the FDM you have created earlier. Create one textfield name it textbox_0 and make it hidden. Go to root panel and create a script on initialize. You need to invoke the FDM service here and set the values coming from the response of service to the hidden field.

1537044_pastedImage_9.png

Once done with the above step you need to now set the value for drop-down. Go to the textfield which you made hidden earlier and on its value commit place the below script:

dropdownlist.items = this.value; // update thedropdownlist with your dropdownlist element name

Preview the form and you would see something like this now.

1537045_pastedImage_12.png

Avatar

Level 3

Thank you so much, Mayank

I'll try very soon this solution and I'll give you some feedbacks

Great support ever! :-)

Fabio

Avatar

Level 3

Thank you so much, smacdonald2008 for the support!

Kindly

Fabio

Avatar

Level 3

Tested...It works!

Now I saved a lot of time to understand Sling and make the application even better taking data from db

Thank you so much for the support!

Big up for you!!

Avatar

Employee Advisor

Good to know that the steps I shared worked for you.

Keep exploring and you may post on forums in case of any query further.

Thanks,

Mayank

Avatar

Level 6

I found a solution that does not require a comma separated list.  Check my post here: https://forums.adobe.com/message/10513496