Populate an AEM 6 select dialog widget with data from external service with

You are correct - this is not a documented use case for AEM 6. You would have to write a custom service to do this. You could write a custom xtype for this use case. In the custom xtype, call a service  on the back end to return JSON, or XML, Then parse that data in the JS (that represents the custom xtype) and  populate the dropdown. You can use custom xtypes in AEM 6 - see:

http://helpx.adobe.com/experience-manager/using/creating-touchui-xtypes.html

I am adding this use case to the list of community articles. I will also pass this information to the AEM documentation team. 

Hi,

indeed the datasource solution was the one I have actually followed and that worked. I managed to make the select work exactly with the same example that Justin suggested.

I'm sharing below some parts of the code of the solution.

1) Specify the datasource inside the select Granite UI component:

{    "jcr:primaryType": "cq:Component",    "jcr:createdBy": "admin",    "jcr:title": "Dynamic Dropdown",    "allowedParents": [       "*/parsys"    ],    "jcr:created": "Thu Aug 07 2014 15:52:58 GMT+0200",    "componentGroup": "General",    "cq:dialog": {       "jcr:primaryType": "nt:unstructured",       "jcr:title": "Dynamic Dropdown Component",       "sling:resourceType": "cq/gui/components/authoring/dialog",       "content": {          "jcr:primaryType": "nt:unstructured",          "sling:resourceType": "granite/ui/components/foundation/container",          "layout": {             "jcr:primaryType": "nt:unstructured",             "type": "nav",             "sling:resourceType": "granite/ui/components/foundation/layouts/fixedcolumns"          },          "items": {             "jcr:primaryType": "nt:unstructured",             "column": {                "jcr:primaryType": "nt:unstructured",                "sling:resourceType": "granite/ui/components/foundation/container",                "items": {                   "jcr:primaryType": "nt:unstructured",                   "fieldset": {                      "jcr:primaryType": "nt:unstructured",                      "jcr:title": "Configuration",                      "sling:resourceType": "granite/ui/components/foundation/form/fieldset",                      "layout": {                         "jcr:primaryType": "nt:unstructured",                         "sling:resourceType": "granite/ui/components/foundation/layouts/fixedcolumns"                      },                      "items": {                         "jcr:primaryType": "nt:unstructured",                         "column": {                            "jcr:primaryType": "nt:unstructured",                            "sling:resourceType": "granite/ui/components/foundation/container",                            "items": {                               "jcr:primaryType": "nt:unstructured",                               "dropdown": {                                  "jcr:primaryType": "nt:unstructured",                                  "name": "taskPriority",                                  "fieldLabel": "Task Priority",                                  "sling:resourceType": "granite/ui/components/foundation/form/select",                                 "datasource": {                                     "jcr:primaryType": "nt:unstructured",                                     "sling:resourceType": "/apps/my-commerce/components/global/datasource"                                  }                              }                            }                         }                      }                   }                }             }          }       }    },    "dialog": {       "jcr:primaryType": "cq:Dialog",       "helpPath": "en/cq/current/wcm/default_components.html#Text",       "title": "Text",       "xtype": "tabpanel"    },    "dynamicdd.html": {       "jcr:primaryType": "nt:file",       "jcr:createdBy": "admin",       "jcr:created": "Thu Aug 07 2014 15:52:58 GMT+0200",       "jcr:content": {          "jcr:primaryType": "nt:resource",          "jcr:lastModifiedBy": "admin",          "jcr:mimeType": "text/html",          "jcr:lastModified": "Thu Oct 09 2014 17:13:23 GMT+0200",          ":jcr:data": 19,          "jcr:uuid": "238cc2ae-ad70-48a9-854f-13579e7da95e"       }    },    "dynamicdd.js": {       "jcr:primaryType": "nt:file",       "jcr:createdBy": "admin",       "jcr:created": "Thu Aug 07 2014 15:52:58 GMT+0200",       "jcr:content": {          "jcr:primaryType": "nt:resource",          "jcr:lastModifiedBy": "admin",          "jcr:mimeType": "application/javascript",          "jcr:lastModified": "Thu Oct 09 2014 17:13:09 GMT+0200",          ":jcr:data": 100,          "jcr:uuid": "151faa83-5d33-4e3e-bff1-052277671b58"       }    } }

2)  The datasource script /apps/my-commerce/components/global/datasource/datasource.jsp

A simplified version of the code with respect to the one of the example of acs-aem-commons. Just adding one item to the select:

<%@page session="false" import=" org.apache.sling.api.resource.Resource, org.apache.sling.api.resource.ResourceUtil, org.apache.sling.api.resource.ValueMap, org.apache.sling.api.resource.ResourceResolver, org.apache.sling.api.resource.ResourceMetadata, org.apache.sling.api.wrappers.ValueMapDecorator, java.util.List, java.util.ArrayList, java.util.HashMap, java.util.Locale, com.adobe.granite.ui.components.ds.DataSource, com.adobe.granite.ui.components.ds.EmptyDataSource, com.adobe.granite.ui.components.ds.SimpleDataSource, com.adobe.granite.ui.components.ds.ValueMapResource, com.day.cq.wcm.api.Page, com.day.cq.wcm.api.PageManager"%><% %><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><% %><cq:defineObjects/><% // set fallback request.setAttribute(DataSource.class.getName(), EmptyDataSource.instance()); ResourceResolver resolver = resource.getResourceResolver(); List<Resource> fakeResourceList = new ArrayList<Resource>(); ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>()); vm.put("value", "value-test"); vm.put("text", "Value Test"); fakeResourceList.add(new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm)); DataSource ds = new SimpleDataSource(fakeResourceList.iterator()); request.setAttribute(DataSource.class.getName(), ds); %>

This code works well:

[img]TouchDialog.png[/img]

Look for a new community article named "Using DataSource objects to populate AEM Touch UI objects"

Hey boser87​,

Does you dynamic dropdown work in edit mode. (Editing component should pre-populate the list and select the item that was selected in the dropdown). If yes, could you please attach your implementation? I see my dropdowns empty in while editing the component. I am using the dynamic dropdown in page dialog.

Thank you,