How to create dropdown dynamically using Granite Datasource object in AEM 6.3

Posted in AEM Tutorials By ratnakumar kotla On September 16, 2017

In this article I am going to explain how to create the dropdown dynamically in a dialog using Granite Datasource object. Here we are creating Datasource object using the Java class that extends the WCMUsePojo class and then how Datasource is used within HTL.


If you want to display the items in dropdown dynamically then you can use the Datasource object. A drop-down control is populated by using a com.adobe.granite.ui.components.ds.DataSource object. For information, see DataSource.  The below screenshot represents the items displayed in the dropdown dynamically. 


Creating DataSource Object using Java class:

Step 1: Create the Java class which extends the WCMUsePojo and creating the Data source object in it. Below is the illustration of the java class that shows how to create the items dynamically.

In the above illustration, we are creating the Datasource object to populate the drop-down control.

//Create the Datasource that is used to populate the drop-down control

This is how you need to create the Datasource object from the Java class.

Step 2: Build the java code using maven command i.e., mvn -PautoInstallPackage install

Step 3: After the build successful, you will find the demo project as in the below screenshot.


Step 4: Create the Datasource folder which contains the HTL file to call the datasource object that is created in the Java class.

Step 4.1: Create the datasource folder under /apps/myHTL63/components as shown in below illustration.

Step 4.2: Create the folder mylist under the /apps/myHTL63/components/datasource as shown below

Step 4.3: Create the HTL file i.e., mylist.html under mylist(/apps/myHTL63/components/datasource/mylist) 

Step 4.4: Now insert the below HTL code in mylist.html(/apps/myHTL63/components/datasource/mylist/mylist.html) to call the datasource object that is created in the Java class.

Step 5: Create the Dropdown field in the dialog

Here is my simple dialog in the Hello world component which contains the text field(/apps/myHTL63/components/content/helloworld/cq:dialog/content/items/column/items). Add the Dropdown field in the dialog.

Step 5.1: Right click on /apps/myHTL63/components/content/helloworld/cq:dialog/content/items/column/items, select Create and Create Node. Enter the following values.

Step 5.2: Add the following properties to the tasks node:

Step 5.3: Right click on this node  /apps/myHTL63/components/content/helloworld/cq:dialog/content/items/column/items/tasks  and Create Node. Enter the following values.

Step 5.4: Add the following property to the datasource node: 

This is how you locate the folder datasource in the dialog and call the datasource object from the java that we have created previously.

Note: If there are two datasource objects that created in the java class and you want to display the another datasource object as drop-down in the dialog, then make sure you have created the another folder for second datasource object i.e., under /apps/myHTL63/components/datasource as we created the mylist(/apps/myHTL63/components/datasource/mylist) in the previous illustration. 

Expected Output:

When you call the datasource object which is in Java class using HTL then all the countries will display as a drop-down control as shown in the below screenshot.