DocumentationAEM 6.5User Guide

Dynamically populating drop-down lists dynamically-populating-drop-down-lists

Last update: Wed Dec 06 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Prerequisites prerequisites

Procedure to dynamically populate drop-down lists procedure-to-dynamically-populate-drop-down-lists

Consider a scenario where you want to populate the State drop-down list based on a value that you select in the Country drop-down list. If you select Australia in the Country drop-down list, the State drop-down list displays the states within Australia. The following procedure describes how to accomplish this task.

  1. Create a project with the following modules:

    • The bundle that contains the logic to populate the drop-down, which in this case is a servlet.
    • The content, which embeds the .jar file and has a drop-down resource. The servlet points to this resource.

  2. Write a servlet based on the request parameter Country, which returns an array that contains the names of states within the country.

    code language-java 
    @Component(metatype = false)
@Service(value = Servlet.class)
@Properties({
        @Property(name = "sling.servlet.resourceTypes", value = "/apps/populatedropdown"),
        @Property(name = "sling.servlet.methods", value = {"GET", "POST"}),
        @Property(name = "service.description", value = "Populate states dropdown based on country value")
})
public class DropDownPopulator extends SlingAllMethodsServlet {
    private Logger logger = LoggerFactory.getLogger(DropDownPopulator.class);

    protected void doPost(SlingHttpServletRequest request,
                          final SlingHttpServletResponse response)
            throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        try {
            String US_STATES[] = {"0=Alabama",
                    "1=Alaska",
                    "2=Arizona",
                    "3=Arkansas",
                    "4=California",
                    "5=Colorado",
                    "6=Connecticut",
                    "7=Delaware",
                    "8=Florida",
                    "9=Georgia",
                    "10=Hawaii",
                    "11=Idaho",
                    "12=Illinois",
                    "13=Indiana",
                    "14=Iowa",
                    "15=Kansas",
                    "16=Kentucky",
                    "17=Louisiana",
                    "18=Maine",
                    "19=Maryland",
                    "20=Massachusetts",
                    "21=Michigan",
                    "22=Minnesota",
                    "23=Mississippi",
                    "24=Missouri",
                    "25=Montana",
                    "26=Nebraska",
                    "27=Nevada",
                    "28=New Hampshire",
                    "29=New Jersey",
                    "30=New Mexico",
                    "31=New York",
                    "32=North Carolina",
                    "33=North Dakota",
                    "34=Ohio",
                    "35=Oklahoma",
                    "36=Oregon",
                    "37=Pennsylvania",
                    "38=Rhode Island",
                    "39=South Carolina",
                    "40=South Dakota",
                    "41=Tennessee",
                    "42=Texas",
                    "43=Utah",
                    "44=Vermont",
                    "45=Virginia",
                    "46=Washington",
                    "47=West Virginia",
                    "48=Wisconsin",
                    "49=Wyoming"};
            String AUSTRALIAN_STATES[] = {"0=Ashmore and Cartier Islands",
                    "1=Australian Antarctic Territory",
                    "2=Australian Capital Territory",
                    "3=Christmas Island",
                    "4=Cocos (Keeling) Islands",
                    "5=Coral Sea Islands",
                    "6=Heard Island and McDonald Islands",
                    "7=Jervis Bay Territory",
                    "8=New South Wales",
                    "9=Norfolk Island",
                    "10=Northern Territory",
                    "11=Queensland",
                    "12=South Australia",
                    "13=Tasmania",
                    "14=Victoria",
                    "15=Western Australia"};
            String country = request.getParameter("country");
            JSONArray stateJsonArray = new JSONArray();
            if (country.length() > 0) {
                if ("australia".equalsIgnoreCase(country)) {
                    stateJsonArray = new JSONArray();
                    for (String state : AUSTRALIAN_STATES) {
                        stateJsonArray.put(state);
                    }
                } else if ("unitedstates".equalsIgnoreCase(country)) {
                    stateJsonArray = new JSONArray();
                    for (String state : US_STATES) {
                        stateJsonArray.put(state);
                    }
                }
                response.setContentType("application/json");
                response.getWriter().write(stateJsonArray.toString());
            }

        } catch ( Exception e) {
            logger.error(e.getMessage(), e);
        }
    }
}

  3. Create a drop-down node under a particular folder hierarchy in apps (for example, create a node under /apps/myfolder/demo). Ensure that the sling:resourceType parameter for the node is the same as that to which the servlet points (https://experienceleague.adobe.com/apps/populatedropdown?lang=en).

    Create a drop-down node

  4. Package the content node and embed the .jar file at a particular location (for example, /apps/myfolder/demo/install/). Deploy the same file on the server.

  5. Create an adaptive form and add two drop-down lists, Country and State to it. The Country list can include the names of countries. The State list can dynamically populate the names of states for the country you select in the first list.

    Add the names of countries to display in Country list. In the State list, add a script to populate it based on the name of the country in the Country list.

    Adding country names Adding script to populate state names Country and State drop-down lists togather

    code language-javascript 
    JSON.parse(
    $.ajax({
        url: "/apps/myfolder/demo/dropdown",
        type: "POST",
        async: false,
        data: {"country": country.value},
         success: function(res){},
         error : function (message) {
              guideBridge._guide.logger().log(message);
              successFlag = false;
              }
           })
.responseText);

The Content package that contains a sample adaptive form (demo/AFdemo) with the above code implemented.

Get File

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2