AEM 6.2 Touch UI dropdown – Pulling data dynamically using Sightly

Requirement:

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

Solution:

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.

Example:

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.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.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());

@Override
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.