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

[fabioper85]

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

[Mayank_Gandhi · Accepted solution]

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

[smacdonald2008]

Great Response Mayank as always!

[fabioper85]

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

[smacdonald2008]

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

[smacdonald2008]

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

[Mayank_Gandhi]

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' .

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:

Services:

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

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.

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.

[fabioper85]

Thank you so much, Mayank

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

Great support ever! :-)

Fabio

[fabioper85]

Thank you so much, smacdonald2008 for the support!

Kindly

Fabio

[fabioper85]

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!!

[Mayank_Gandhi]

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

[Jared_Langdon]

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