How to create dynamic drop down in Touch UI dialog in AEM 6.2.

There are many occasion where we need to populate drop down value dynamically. There is already example provide in AEM in list component at location /libs/foundation/components/list. In this example a folder "displayasdatasource" is create and under the folder a JSP "displayasdatasource" has logic to set dropdown value.

AEM uses Datasource to hold the dynamic value . we need to create a map which have dropdown value and add that map to datasource.

In this blog we will write the same logic in servelet and will invoke the servelet from dropdown node. Below are the steps:-

1) Create a component in Touch UI and created a field drop down field in dialog as shown in below pic.

2) Write the servlet to populate the datasource as below.

package com.aemnote.service.core.servlets;

import java.io.IOException;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.LinkedHashMap;

import java.util.List;

import javax.servlet.ServletException;

import org.apache.felix.scr.annotations.sling.SlingServlet;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.SlingHttpServletResponse;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.api.resource.ResourceMetadata;

import org.apache.sling.api.resource.ResourceResolver;

import org.apache.sling.api.resource.ValueMap;

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

import org.apache.sling.api.wrappers.ValueMapDecorator;

import com.adobe.granite.ui.components.ds.DataSource;

import com.adobe.granite.ui.components.ds.EmptyDataSource;

import com.adobe.granite.ui.components.ds.SimpleDataSource;

import com.adobe.granite.ui.components.ds.ValueMapResource;

@SlingServlet(paths = "/bin/availableThemes")

public class AvailableThemesServlet extends SlingSafeMethodsServlet {

private static final long serialVersionUID = 1668099305241096740L;

@Override

protected void doGet(SlingHttpServletRequest request,

SlingHttpServletResponse response) throws ServletException,

IOException {

List<Resource> themes = new ArrayList<Resource>();

// set fallback

ResourceResolver resolver = request.getResourceResolver();

request.setAttribute(DataSource.class.getName(),

EmptyDataSource.instance());

ValueMap vm = null;

for (int i = 0; i < 5; i++) {

// allocate memory to the Map instance

vm = new ValueMapDecorator(new HashMap<String, Object>());

// Specify the value and text values

String Value = "value" + i;

String Text = "text" + i;

// populate the map

vm.put("value", Value);

vm.put("text", Text);

themes.add(new ValueMapResource(resolver, new ResourceMetadata(),

"nt:unstructured", vm));

}

DataSource dataSource = new SimpleDataSource(themes.iterator());

request.setAttribute(DataSource.class.getName(), dataSource);

}

}

3) When your dialog load then it will call the above servlet and populate the dropdown note.

Note :- Please add "/" before bin in your servlet path otherwise it will not able to locate the servlet. Ex - /bin/availableThemes 


4.

Please let me know if you face any issue.

How to restrict user while creating a AEM/CQ page in upper case?

There are use case in which client need to prevent author from creating cq page name in UPPER CASE.

Perform the following step to allow author to create page only in lower case or numbers.

1. Copy Page.Actions.js from /libs/cq/ui/widgets/source/widgets/wcm/Page.Actions.js to /apps//cq/ui/widgets/source/widgets/wcm/Page.Actions.js
2. search te beforesubmit function – dialog.on(“beforesubmit”, function()
3. Add below code under beforesubmit function

var label = document.getElementsByName(“label”);
var labelValue = “”;
for(var labelCount = 0; labelCount < 1000; labelCount++) {
if(label[labelCount] != null) {
//alert(label[labelCount].value);
labelValue = label[labelCount].value;
}
}
if(labelValue.length > 0 && !/^[a-z0-9\-]+$/.test(labelValue)) {
CQ.Ext.Msg.show({
title:CQ.I18n.getMessage(‘Move Page’),
msg: CQ.I18n.getMessage(‘”Name” field should have only “-“,lower case alphabets or numbers.’),
buttons: CQ.Ext.Msg.OK,
icon: CQ.Ext.Msg.ERROR
});
//alert(“\”Name\” field should have only \”-\”, 0 to 9 and lower case alphabets.”);
return false;
}
Note :- Do not edit under libs folder