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;
}

}


Comments

Popular posts from this blog

AEM 6.3 | Apache Sling Content Disposition Filter | Hosting Static HTML in JCR

Image Component Customization - Image Size Restriction - Drag/Drop - Touch UI

Access OSGI ser­vice from Sightly WCMUsePojo | AEM 6.3