AEM 6.2 Touch UI dropdown – Pulling data dynamically using Sightly


The AEM Touch UI Dialog dropdown field should pull data dynamically.


Step 1: Create a Touch UI dialog with the drop down (select) field in it.. Inside the drop down field, add a node “datasource” and add a property “sling:resourceType” and point it to a component.

That component will have the implementation to get the data from external source to your drop down.


Step 2: Create a component “language” and add “language.html” inside it. (we’re using sightly!!)


Step 3: Call a Use class from the component html


Important Note: If you want to get the current page path in the datasource use class, below is the code:

// get list of child nodes of the current component node
Resource listResource = resourceResolver.getResource((String) request.getAttribute(Value.CONTENTPATH_ATTRIBUTE));


Step 4: Write a use class and add the below code:


package com.aemsamples.samples.use;

import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;

import org.apache.commons.collections.Transformer;
import org.apache.commons.collections.iterators.TransformIterator;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

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 DataSourceUse extends WCMUsePojo {

private Logger LOG = LoggerFactory.getLogger(getClass());

public void activate() throws Exception {

final Map<String, String> languages = new LinkedHashMap<String, String>();

languages.put(“ar”, “Arabic”);
languages.put(“en”, “English”);
languages.put(“de”, “German”);

final ResourceResolver resolver = getResourceResolver();

DataSource ds = new SimpleDataSource(new TransformIterator(languages.keySet().iterator(), new Transformer() {
public Object transform(Object o) {
String language = (String) o;
ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());

vm.put(“value”, language);
vm.put(“text”, languages.get(language));

return new ValueMapResource(resolver, new ResourceMetadata(), “nt:unstructured”, vm);

getRequest().setAttribute(DataSource.class.getName(), ds);



Step 4: Thats it, your drop down should have the languages.


One thought on “AEM 6.2 Touch UI dropdown – Pulling data dynamically using Sightly

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s