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.
Datasource: 
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. 
datasourcearticle
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.

package com.foo.service.core;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import org.apache.sling.api.resource.ResourceMetadata;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.wrappers.ValueMapDecorator;
import org.apache.commons.collections.Transformer;
import org.apache.commons.collections.iterators.*;
import com.adobe.cq.sightly.WCMUsePojo;
import com.adobe.granite.ui.components.ds.DataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
public class HtlDataSourceExample extends WCMUsePojo
{
@Override
 public void activate() throws Exception {
 final ResourceResolver resolver = getResource().getResourceResolver();
//Creating the Map instance to insert the countries
 final Map<String, String> countries = new LinkedHashMap<String, String>();
 countries.put("in", "India");
 countries.put("us", "United States");
 countries.put("aus", "Australia");
 countries.put("pak", "Pakistan");
 countries.put("sri", "Srilanka");
 @SuppressWarnings("unchecked")
//Creating the Datasource Object for populating the drop-down control.
 DataSource ds = new SimpleDataSource(new TransformIterator(countries.keySet().iterator(), new Transformer() {
 @Override
//Transforms the input object into output object
 public Object transform(Object o) {
 String country = (String) o;
//Allocating memory to Map
 ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());
//Populate the Map
 vm.put("value", country);
 vm.put("text", countries.get(country));
 return new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm);
 }
 }));
 this.getRequest().setAttribute(DataSource.class.getName(), ds);
 }
}

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

DataSource ds = new SimpleDataSource();
this.getRequest().setAttribute(DataSource.class.getName(), ds);

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.
projectaem6-3
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.

Name: datasource
Type: nt:folder

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

Name: mylist
Type: nt:folder

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.

<sly data-sly-use.data="com.foo.service.core.HtlDataSourceExample">
</sly>

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.

Name: tasks
Type: nt:unstructured

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

fieldLabel: Dropdown
name: ./dropdown
sling:resourceType: /libs/granite/ui/components/foundation/form/select

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.

Name: datasource
Type: nt:unstructured

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

sling:resourceType: /apps/myHTL63/components/datasource/mylist

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

By coderss

Leave a Reply

Your email address will not be published. Required fields are marked *