Expand my Community achievements bar.

AEM DataSource for Touch UI Drop Down based on component configuration.


Level 2

Here is Step by Step procedure to create dynamic drop down for Touch UI based on configuration from multi field component.

Step 1: Create a multifield component from OOB widget provided by Granite library as simple as using text and value fields using text field widget.

sling:resourceType: granite/ui/components/foundation/form/multifield

Step 2. Create a component which would have a touch ui dialog with below node.

Create a node with nt:unstructured having below property.

sling:resourceType :granite/ui/components/foundation/form/select.

Next node would be datsource using sling:resourceType with sling servlet defined with path.

Step 3: Create a sling servlet as below definition.

@Component(service = Servlet.class, property = {

  Constants.SERVICE_DESCRIPTION + "= Service to get drop down list",

  "sling.servlet.methods=" + HttpConstants.METHOD_GET,

  "sling.servlet.paths=" + "/apps/comp/getDropDownList" })

Step 4 : Below code snippet to fetch the data and respond back to Author Touch ui dialog.


protected void doGet(SlingHttpServletRequest request,

   SlingHttpServletResponse response) throws IOException {

  try {

   ResourceResolver resourceResolver = request.getResourceResolver();

   String jsonPath = "/content/we-retail/language-masters/en/experience/jcr:content/content/dropdowncomp";

   Resource resource = resourceResolver.getResource(jsonPath);

   if (resource != null) {

   ValueMap valuemap = resource.getValueMap();

   String[] jsonInString = valuemap.get("dropdownList", String[].class);

   ObjectMapper mapper = new ObjectMapper();

   ComponentDropDownVO componentDropDownVO;

   List<Resource> dropdownList = new ArrayList<>();

   for(String jsonString : jsonInString){

   componentDropDownVO = mapper.readValue(jsonString,ComponentDropDownVO.class);

   ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>());


           vm.put("value", componentDropDownVO.getValue());

           dropdownList.add(new ValueMapResource(request.getResourceResolver(), new ResourceMetadata(), "nt:unstructured", vm));


   DataSource dataSource = new SimpleDataSource(dropdownList.iterator());

       request.setAttribute(DataSource.class.getName(), dataSource);


  } catch (Exception e) {

   LOGGER.error("Error in Get Drop Down Values" , e);



Step 5: Component Drop Down VO Class for POJO.

public class ComponentDropDownVO {

    private String text;

    private String value;

public String getText() {

  return text;


public void setText(String text) {

  this.text = text;


public String getValue() {

  return value;


public void setValue(String value) {

  this.value = value;



5 Replies


Level 1


Can you please let me know how to use resourcetypes instead of paths.

I am trying

@Component( service = Servlet.class, immediate = true, property = {

    "sling.servlet.resourceTypes=myproject/components/datasource", "sling.servlet.methods=get", } )

But its not working.


Community Advisor

Create a nt:unstructured node mydatasource in your project repository e.g. /apps/myapp/utils/datasource/mydatasource

set below property to this node


Set following property to select/datasource node


Arun Patidar


Level 1

Thanks for the reply arunpatidar26

My setup is as follow.

  1. /apps/myproject/components/datasource -sling:folder
  2. /apps/myproject/components/datasource/permission - nt:unstructured with property




  1. And my servlet as shown above.
  2. But its till not working.