May 10, 2020
Estimated Post Reading Time ~

Display dynamic options in a Touch UI Dialog Select Field Skip to end of metadata

Step 1: Create a simple datasource file
(/apps/project/components/datasource/numbers/numbers.jsp)
datasource (nt:folder), numbers(nt:folder), numbers.jsp(nt:file)

Sample code:
<%@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,
java.util.Map,
java.util.LinkedHashMap"%>
<%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0"%>
<%@ include file="/apps/shared/init.jsp"%>
<%
%>
<%

// set fallback
request.setAttribute(DataSource.class.getName(), EmptyDataSource.instance());
ResourceResolver resolver = resource.getResourceResolver();
//Create an ArrayList to hold data
List fakeResourceList = new ArrayList();
//dynamic options
final Map options = new LinkedHashMap();
options.put("One", "1");
options.put("Two", "2");
options.put("Three", "3");
options.put("Four", "4");
ValueMap vm = null;
if (null != options) {
for (Map.Entry entry : options.entrySet()) {
//allocate memory to the Map instance
vm = new ValueMapDecorator(new HashMap());
String Value = entry.getValue();
String Text = entry.getKey();
//populate the map
vm.put("value", Value);
vm.put("text", Text);

fakeResourceList.add(new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm));
}
}
//Create a DataSource that is used to populate the drop-down control
DataSource ds = new SimpleDataSource(fakeResourceList.iterator());
request.setAttribute(DataSource.class.getName(), ds);
%>

Step 2: The Touch UI dialog field using datasource node
jcr:primaryType="cq:Widget"
fieldLabel="Dynamic Options"
name="./dynamic"
sling:resourceType="granite/ui/components/foundation/form/select">
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/journey/components/datasource/numbers"/>

Step 3


References:
https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/datasource.html


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.