Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
AEM DataSource for Touch UI Drop Down based on component configuration.
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.
@Override
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("text",componentDropDownVO.getText());
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;
}
}
Create a nt:unstructured node mydatasource in your project repository e.g. /apps/myapp/utils/datasource/mydatasource
set below property to this node
sling:resourceType="myproject/components/datasource"
Set following property to select/datasource node
sling:resourceType="myapp/utils/datasource/mydatasource"
Arun Patidar
Related Conversations
