Remplissage dynamique des listes déroulantes

Conditions préalables

Procédure pour remplir de façon dynamique des listes déroulantes

Supposons que vous souhaitez remplir la liste déroulante Etat en fonction d’une valeur que vous sélectionnez dans la liste déroulante Pays. Si vous sélectionnez Australie dans la liste déroulante Pays, la liste déroulante Etat affiche les états de l’Australie. La procédure ci-dessous décrit la marche à suivre.

  1. Créez un projet avec les modules suivants :

    • Le lot contenant la logique pour remplir la liste déroulante, en l’occurrence une servlet.
    • Le contenu, qui incorpore le fichier .jar et possède une ressource de liste déroulante. La servlet pointe vers cette ressource.
  2. Créez une servlet basée sur le paramètre de requête Pays, qui renvoie un tableau contenant les noms des états du pays.

    @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. Créez un noeud de liste déroulante sous une hiérarchie de dossiers spécifique dans les applications (par exemple, créez un noeud sous /apps/myfolder/demo). Assurez-vous que le paramètre sling:resourceType pour le noeud est identique à celui vers lequel pointe la servlet (/apps/populatedropdown?lang=fr).

    Création d’un nœud de liste déroulante

  4. Empaquetez le nœud de contenu et incorporez le fichier .jar à un emplacement spécifique (par exemple /apps/myfolder/demo/install/). Déployez le même fichier sur le serveur.

  5. Créez un formulaire adaptatif et ajoutez deux listes déroulantes, Pays et Etat, à ce dernier. La liste Pays peut contenir les noms des pays. La liste Etat peut remplir de manière dynamique les noms des états pour le pays sélectionné dans la première liste.

    Ajoutez les noms des pays à afficher dans la liste Pays. Dans la liste Etat, ajoutez un script pour la remplir selon le nom du pays de la liste Pays.

    Ajouter les noms de paysAjout d'un script pour renseigner les noms d'étatlistes déroulantes Pays et Etat pour rassembler

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

Package de contenu contenant un exemple de formulaire adaptatif (demo/AFdemo) avec le code ci-dessus implémenté.

Obtenir le fichier

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now