1 Reply Latest reply on Nov 10, 2012 8:52 PM by rush_pawan

    Listeners for drop downs




         I am new to CQ5 and am facing difficulty in finding the solution for my problem. So finally decided to post it here and hoping for a reply from the experts over here. I am trying to implement listeners to dropdowns in my application. My requirement is to have four dropdowns and on the update of the top element all the underlying dropdowns should be updated accordingly. The values for these dropdowns are fetched from the DB and they have a foreign key relationship. I have no clue at all how this can be achieved in CQ5. After surfing over the net, I guess it is possible by using a servlet which fetches the data and constructs the JSON object and then update the dropdown options from the JSON object. I have seen various posts but could not find appropriate solution along with a code snippet for me. Here are the few concerns that I have in this regard:

      1. Where should I define the listeners and attach them to the dropdown?

      2. How do I update the options from the JSON object to the dropdown.

      3. Are there any configuration settings that are required to achieve this?


      I would like to get a code snippet with clear explanation which any newbie would expect. Please let me know if you need any information from my side.

      Thanks in advance for all those helping hands coming forward.




        • 1. Re: Listeners for drop downs
          rush_pawan Level 4



          You can write servlet to return json respone and can configure it in "options" property of xtype "selection". You have to make sure that the json response format should be same which can be interpreted by "selection" widget. You can take an example of node from your local instance just access "/libs/wcm/msm/components/rolloutconfig/chooser/fieldConfig" where you find the json output file "http://<host>:<port>/libs/wcm/msm/content/commands/rolloutconfigs.json". from front side in wcm console when you can refer it from new-->new live copy-->sync config


          sample servlet -


          package com.test;


          import java.io.IOException;

          import java.io.Serializable;

          import javax.servlet.Servlet;

          import org.apache.felix.scr.annotations.Component;

          import org.apache.felix.scr.annotations.Properties;

          import org.apache.felix.scr.annotations.Property;

          import org.apache.felix.scr.annotations.Service;

          import org.apache.sling.api.SlingHttpServletRequest;

          import org.apache.sling.api.SlingHttpServletResponse;

          import org.apache.sling.api.scripting.SlingScriptHelper;

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

          import org.slf4j.Logger;

          import org.slf4j.LoggerFactory;

          import javax.servlet.jsp.PageContext;

          import javax.servlet.jsp.JspFactory;


          @Service(value = Servlet.class)

          @Component(immediate = true, metatype = true)

          @Properties( {

                  @Property(name = "sling.servlet.paths", value = "/libs/testservlet.json"),

                  @Property(name = "service.description", value = "abcd"),

                  @Property(name = "label", value = "testservlet") })

          public class TestServlet extends SlingAllMethodsServlet implements

                  Serializable {



              private static final long serialVersionUID = 1L;


              private static final Logger LOG = LoggerFactory






               * (non-Javadoc)


               * @see

               * org.apache.sling.api.servlets.SlingSafeMethodsServlet#doGet(org.apache

               * .sling.api.SlingHttpServletRequest,

               * org.apache.sling.api.SlingHttpServletResponse)


              protected void doGet(SlingHttpServletRequest request,

                      SlingHttpServletResponse response) throws IOException {






          To answer your other question, i think you can write listeners at your first drop down "on event selectionchangedevent", i can say you to refer http://dev.day.com/docs/en/cq/current/widgets-api/index.html where you can find all the possible events. To write a listener only you have create a "listener"[unstructured] node under the field node (say state node) and override any of the events from api which you think can be suitable to your situation.


          Refer my earlier post as well: http://forums.adobe.com/message/4817545#4817545

          will help in writing event listener.


          Also refer

          1. http://dev.day.com/docs/en/cq/current/developing/widgets.html

          2. http://felix.apache.org/site/apache-felix-http-service.html


          I hope this will help you to proceed and answers to your another post . Let me know if it doesn't help you.

          1 person found this helpful