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

[boser87]

Hi,

I'm trying to populate a select widget of AEM 6 Touch UI with data from an external service.

The widget I am currently investigating is /libs/granite/ui/components/foundation/form/select. Unfortunately I did not find any deep documentation about this so I end up study the code. There I found the documentation of the render JSP script component of the widget stating: "The options of this component can be specified by <code>items</code> child resource (1), or by datasource mechanism (2)." As I understand, the datasource is specified with a datasourceResourcetype property. The datasource can be a JSP or whatever. However I could not find any example of this datasource for the above select component of AEM 6 nor I found an example of a datasource that  fetch  data from external service.

Could you please point me to such documentation? Or, may you please advice me with other ways to populate a dropdown select of AEM 6 touch ui widget with data from external services?

Thank you in advance!

Stefano

[smacdonald2008]

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

[smacdonald2008]

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

[justin_at_adobe · Accepted solution]

Hi Stefano,

You're absolutely correct that to populate a TouchUI drop-down list from an external service, you would create a custom datasource. If you are looking for an example of a custom datasource, take a look at https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/master/content/src/main/content/jc... and the configuration documentation at http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html#using-lists-i....

Regards,

Justin

[boser87]

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); %>

[smacdonald2008]

This code works well:

[img]TouchDialog.png[/img]

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

[zaddm98685815]

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,